CODEWITHSUNDEEP
javascriptnavigationkey
cryptocyborg
cryptocyborg

Reputation: 9

Key Navigation with Javascript

Please Help! I have spent a week to complete this game and this is the final huddle i have been stuck with for a couple of days now. I know some techy out there would probably take a glance and flick something in place. But I'm not very sophisticated with javascript and therefore need some help.

 $(document).keydown(function(e){
    // left arrow
    if (e.keyCode == 37 && currentCell > 0) { 
       currentCell--;
       ChangeCurrentCell();
       return false;
    }
    // up arrow
    if (e.keyCode == 38 && currentRow > 0) { 
       currentRow--;
       ChangeCurrentCell();
       return false;
    }
    // right arrow
    if (e.keyCode == 39 && currentCell < MAX_CELL) { 
       currentCell++;
       ChangeCurrentCell();
       return false;
    }
    //down arrow
    if (e.keyCode == 40 && currentRow < MAX_ROW) { 
       currentRow++;
       ChangeCurrentCell();
       return false;
    }
    // enter key
    if (e.keyCode == 13) {

    }
     });


 function ChangeCurrentCell()
 {

    document.getElementById(Boxes[currentRow + currentCell]).focus();
    SimulateMouseOver(document.getElementById(Boxes[currentRow + currentCell]));

 }


 // function will trigger event of selecting current focus.
 function selectElement()
 {

 }

 $(document).ready(function(){

    loadDivs()

// will give initial focus to top left element paving way for key navigation
   ChangeCurrentCell();
  // above gives first element in Boxes the focus when loading.

The div element will not focus despite getting it and calling the focus method, i have tried to trigger mousehover on the element with no luck. Please assist me, i put my masters thesis aside despite already being on a tight schedule to do this game which is a requirement for a job position. I have done whole the whole game logic and it all works well, if i send the code in as it is it will definitely be discarded because it doesnt meet the key navigation requirement ... i am desperate i will even pay if i need to -frustrated Student

Upvotes: 0

Views: 766

Answers (3)

Luca Ballore
Luca Ballore

Reputation: 70

Look at this

It's my solution for a test, maybe the same...maybe can help you :) If it is, please use it as a hint and don't copy all my code :D

Regards,

L.

Upvotes: 1

GuiDocs
GuiDocs

Reputation: 732

to make it more convenient () not necessary:

`var LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40, SPACE = 32;`

then bind to keydown, keypress doesn't catch arrow keys and do something like this:

$(document).bind("keydown", function (e){
    var which = e.which;
    var navigationKeyWasPressed = which !== undefined && which >= 39 && which <= 40; 
    //do nothing if no significant key was pressed
    if (!navigationKeyWasPressed ) {
        return;
    }
    if ($(".selectedWithKey").length === 1){
        switch (which) {
            case LEFT:
                //...
                break;
            case UP:
                //...
                break;
            case RIGHT:
                //...
                break;
            case DOWN:
                //...
                break;
            case SPACE:
                //turn card
                break;
            default: //non arrow pressed
            //...
        }
    } else {
        // if no card is selected, select one to start arrow navigation
        $(".sponsor:first").addClass("selectedWithKey")
    }
});

Upvotes: 0

Jasper
Jasper

Reputation: 76003

You can bind to the document.keydown event to capture key strokes. Then you can use event.which (normalized by jQuery) to determine which key was pressed.

$(document).on("keydown", function (event) {
    if (event.which === 37) {
        //code for left arrow
    } else if (event.which === 38) {
        //code for up arrow
    } else if (event.which === 39) {
        //code for right arrow
    } else if (event.which === 40) {
        //code for down arrow
    }
});

UPDATE

I just noticed you didn't tag your question with jQuery. To use native JS you'll have to change how you bind to the document.keydown event and how you determine the key that was pressed (different browser implementations store the info under different indexes of the event object).

Upvotes: 0

Related Questions