I have a page with prev and next links:
<link rel="prev" href="http://camera.phor.net/cameralife/photos/11096?referer=index.php">
<link rel="next" href="http://camera.phor.net/cameralife/photos/5679?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.
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;
}
};
$(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;
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With