Navigate with arrow keys

Question

Does somebody know an solution with jquery to navigate through an list with the arrow keys(up,down)?

If i have an list for example, with links:

<a href="#">First Link</a>
<p>
<a href="#">Second Link</a>
<p>
<a href="#">Third Link</a>
<p>
<a href="#">Fourth Link</a>
<p>

It would be nice if the user sees where he actually navigates with an hover effect:

a:hover{color:blue}

Thanks! To experiment: http://jsfiddle.net/ZBn7r/1/

There is an answer to that problem already here [1] [1]: http://stackoverflow.com/questions/8902787/navigate-through-list-using-arrow-keys-javascript-jq — , Aug 14 '13 at 15:39

FLX · Accepted Answer · 2013-08-14T15:56:08.623

3

Replace hover by focus.

Then, you can move the focus to the next and previous links with jQuery like that :

$(document).keydown(
    function(e)
    {    
        if($('a:focus').length==0){$('a').first().focus();}

        if (e.keyCode == 39) {      
            $("a:focus").next().focus();

        }
        if (e.keyCode == 37) {      
            $("a:focus").prev().focus();

        }
    }
);

Updated fiddle : http://jsfiddle.net/ZBn7r/2/

edited Aug 14 '13 at 15:56

answered Aug 14 '13 at 15:42

FLX

2,626
4
26
57

Try to replace `e.keyCode` for `e.which`. – putvande Aug 14 '13 at 15:46
Probably because you have no focused link. You can add if($('a:focus').length==0){$('a').first().focus();} Updated fiddle : http://jsfiddle.net/ZBn7r/5/ – FLX Aug 14 '13 at 15:50
Sorry but i have the feeling, that your code only works when the a are inline! When they are splitted by
the does not work!
– John Smith Aug 14 '13 at 15:58
1

This is because your HTML is not valid. You must close your
before open another :) Just add display:block; in css like that http://jsfiddle.net/ZBn7r/6/
– FLX Aug 14 '13 at 15:59

Amith · Answer 2 · 2013-08-14T15:51:57.950

fully working code snippet tested in jsfiddle link

HTML

<ul>
    <li><a href="#">First Link</a></li>
    <li> <a href="#">Second Link</a></li>
    <li> <a href="#">Third Link</a></li>
</ul>

CSS

li.selected {background:yellow}
a:hover{color:blue}
a {
  color:inherit;
  text-decoration: none;
 }
ul
{
    list-style-type: none;
}

JS

var li = $('li');
var liSelected;
$(window).keydown(function(e){
    if(e.which === 40){
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.next();
            if(next.length > 0){
                liSelected = next.addClass('selected');
            }else{
                liSelected = li.eq(0).addClass('selected');
            }
        }else{
            liSelected = li.eq(0).addClass('selected');
        }
    }else if(e.which === 38){
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.prev();
            if(next.length > 0){
                liSelected = next.addClass('selected');
            }else{
                liSelected = li.last().addClass('selected');
            }
        }else{
            liSelected = li.last().addClass('selected');
        }
    }
});

does it answers your question. if so you can mark as answered ..that would be best practice using stackoverflow — Amith, Aug 14 '13 at 15:53
@Amith sorry but i still dont know if the code from FC' is better — John Smith, Aug 14 '13 at 15:59

Navigate with arrow keys

2 Answers2