Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 387
William Entriken Avatar asked Sep 04 '11 19:09

William Entriken


2 Answers

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;
    }
};
like image 197
pimvdb Avatar answered Oct 20 '22 01:10

pimvdb


$(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;
        }
    });
like image 45
Alon Eitan Avatar answered Oct 19 '22 23:10

Alon Eitan