Bind Keyboard to left/right navigation

Question

I am a photographer and have a website where I am unable to edit the 'template' structure but can upload javascript/css etc.

I want to bind next/prev navigation to keyboard right/left.

The structure of the links are:

<div class="image_navigation">
      <h4>Image Navigation</h4>
      <ul>
        <li class="index"><a href="LINKURL">Index</a></li>
        <li class="previous"><a href="LINKURL">Previous</a></li>
        <li class="next"><a href="LINKURL">Next</a></li>
      </ul>
    </div>

I referred to this and managed to create this.

$(function() {$(document).keyup(function(e) {
switch(e.keyCode) { case 37 : window.location = $('li.prev').attr('href'); break;
    case 39 : window.location = $('li.next').attr('href'); break; }});});

This is where I am stuck. It does not work because it assumes the I am refereing to a href tag but am refering to the li that contains it.

Any ideas would be much appreciated!

Answer 1

window.location = $('li.next a').attr('href');

Answer 2

I found this question when looking for dupes on this question and decided to share the little bit of jQuery I wrote to answer that one modified for your selectors:

// when the document is ready, run this function
jQuery(function( $ ) {
    var keymap = {};

    // LEFT
    keymap[ 37 ] = "li.prev a";
    // RIGHT
    keymap[ 39 ] = "li.next a";

    $( document ).on( "keyup", function(event) {
        var href,
            selector = keymap[ event.which ];
        // if the key pressed was in our map, check for the href
        if ( selector ) {
            href = $( selector ).attr( "href" );
            if ( href ) {
                // navigate where the link points
                window.location = href;
            }
        }
    });
});

Answer 3

$(function() {$(document).keyup(function(e) {
switch(e.keyCode) { case 37 : window.location = $('li.prev a').attr('href'); break;
case 39 : window.location = $('li.next a').attr('href'); break; }});});

$('li.next') targets all list items with the class of 'next', and that's it - it's unaware of the content of the list item.

If you want the href of the a tag, you need to go a bit deeper ($('li.next a') or $(li.next').find('a')) - your original code was looking for the href attribute of the list item itself (which of course doesn't exist, as list items don't have href attributes).

Answer 4

You need to target the < a > within the < li >. I see that you are using jquery[and assume that you have included the necessary jquery file in the header].

http://api.jquery.com/child-selector/ is a good place to learn about jquery selectors.

Assuming that everything else in your code is correct you can achieve what I think you are looking for with

$(function() {
    $(document).keyup(function(e) {
        switch(e.keyCode) {
            case 37 : window.location = $('li.previous a').attr('href');
                break;
            case 39 : window.location = $('li.next a').attr('href');
                break; 
        }
    });
});