Today, keyboard navigation went live on the new jQuery documentation site: api.jquery.com. Rick worked really hard on getting the interaction just right, and we think this makes using the documentation a faster and easier experience . We hope that this feature improves developers’ interaction with the documentation.
We recently had the opportunity to work with part of the jQuery team on releasing the new jQuery API site alongside the heavily anticipated release of jQuery 1.4. There was a lot of grunt work involved with formatting all of the new docs, which are essentially updated and modified examples from the old docs combined with descriptions and explanations from Karl Swedberg and Jonathan Chaffer’s forthcoming book: jQuery Reference Guide.
It was a lot of fun to work with the group as we trudged through the xml formatting and got it all done in a weekend. I even got to write example code for some of the new methods in 1.4.
Next up came working on the theme. The jQuery team decided to build the new docs site using WordPress (which is a dream to use). I executed a hard port of Scott Jehl‘s design, markup and style from the main dot com site, and redesigned the doc pages to accommodate the increased volume of information.
The most exciting feature in the new docs site (after the new docs of course), is the new live search/keyboard navigation. Special thanks to Paul Irish for suggesting live search/keyboard nav for the docs site in the first place. If it wasn’t for him, we wouldn’t have had so much fun implementing it.
I used a combinations of John Resig’s jquery re-port of John Nunemaker’s javascript port of Quicksilver for the quick search. I changed John’s live search a little to play well with Mike Hostetler’s jQuery.keynav(), and wrote/rewrote a couple of Mike’s functions to accommodate the API site’s markup. Once we had proof of concept, Rick completely rewrote the keyboard navigation system from the ground up, incorporating the best parts of the concept and adapting them to suite the needs of the task – all adapted code is noted in the source.
And that made for a nice little docs site that you don’t need your mouse to use. We’ll be putting up some demo pages and code examples soon, and hopefully get around to making a jQuery plugin for the hole system. For now, just view source on the api site.
Comments
We moved off of Disqus for data privacy and consent concerns, and are currently searching for a new commenting tool.
I think you forgot to test it in IE8 – its a no-go there.
[ 38, 40, 9, 13, 56 ].indexOf does not fly in IE.
Fixed. Update will push soon.
You broke the api.jquery.com search form.
Looking into that now. Only appears to be a bug in webkit. Thanks!
We fixed the problem. Thanks for catching that. It was just exposed in webkit for < an hour while we updated the code and dealt with IE.
Wow, that’s really cool! Quick question: is there a shortcut key for focusing the \”find\” box, like if you’ve used the down arrow to leave it, decided what you want isn’t there, and you want to do a new find?
minor issue in chrome for me.. I can go up and down but when I go back up to the top the search textfield doesn’t get re-selected and you gotta use the mouse.
Jim & Marc: It looks like that broke broke in webkit when we added support for IE earlier today. The functionality you describe is available in Firefox. We will get it fixed soon.
Described functionality neither works for me in FF3.5 on Win. The only way to return to search field is pressing the up key until the focus reaches it again. I intuitively tried Tab and Esc for returning to search field, but neither of these works.
@Jim,
I’ve implemented shift-up. Look for the push to production shortly.
@Marc,
I’m not sure I completely understand your issue. Can you clarify?
The API site now supports the following keyboard navigation cross browser:
– down [go down]
– up [go up]
– tab[go down]
– shift+tab [go up]
– shift+upArrow [go directly to search box]
– enter [navigate to page]
Great! Thanks Boaz, shift-up works nicely for me on FF3.5. Can this shortcut be made available on all pages where there’s a search box? So I could do a find, down arrow and then Enter to get to the page I want, and then shift-up on that new page to focus the search box there?
Even if not, I love the api navigation. Strong work. Thanks again.
@Jim You’re welcome.
Whoops, sorry Rick, didn’t mean to snub you there, I was reading the responses via the RSS feed, saw the note from Boaz first that started \”the API site now supports…\” and clicked through to respond without seeing your \”@Jim, I’ve implemented…\” post. Thank you!