Paging Keys

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.

• Heres the demo
• And the code at github

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