Is there any way of navigating through a grid of div elements by pressing the arrow keys on the keyboard, and "clicking" the selected div by pressing enter key? I know that I should at least try to make this work somehow but I'm pletely clueless as for how to make this happen, and if it's even possible.

I'm aware of that the following will be invalid if not using the mouse, so what can I do to show some kind of "focus" on a specific div?

.show:hover{
    width:94px;
    height:94px;
    border:3px solid black;
}

.lock{
    pointer-events:none;
}

Any hints of where to start? My game's here: /

EDIT:

Is it possible to navigate the div field as it is, going "up" from the current position or will i have to make a case for every div as an originating point acpanied by every div it should go to in up/down/left/right events?

Is there any way of navigating through a grid of div elements by pressing the arrow keys on the keyboard, and "clicking" the selected div by pressing enter key? I know that I should at least try to make this work somehow but I'm pletely clueless as for how to make this happen, and if it's even possible.

I'm aware of that the following will be invalid if not using the mouse, so what can I do to show some kind of "focus" on a specific div?

.show:hover{
    width:94px;
    height:94px;
    border:3px solid black;
}

.lock{
    pointer-events:none;
}

Any hints of where to start? My game's here: http://jsfiddle/94jerdaw/WXEes/

EDIT:

Is it possible to navigate the div field as it is, going "up" from the current position or will i have to make a case for every div as an originating point acpanied by every div it should go to in up/down/left/right events?

• javascript
• jquery
• html
• keyboard-events

• I guess this stackoverflow./questions/1402698/… is what you searching for – optimisticupdate Commented Mar 24, 2013 at 20:32
• @smb that is not what he wants. He not only needs to be able to find when a certain key is pressed, but select divs based on it. – markasoftware Commented Mar 24, 2013 at 20:33
• He needs a hint not a working solution, working with keypress handler and e.g. class toggles like "selected", "actived" ... should work – optimisticupdate Commented Mar 24, 2013 at 20:35

2 Answers 2

hope your question is still interesting to you. I had some time and I always want to have my own memory game. So I started building your desired functions, for full code see the Fiddle. Because of the fiddle frame you have to click once on the game.

Edit:Sorry there is some trash code in my script, because I forked one of my own basic setups for plugins, will remove it later.

It is not finished yet, but today I will finish it. I builded it as a plugin, because later on I want to add some options. But the idea of key movement should be clear.

I created a Map-Object (You can also use an array, easier I think) for finding positions.

Too much code to post it all here, so here a snippet:

$(window).keydown(function (e) {
    //Initial set first card as selected
    var actCard, nextCard;

    if ($('.cardset').find('.selected').length < 1) {
        $('#card1').addClass('selected');
    } else {
        switch (e.which) {
        case 37: // left
            $('.cardset').find('.selected').cardMoveHorizont('prev', cardMap);
            break;

        case 38: // up
            $('.cardset').find('.selected').cardMoveHorizont('up', cardMap);
            break;

        case 39: // right
            $('.cardset').find('.selected').cardMoveHorizont('next', cardMap);
            break;

        case 40: // down
            $('.cardset').find('.selected').cardMoveHorizont('down', cardMap);
            break;

        default:
            return; // exit this handler for other keys
        }
        e.preventDefault();
    }
});

You need to bind event listeners for arrow keys and enter, it can be done easily from JS/jQ

1min google: Binding arrow keys in JS/jQuery