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 the prototype js library 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
Ongoing issues with this script include;
- more testing on different browsers
- more testing coverage in general
- only works with prototype library right now (happy to accept patches for others)
- 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
What do you need?
- prototype javascript library (>= 1.6.0.3)
- hotkey.js (included in paging_keys.js)
- 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 library javascript (e.g. from ajax.googleapis.com)
- include the 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 pagination). You can also use h/l to move between 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 and CSS selectors. See the comments alongside each attribute for more information.
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.
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 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.
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’s also some precedent for the pair. j and k move the cursor up and down in vim for example…”
“…Google reader uses the same keys…”
“…The j, k, l, and ; were the movement cursor keys in vi. So you should probably ask Bill Joy. He started this trend 1976…”
“…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…”
Who’s who?
- Authored by Matthew Hutchinson
- Inspired by FFFFOUND! keyboard naviagtion
- Explained by Ryan Singer, 37 Signals
- Includes hotkey.js
- Wise words followed from 7 Rules of Unobtrusive Javascript
Right now this script is provided without warranty, or support from the author.
Paging Keys by Matthew Hutchinson is licensed under a Creative Commons Attribution 2.0 UK: England & Wales License.