Keyboard short cuts for smart through listings one item at at time (and across entire pages).
Inspired by the smart at FFFFOUND!
and https://github.com/matthutchinson/paging_keys_js
The script uses either the zepto or jquery js libraries and hotkey.js for key event hooks.
Holy explanations Batman!, there is a working demo there “examples/example.html”
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
What do you need?
- zepto OR jquery
- 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; .smart-section .smart-higthlight
- include at the bottom of page:
- include the appropriate smart_keys.js javascript after
- 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 smart-keys-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
The config variable in smartKeys 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 has been used successfully to minimise smart_keys.js (a minimised version is NOT included in the release). All unit tests included run on a non-compressed script.
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 smart backwards will start at the bottom and work its way up through the page. Each example page has an optional smart smart 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.
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…”
Who’s who?
- Authored by Cedric Darricau
- Some jQuery work by Peter O’Toole
- Inspired by FFFFOUND! keyboard naviagtion and Matthew Hutchinson
- 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.
Smart Keys by Cedric Darricau is licensed under a Creative Commons Attribution 2.0 UK: England & Wales License.