Some time ago I wrote a javascript class to implement keyboard short-cuts for paging through listings one item at a time (and across paginated pages). It was inspired by the navigation at FFFFOUND! and explained nicely by Ryan Singer of 37Signals.
Some time ago Ryan posted a link to my script on the 37Signals blog, now with over 130 watchers on github a creeping sense of responsibility has settled in. So the latest revision now has both jQuery and Prototype support and a handier configuration object, so you can further customise how your page and CSS work with the script.
var config = {
nodeSelector: '.hentry h2 a.entry-title', // used to select each item on the page and place in the map (must be a link)
prevPageSelector: '.prev_page', // link on this element should always jump to prev page a.prev_page (must be a link)
nextPageSelector: '.next_page', // link on this element should always jump to next page a.next_page (must be a link)
pagingNavId: 'paging-nav', // dom id of the floating page navigation element
keyNext: 'j', // hot keys used
keyPrev: 'k',
keyNextPage: 'h',
keyPrevPage: 'l',
keyRefresh: 'r',
additionalBodyClass: 'paging-keys', // this class is assigned to the page body on load
bottomAnchor: 'bottom' // the name of the anchor (without #) at end of page, e.g. set on last post on the page
};
I’m using the script on this site (see the overlay on the top right) and you can try it out by pressing j/k to navigate through the articles. Some things worth mentioning about the code;
- It tries to closely follow the ’7 rules of unobtrusive javascript":http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/
- By default (and in the demo) it hooks to items in the HTML that formated with in the hATOM microformat
- It also latches onto pagination links generated from the popular will_paginate gem
- It makes use of Hotkey.js
- Eventually this script will live inside many of the default templates in Bugle
