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
Holy explanations Batman!, there is a working demo here
- Added jquery support thanks to Peter O’Toole (peteot)
- Fixed floating navigation links, (next/prev were linked the wrong way round)
- Added some jquery unit testing, and jquery examples
Ongoing issues with this script include;
- floating navigation doesn’t ‘float’ in jquery; it should work when setting the css absolute positions
- 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
What do you need?
- prototype (>= 126.96.36.199) OR jquery (>= 1.3.2)
- a working keyboard and browser
- for the example – a sense of 1970’s Batman humor
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)
- 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;
- h previous page
- j previous item
- k next item
- l next page
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.
The YUI compressor was used to create paging_keys_min.js. pagingKeys can still be configured here, just scan through the code and find the config var.
Example Configuration Explanation
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 and k move the cursor up and down 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…”
- 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
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.