Navigate to rel=next and rel=prev page using left and right arrow

Question

I have a page with prev and next links:

<link rel="prev" href="http://camera.phor.net/cameralife/photos/11096&#63;referer=index.php"> 
<link rel="next" href="http://camera.phor.net/cameralife/photos/5679&#63;referer=index.php">

Is it possible to use Javascript to navigate these links if the user presses Left arrow or Right arrow? The link should not activate if they are editing text and the Left or Right arrow is pressed.

This will be used to simplify viewing several image pages.

A word of accessibility caution: this can hijack arrow keys as screen readers use them to navigate through page elements: https://webaim.org/techniques/keyboard/ — Dave Everitt, May 10 '23 at 20:25

score 4 · Answer 1 · answered Sep 04 '11 at 20:18

4

$(document).keydown(function(e){
        if (e.keyCode == 37) {  // left
           $( "a[rel='prev']" ).click();
           return false;
        } else if (e.keyCode == 39) {  // right
           $( "a[rel='next']" ).click();
           return false;
        }
    });

answered Sep 04 '11 at 20:18

Alon Eitan

11,997
8
49
58

so replace the click line to something like this: location.href = $( "a[rel='prev']" ).prop( "href" ); – Alon Eitan Sep 04 '11 at 20:27
But why `a`? I assume it's `link` from the question. – pimvdb Sep 04 '11 at 20:28
sorry! :) replace to: $( "link[rel='prev']" ).prop( "href" ); – Alon Eitan Sep 04 '11 at 20:31

score 4 · Accepted Answer · edited Jul 07 '13 at 11:39

Without jQuery: http://jsfiddle.net/UXPLt/1/.

document.onkeyup = function(e) { // key pressed
    if(document.activeElement.nodeName === "INPUT"
    || document.activeElement.nodeName === "TEXTAREA") {
        return; // abort if focusing input box
    }

    var elems = document.getElementsByTagName("link"),
        links = {};

    for(var i = 0; i < elems.length; i++) { // filter link elements
        var elem = elems[i];
        if(elem.rel === "prev") { // add prev to links object
            links.prev = elem;
        } else if(elem.rel === "next") { // ad next to links object
            links.next = elem;
        }
    }

    if(e.keyCode === 37) { // left key
        location.href = links.prev.href;
    } else if(e.keyCode === 39) { // right key
        location.href = links.next.href;
    }
};

Navigate to rel=next and rel=prev page using left and right arrow

2 Answers2