I had thought about a jQuery plugin for jk binding navigation for a while and I finally wrote it. This jQuery plugin actually is my first plugin.
Note
I have removed jknav from this blog, please check out the demo page, instead. (2010-09-20)
Here is what you can try to see how it works on this blog: Press h and l to navigate between posts; j and k to navigate between sections.
I have the following code installed:
<script src="http://lilbtn.yjl.im/js/jquery/jquery.jknav.min.js"></script> <script> $('h3').jknav(); $.jknav.init({up: 'l', down: 'h', reevaluate: true}); $('h3,h4,h5,h6').jknav(null, 'all-headers'); $.jknav.init({name: 'all-headers', reevaluate: true}); </script>
It actually has two navigation settings, jk and hl.
Basically, you use jQuery to select what element should be navigated to by calling jknav(), then init() to set up some variable that plugin needs and the keyup event handler, done. That’s all. You can call jknav() as many times as your like, and the selectors don’t have to be the same, you can mix tag names. This plugin will sort them by their position on page, top to bottom, left to right.
You can read the documentation and check out this demo page, which uses callback.
As expected, it didn't work on IE. But I have fixed it.
ReplyDeleteOuch, I think I found a bug: in IE (every version), if you click anywhere on the page, the JK navigation doesn't work anymore. Still no error message in IE, sorry...
ReplyDeleteWow!!! So fast! And it even works on IE6!!! That's amazing! Thank you very much!
ReplyDeleteArrgh... that's why I hate IE. If it had supported Linux, then I would hate it less because I don't have to use Windows to fix the bug.
ReplyDeleteI created an issue for this bug: http://code.google.com/p/lilbtn/issues/detail?id=2
But I am not planning to fix it anytime soon because I have no a guessing resolution even I have guessed the cause.
Fixed and add support for Opera.
ReplyDeleteWow, that's so nice! Thank you very much!!! Your script is perfect, I'm so glad I can use it on my photo blog :-)
ReplyDeleteIt would be absolutely perfect if the "circular" parameter could work also, ha ha :-p
Anyway, thanks a lot for taking time to improve your script!
Hi! Great plugin, easy to use. Question, how would I assign other, non alpha-numeric keys? EG, I would like to remap the up arrow and down arrow rather than j and k. Many people scroll with the keyboard anyway, I would like them to press "down" to scroll down, and be rewarded with the screen scrolling to the next paragraph.
ReplyDeleteBut what do I type to get the plugin to work with arrow-up / arrow down?
Does the script respond to keycodes similar to jquery.hotkeys? (https://github.com/jeresig/jquery.hotkeys)
Thanks!
This is a nice question and clearly I have never thought about arrow keys or other special key when I was writing this plugin. Unfortunately, jknav is not able to recognize those keys. But since I have modified jknav to allow programmatic control and the hotkeys plugin you mentioned, now it's possible to use those keys.
ReplyDeleteSee the demo page and press up and down. It would be more clear if you read this diff.
Such a quick answer! Thanks so much. It looks like it was pretty simple for you, but to me it would have taken a long time to figure out. Thanks so much for the explanation. The difference page/feature on google code makes it really easy to understand what you have done. :)
ReplyDeleteMany thanks!
I love this script, beautiful. I'm trying to combine it with an infinite page scroll for a blog, but I'm having a little trouble. It gets to the end of the first page but instead of continuing to the next post as page 2 loads, it flicks to the first post of the first page. A little confusing maybe - you can see what I mean on my blog, here: http://andbamnan.tumblr.com/
ReplyDeleteDo you know of any way to combine the two scripts, at all? No worries if you can't help. Thank you.
It will require modifications to include new items from dynamic loading. Currently, by the design, jknav stores items when initialization. I wasn't considering items will get updated or some may get added/removed.
ReplyDeleteI could modify but not right now, because I just knew jknav doesn't work for FF4 somehow, this one has to be fixed first. And in Opera, it doesn't work well for this blog or your tumblr, but the demo page works fine. Strange.
Thank you for the speedy reply!
ReplyDeleteI shall be sure to follow the blog so as to be first in line if ever you do post a modified version of the script, with dynamic loading if possible, thank you.
I just wrote a new post about using jknav on dynamically loaded contents. If anything is unclear, free feel to ask.
ReplyDeleteHello, your plugin is absolutely wonderful and I'm trying to add it to my photo blog but I have two questions: 1: it does not work on IE, right? 2: I would like to avoid the “loop”, I mean, when you're on the last element, the next will be the first, and when you're on the first element, the next one will be the last (I hope it's clear enough). So, could you please give me a clue about what I should change in your script to avoid this behavior? Thank you very much! Anyway, I love your script!
ReplyDelete1. I have no idea if it can work with IE, never tested it on IE. But I guess it doesn't work since you asked. I might find time to test.
ReplyDelete2. I understand your description, I will add a new option for that.
I just added a new option `circular`, you can add `circular: false` for your need. Check out the demo page, I added a new navigation, using `u` and `d` to see how it works.
ReplyDeleteThank you very very much for adding this!!! Actually, on your demo page, right after the loading of the page, if I push “u” it goes to Header 2:4... In fact, is “circular” is false, it shouldn't behave like this, right?
ReplyDeleteAnyway, you may have better things to do than modify again your script for me, so if you say that you don't have time for this, I'll understand perfectly, there's no problem!
typo: « In fact, IF “circular” is false... »
ReplyDeleteI think you can count it as a caveat. If you press `d`, then `u`, it will work as you expect; or you scroll pass Header 2:1, then press `u`. It's a caveat because, as in common use, `d` would be first key to press by users. But, it's not right to assume that, so it's a caveat. It can be fixed.
ReplyDeleteWhen I said something, I meant something, if I don't have time for that, I will honestly say, I am not going to do it. I won't bullshit that "I will find time" and think who cares about that thing. If I don't care, I will say so.
And as I said "test," it would be just test on IE. If it's easy fix, then I will fix it.
I guess you don't know I am not a Windows user, therefore I need to find time to open *Windows* so I can test jknav. It's been about two weeks since last time I used Windows.
If you already have error messages from IE, maybe you should just pass them to me. Who knows, they might be easy fix... or just wait for me to turn on my Windows box.
Tip: There is an Edit button next to reply button. (I don't know if unregistered Disqus user have that or not, but I have that button)
ReplyDeleteThank you for your answer! Since I'm not registered on any service, I don't have the “edit” button...
ReplyDeleteActually, I'm a Mac user, and I don't have any computer running Windows with me. I just ask a friend when I see him online :-) I'll ask him more details when I can!