Keyboard navigation plugin for WordPress

I prefer to use the keyboard for navigating content whenever possible, rather than the more awkward movement of a mouse… and my carpal tunnels thank me for that preference. I’ve seen keyboard navigation of posts implemented on FFFFOUND! and thought it was really nice. So I decided to make a WordPress plugin to allow others that functionality easily.

Scrolling through posts by keyboard may not be useful to everyone, but it makes a lot of sense for anyone with a photoblog. Users can quickly flip through your content without enlessly flicking a scroll wheel or clicking and dragging until they grab their wrists in pain.

Features:

Press the “J” key to see the next post, and the “K” key takes you to the previous post.

Planned features:

Add “next” and “previous” keys for page-by-page navigation.
Add an options page which allows the navigation keys to be customized.
Automatically load the “next” or “previous” page when you hit the end.
Detect the scrollable element in a site’s design. (Current version only scrolls the body.)

Download
The current version can be downloaded at WordPress.org.

Changelog

0.6
- Updated the algorithm to work with fractional scrollTop property in Firefox
0.5
- Added scroll event listener to make the navigation sensitive to your current scroll position
0.4
- Continues to next/previous page when you navigate past the last (or first) post
0.3
- Javascript has moved to a separate file and is now added through via wp_enqueue_script
- jQuery has been implemented for all DOM functions
- ScrollTop is now at the top of the screen, as expected
- Tested on Internet Explorer 7, Firefox 3.5, Safari 4, and Chrome 3
0.2
- Key navigation is no longer added on single posts
- Keypress events are ignored inside of TEXTAREA and INPUT elements
0.1
- Initial version

Links in this post

Tags: plugins, WordPress

This entry was posted on October 21, 2009, 2:44 pm and is filed under Software. You can follow any responses to this entry through RSS 2.0. You can leave a response, or trackback from your own site.

http://rift.chromebits.net/ Kyle Maxwell

Hmm. I installed it on one of my blogs (linked) but it doesn’t seem to do anything.
http://rift.chromebits.net Kyle Maxwell

Hmm. I installed it on one of my blogs (linked) but it doesn’t seem to do anything.
http://rommel.woldhek.eu/ Anton

Thanks. Put it on, not sure if and how i am going to communicate this option to readers but i like it for myself
http://rommel.woldhek.eu Anton

Thanks. Put it on, not sure if and how i am going to communicate this option to readers but i like it for myself
http://www.bbqiguana.com/ Randy Hunt

@Kyle I clicked over to your blog and pressing “J” and “K” worked fine for me.
http://www.bbqiguana.com/ Randy Hunt

@Kyle I clicked over to your blog and pressing “J” and “K” worked fine for me.
http://rift.chromebits.net/ Kyle Maxwell

Is it browser-specific? I live in FF and sometimes Chrome.
http://rift.chromebits.net Kyle Maxwell

Is it browser-specific? I live in FF and sometimes Chrome.
http://www.bbqiguana.com/ Randy Hunt

The early version really hasn’t been tested much. I just wanted to get it out there and start getting feedback, so it’s possible that there are some issues with browsers and/or operating systems.

Versions 0.1 and 0.2 have only really been tested so far in Chrome running on Windows Vista. I’ll start doing some testing in other browsers and systems this weekend.
http://www.bbqiguana.com/ Randy Hunt

The early version really hasn’t been tested much. I just wanted to get it out there and start getting feedback, so it’s possible that there are some issues with browsers and/or operating systems.

Versions 0.1 and 0.2 have only really been tested so far in Chrome running on Windows Vista. I’ll start doing some testing in other browsers and systems this weekend.
http://www.bbqiguana.com/ Randy Hunt

@Kyle

I’ve updated the plugin, and I’ve tested it in IE 7, Firefox 3.5, Safari 4, and Chrome 4. Everything is working.
http://www.bbqiguana.com/ Randy Hunt

@Kyle

I’ve updated the plugin, and I’ve tested it in IE 7, Firefox 3.5, Safari 4, and Chrome 4. Everything is working.
http://ok.andychung.ca/ Andy Chung

Nice plugin, everything worked right out of the box.

Is there a way to have it not lead to a 404 page not found when you hit J on the very first post?
http://ok.andychung.ca/ Andy Chung

Nice plugin, everything worked right out of the box.

Is there a way to have it not lead to a 404 page not found when you hit J on the very first post?
http://www.geekandhype.com/ Joffrey

Exactly what I needed! Works perfectly on my blog with Safari and Firefox (on Mac OS).

It would be perfect if you could allow us to disable the automatic load of jQuery (it’s already loaded by myself for personal scripts) and if the //page/2 would be replaced by /page/2, with only one slash.

Thanks for you great work!
http://www.geekandhype.com Joffrey

Exactly what I needed! Works perfectly on my blog with Safari and Firefox (on Mac OS).

It would be perfect if you could allow us to disable the automatic load of jQuery (it’s already loaded by myself for personal scripts) and if the //page/2 would be replaced by /page/2, with only one slash.

Thanks for you great work!
http://www.egonomik.com/ Caner

Great script, perfect
http://www.egonomik.com Caner

Great script, perfect
swider8814

It works fine on IE, Firefox, Chrome and Safari, but on Opera it redirect to http://www.page.pl/2/ except http://mypageadress/page/2/
http://8814.pl/ swider8814

It works fine on IE, Firefox, Chrome and Safari, but on Opera it redirect to http://www.page.pl/2/ except http://mypageadress/page/2/
goma

How do I change the navigation buttons from J/K to left/right arrow.
I changed the case numbers to 37/39 but nothings works.
Great plugin!
goma

How do I change the navigation buttons from J/K to left/right arrow.
I changed the case numbers to 37/39 but nothings works.
Great plugin!
Sean

Thanks for the great plugin! I think it could be even better if the 'next' key were able to pick up from wherever the user has scrolled. That is, if the user scrolls down to the 8th post on a page and hits 'j', the plugin takes them to the 2nd post on the page, whereas ffffound will take you to the 9th post.

But you've implemented the other feature which makes ffffound's keyboard navigation so seemless, which is to skip to the next page when the user hits the bottom of the current one.
Sean

Thanks for the great plugin! I think it could be even better if the 'next' key were able to pick up from wherever the user has scrolled. That is, if the user scrolls down to the 8th post on a page and hits 'j', the plugin takes them to the 2nd post on the page, whereas ffffound will take you to the 9th post.

But you've implemented the other feature which makes ffffound's keyboard navigation so seemless, which is to skip to the next page when the user hits the bottom of the current one.
http://www.randem.net/ Randy

Thanks for the suggestion. I've updated the plugin to make it sensitive to scrolled location. Thanks!
http://www.fluenteveryyear.com/ Randy

Thanks for the suggestion. I've updated the plugin to make it sensitive to scrolled location. Thanks!
Andrew Conlan

Hi really like the plugin, just one thing when you run out of posts, or on new blog there doesn't seem to be a catch to stop users from going past the first post and onto a not found page
Andrew Conlan

Hi really like the plugin, just one thing when you run out of posts, or on new blog there doesn't seem to be a catch to stop users from going past the first post and onto a not found page
http://twitter.com/Zirta Beatriz Torres

Wow! This is just what I was looking for, it will be very useful for my webcomic http://oseano.net
Must be tiring for my readers to browse through the 700+ posts with all that clicking… Hopefully this will save them from carpal tunnel syndrome, haha!

Only one question/request: Can it be configured to use the prev/next arrows in the keyboard instead of the j/k letters? I think it would be more intuitive the first option…

Thank you for sharing this plugin!
http://twitter.com/Zirta Beatriz Torres

Wow! This is just what I was looking for, it will be very useful for my webcomic http://oseano.net
Must be tiring for my readers to browse through the 700+ posts with all that clicking… Hopefully this will save them from carpal tunnel syndrome, haha!

Only one question/request: Can it be configured to use the prev/next arrows in the keyboard instead of the j/k letters? I think it would be more intuitive the first option…

Thank you for sharing this plugin!
bbqiguana

There is already a defined browser interaction for up/down arrow keys, so trying to catch those has inconsistent results. J/K are relatively standard, but I do plan to add some sort of custom configuration at some point.
bbqiguana

There is already a defined browser interaction for up/down arrow keys, so trying to catch those has inconsistent results. J/K are relatively standard, but I do plan to add some sort of custom configuration at some point.
bbqiguana

There is already a defined browser interaction for up/down arrow keys, so trying to catch those has inconsistent results. J/K are relatively standard, but I do plan to add some sort of custom configuration at some point.
Ocean

I can't seem to get it to work on firefox 3.6 for some reason. It's working fine on ie and safari though. Any ideas?
Ocean

I can't seem to get it to work on firefox 3.6 for some reason. It's working fine on ie and safari though. Any ideas?
Ocean

v0.5 doesn't work for firefox. v0.4 does though. Any ideas on how to fix it?
Ocean

v0.5 doesn't work for firefox. v0.4 does though. Any ideas on how to fix it?
http://bedepressed.org matthew

hey, thanks for the plugin, it is great.

i am trying to add smooth scrolling using the jquery scrollto plugin. i got as far as including the plugin in the php

any help would be insanely appreciated.

i've got an example of what i'd like to at bedepressed.org/index

thanks
http://www.ovander.se Jon

I really want to get this to work, but firefox isn't behaving right. Not even on your blog the script behaves as wanted.

On J it jumps to the next post, then it stops working. To get it to be able to jump to the third i have to scroll down a couple of pixels and it works, on more time, then stops, scroll down, etc.

Maybe it can work if it jumps to next “post” and adds a couple of pixels?
bbqiguana

It turns out, Firefox allows fractional (non-integer) values in the scrollTop property, and that was causing a strange behavior in the algorithm I used to jump to previous/next post.

I've updated it to strip the fractional portion of the value, and now it seems to be working.
bbqiguana

It's fixed now.
bbqiguana

Firefox fractional scrollTop values were causing strange behavior. It's fixed now.
bbqiguana

Thanks!
bbqiguana

There is a standard mechanism by which WordPress loads scripts, to prevent double-loading and such. I am following the standard. If you're getting double-loading, perhaps you should consider doing so as well.

Check Google. for WordPress's wp_enqueue_script() function.
bbqiguana

I would love to add something like that, but it's not simple.
http://www.ovander.se Jon

Thanks alot, works like a charm. I was about to tear up my Divs.

Keyboard navigation plugin for WordPress

Archives

Meta