We recently added a quick and simple way for you to navigate from one post to the next, with the push of a button. On any post on this blog, you can now use the ← and → arrow keys on your keyboard to move to the previous or next post, chronologically.
Combine this with the work we’ve been doing to speed up page loading, and browsing between posts has become just as quick as—probably even quicker than—turning the pages of a book. Go ahead, try it, hit the left-arrow ← to view the last post. You’ll be amazed at just how quickly you can flick through the pages.
How is it done?
On each post, we already provide “next post,” and “previous post,” navigation links—you’ll notice “next” and “previous” buttons in the top-left of the main content area, which are simple <a> tags linked to the previous and next post URLs. Here’s how they’re marked up (you’ll see why this is important in a moment):
<ul class="step-nav clearfix">
<li class="prev button">
<?php previous_post_link('%link', 'Previous'); ?>
</li>
<li class="next button">
<?php next_post_link('%link', 'Next'); ?>
</li>
</ul>
We’re using jQuery and John Resig’s version of the Hotkeys jQuery plugin to bind the keydown event to a function that extracts the required URL from one of these on-page links, and injects it into the browser’s address bar, loading the new page:
$(document).ready(function () {
// This uses the Hotkeys jQuery plugin. See below for
// the native jQuery alternative.
$(document).bind('keydown', 'left', function() {
var url = $('.prev a').attr('href');
if (url) {
window.location = url;
}
});
$(document).bind('keydown', 'right', function() {
var url = $('.next a').attr('href');
if (url) {
window.location = url;
}
});
});
You can achieve the same thing without the Hotkeys plugin, using only native jQuery methods, but the plugin offers one really useful advantage over the native keydown() and keyup() methods: It doesn’t fire when the user is typing into a form field. Without the plugin, if you were leaving a comment on this post, for example, and were to hit the left or right arrow keys whilst typing your comment, you would suddenly find yourself on another page, and your comment would be lost. Obviously, this isn’t the behavior we’re looking for.
If you don’t have a form on the page, though, it’s not an issue, and in case you’re interested, this is how you’d achieve the previous/next behavior with native jQuery methods:
$(document).ready(function () {
$(document).keydown(function(e) {
var url = false;
if (e.which == 37) { // Left arrow key code
url = $('.prev a').attr('href');
}
else if (e.which == 39) { // Right arrow key code
url = $('.next a').attr('href');
}
if (url) {
window.location = url;
}
});
});
A good expansion on this idea might be to bind methods to the “Shift+Left-arrow” and “Shift+Right-arrow” events, so that users can navigate to the next and previous posts within the same category.
Just what I was looking for. Great not to need a whole jquery plugin for something simple. Thanks!