Navigation with the “j” and “k” keys

Published on and tagged with javascript  jquery  plugin

If you are using Vim you already know the meaning of the “j” and “k” keys: they navigate one line downwards resp. upwards. Some websites like The Big Picture adopted this functionality to provide an easy way to navigate, in the case of The Big Picture to jump from photo to photo.

As I wanted to use the same functionality and didn’t find an existing solution I wrote a simple jQuery plugin for this purpose: jquery-jknavigable. Its usage is pretty simple, to make the posts of a blog navigable with the “j” and “k” keys you would use the following code:

$('.post').jknavigable();

By default the active element is marked with the class “active” so you can style it differently. If necessary, you can specify your own class name:

$('.post').jknavigable({'activeClass': 'someClass'});

That’s it. Feedback is, as always, welcome.

PS: a good starting point for writing your own plugin is jQuery’s Plugin Authoring page.

3 comments baked

Bake a comment




(for code please use <code>...</code> [no escaping necessary])

© daniel hofstetter. Licensed under a Creative Commons License