jQuery Docs Keyboard Navigation

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.