Take the 2-minute tour ×

See screenshot. Left/Right selection is done using firstElementSibling/previousElementSibling. How do I find the bottom or top row items when bottom/top key is pressed?

Use-case 1: When current selection is "2" and down arrow key (40 keyCode) is pressed I need to seelct 7. If 7th item was of the same size then 8 item has to be selected.

If current selection is 4 and down key is pressed - then 9th item has to be selected.

Use-case 2: Similarly, if current selection is 10 and if up arrow key is pressed then 5th item needs to be selected.

Current implementation for the output below: Working demo: http://neudesicindia.github.io/SDTV-App/

<ul class="tiles clearfix">
    <li id="item-selected">2</li> 


(function (window, document, undefined) {
    var apps = function(){},
        currElm = document.getElementById("item-selected"),

    apps.route = {
        desc: "route for app nav."

    apps.route.NavigateLeft = function (elm) {
        elm.setAttribute("id", "");
        elm.previousElementSibling ? futureElm = elm.previousElementSibling : futureElm = elm.parentElement.lastElementChild;
        futureElm.setAttribute("id", "item-selected");

    apps.route.NavigateRight = function (elm) {
        elm.setAttribute("id", "");
        elm.nextElementSibling ? futureElm = elm.nextElementSibling : futureElm = elm.parentElement.firstElementChild;

    apps.route.NavigateTop = function (elm) {

    apps.route.NavigateBottom = function (elm) {

    document.addEventListener("keyup", function (e) {

        keyChar = e.keyCode;
        currElm = document.getElementById("item-selected");


        switch (keyChar) {
            case 38:

            case 40:

            case 37:

            case 39:

            case 13:


    }, false);

})(window, document);


enter image description here

share|improve this question
down voted? for what? I upvote this ;) –  Anil Maharjan Mar 4 at 10:15

1 Answer 1

up vote 1 down vote accepted

I think there are a few things wrong with your current approach from the example, not least of which is that there is no eleven spot. That being said let me try to answer as best I can.

For a high level vague answer let me say, that you should probably have the layout abstracted into a model of some sort then act on that, and update the UI accordingly.

For a poor example maybe your layout model would look something like this

var layout = [
              1, 2, 3, 4, 5, 6,
              7, 7, 8, 9,10,12,
              7, 7,13,14,15,16

Then you could move around the layout by by increasing/decreasing by 1 for left/right and by as many columns as there are for up and down.

Of course that model would assume that the layout was always like that... but of course with the css you have in the example I think it would be much harder to have a more flexible layout anyway.

I'll maybe give you a poor example here to show what I mean:

SDTV Example for StackOverflow

That way you are not so tied into finding out the info from the DOM, but rather just updating the DOM from your model. Hope that helps.

share|improve this answer

Your Answer


