Paging Keys

About

Keyboard short cuts for paging through listings one item at at time (and across entire pages). Inspired by the navigation at FFFFOUND!

The example operates on micro-formatted html ( hAtom ). The script uses either the prototype or jquery js libraries and hotkey.js for key event hooks. Take a look at this video explanation from Ryan Singer of 37 Signals

Demo

Holy explanations Batman!, there is a working (prototype) demo here or you can try the demo with jQuery

Latest Changes

• Fixed floating navigation positioning in jquery version (wrong selector doh!)
• Added jquery support thanks to Peter O’Toole (peteot)
• Fixed floating navigation links, (next/prev were linked the wrong way round)
• Abstracted out library specific javascript functions (e.g. selector etc.)
• Added some jquery unit testing, and jquery examples

Caveats

Ongoing issues with this script include;

• needs more testing on different browsers
• needs more testing coverage in general
• there are some places where CSS id selectors would suit better over class selectors
• so far manually tested on the following mac browsers;
  • Safari 3/4, FireFox 3/3.5, Opera 9+, Camino 1.6.9

Setup / Using

Requirements

What do you need?

• prototype (>= 1.6.0.3) OR jquery (>= 1.3.2)
• a working keyboard and browser
• for the example – a sense of 1970’s Batman humor

Using

To use on your own website, simply;

• markup your entry titles with the following CSS hierarchy; .hentry h2 a.entry-title (the example uses the hAtom style)
• include the prototype OR jquery library (e.g. from ajax.googleapis.com)
• include the appropriate paging_keys.js javascript somewhere on your page
• add pagination html to each page as shown in the example (in Rails, if you’re using will_paginate, you’ll get this for free)
• optionally add the paging-nav element somewhere on each page, and include the CSS for it
• thats it!

Make your browser height small enough to engage vertical scrolling, then use j/k to move up/down through listing (and across the pagination). You can also use h/l to move between entire pages. So;

• j next item (down)
• k prev item (up)
• h next page
• l next page

Configuration

The config variable in pagingKeys can be used to customize the class to suit your own HTML/CSS selectors. See the comments alongside each attribute for more info.

Minimized

The YUI compressor has been used successfully to minimise paging_keys.js (a minimised version is NOT included in the release). All unit tests included run on a non-compressed script.

Example Configuration Explanation

Four micro-formatted ( hAtom ) example pages with pagination links (in the will_paginate style) The example uses the #bottom anchor link on the last post of each page, so paging backwards will start at the bottom and work its way up through the page. Each example page has an optional paging navigation key at the top right corner (when javascript is available). In the example the prototype OR jquery library is loaded from ajax.googleapis.com (this is a good idea).

Have a look at the example html documents and the tests for more information.

Why use the ‘HJKL’ keys?

Everyone has their own preferences/ideas on which keys work best. I chose what seems to be the accepted default right now and the comments below enforce this point somewhat.

“…because j and k are on the home row. Most keyboards have a little nubbin on the j so you can find it by touch. There is also some precedent for the pair. j/k move the cursor down/up in vi for example…”

“…Google reader / Google Mail use the same keys…”

“…Earlier computers had no need for arrow keys, so all the basic vi commands use keys you’d find on a very limited keyboard…”

“…But they’re also very nice since it’s where the right hand sits when you’re a touch typist. j and k take almost no effort to type…”

“…page up/down and cursor keys are not always available on every keyboard, or can be hard to find on laptops or shortened keyboards…”

Credits

Who’s who?

• Authored by Matthew Hutchinson
• Some jQuery work by Peter O’Toole
• Inspired by FFFFOUND! keyboard naviagtion
• Explained by Ryan Singer, 37 Signals
• Includes hotkey.js
• Wise words followed from 7 Rules of Unobtrusive Javascript

Get out clause

Right now this script is provided without warranty, or support from the author.

Creative Commons License

Paging Keys by Matthew Hutchinson is licensed under a Creative Commons Attribution 2.0 UK: England & Wales License.