0

I am trying to create a prototype to test a TV interface using a table layout and navigation with just the arrow keys (Simulate the D pad). I have found this example http://jsfiddle.net/BdVB9/ that allows navigation using all four keys but I am also trying to incorporate the ability to apply a class to a cell which would force the navigation to skip cells without that class. I have created something that skips using the left and right arrow but cant seem to get the up and down.

View code here: http://jsfiddle.net/matternst/Hk3Pu/

Any help would be greatly appreciated.

var index = 0;
$(document).keydown(function(e) {

    var rows = $('#navigate tr').length;

    if (e.keyCode === 39) { //move left or wrap
        index = (index + 1 >= $('td.can_be_selected').length) ? $('td.can_be_selected').length - 1 : index + 1;
        $('td.can_be_selected').removeClass('selected');
        $('td.can_be_selected:eq(' + index + ')').addClass('selected');
        return false;
    }
    if (e.keyCode === 37) { // move right or wrap
        index = (index == 0) ? 0 : index - 1;
        $('td.can_be_selected').removeClass('selected');
        $('td.can_be_selected:eq(' + index + ')').addClass('selected');
        return false;
    }

    if (e.keyCode === 38) {  // move up

    }
    if (e.keyCode === 40) { // move down

    }
});
3
  • I don't know that I have enough information to answer this, so I'll comment for now. What's the desired behavior when a user is on the top left cell, and presses "down" (attempting to nav to a shaded out cell)? Where do they go? Feb 19, 2014 at 20:24
  • So get the row, get the cell, if it does not work, grab the next row and continue. Simple loop. Feb 19, 2014 at 20:40
  • Thanks for the reply, the ideal behaviour for the Jsfiddle example link is if you are on the top left cell and press the down arrow you skip over the grey cell below and focus on the white cell in the third row down. Same behaviour as if you click the right arrow and it jumps over the two grey cells and focuses on the fourth white one. Basically I want to skip over any cells without a class navigating in any direction Feb 20, 2014 at 3:00

1 Answer 1

0

So I added the up and down key presses with this code:

if (e.keyCode === 38) {  // move up
    index -= columns;
    if (index < 0) {
        index += maxCellIndex;
    }
    while( !$('#navigate tr td:eq(' + (index) + ')').hasClass('can_be_selected') ) {
        if (index < 0) {
            // wrap both ways:
            index += maxCellIndex;
        } else {
            index -= columns;
        }
    }
}
if (e.keyCode === 40) { // move down
    index += columns;
    if (index >= maxCellIndex) {
        index -= maxCellIndex;
    }
    while( !$('#navigate tr td:eq(' + (index) + ')').hasClass('can_be_selected') ) {
        if (index >= maxCellIndex) {
            // wrap both ways:
            index -= maxCellIndex;
        } else {
            index += columns;
        }
    }
}
$('#navigate tr td:eq(' + index + ')').addClass('selected');

Notes:

  1. I also changed up your code for moving left / right.
  2. I see how on left / right the selected box will wrap to the next row [up / down], but I did not add that for up / down. This can be done easily, so let me know if that's what you want.
  3. Here is the updated Fiddle.

Hopefully this is helpful!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.