July 2009 – not so silent (e)

jQuery Tools - Scrollable
I recently discovered a new jQuery effect library named jQuery Tools. It’s like jQuery UI but more focused on the core items that can improve the usefulness of a website. Tabs, tooltips, scrollables, overlays, and a few more. I began using it this week to replace a carousel on my website at work. My website uses several different javascript libraries for these very same techniques but they’re all from different authors. I like the idea of having a single library instead of tracking several so I’ve started converting those libraries over to jQuery Tools. The first to go was the homepage carousel.

After replacing the old carousel with the new one, I discovered that the new code didn’t provide a way to do circular carousels. It had a fixed beginning and an end. You could program it to loop but when you got to the end and told it to move to the right again it would actually scroll really fast to the left until the first item was back on the left edge. In a circular carousel, if you’re on the last item, you want the first item to show up to the right of the last item if you move past the end, looping forever.

So, with the code being released under the GPL opensource license, I did what any self-respecting developer would do. I patched the code to make it circular when you told it you wanted it to loop. This is a change from the old way it worked so people using this library and expecting the old functionality should be warned. I could have added a “loopmethod” config variable but I didn’t want to introduce any new configuration variables without approval from the true author. As it is, I only added one new method – a way to move a specific item to the left most item using an unnoticeable jump, instead of the default scroll. This is part of the magic that makes it able to simulate a circular loop. Compressed with the YUI Javascript Compressor, it only adds 600-ish bytes to the code. Even less, when you finally gzip it. Acceptable for the return in functionality, IMNSHO.

I haven’t tested it 100%, notably the code where you are using the custom API methods, but it SHOULD be good to go by just replacing your old version. YMMV. I will be submitting this to the author of jQuery Tools so he can evaluate it for the next revision of Scrollable. In the mean time, test it, use it, let me know what you think.

Download the Scrollable javascript

UPDATE 7/6 – Added autoscroll pausing when hovering over the specific page nav links, just like when hovering over the “next” and “previous” links.

UPDATE 7/6 #2 – Fixed a problem with the “disabledClass” on prev/next/prevPage/nextPage when looping. Those elements should always appear when looping and you have them in the html.

UPDATE 7/7 – I’ve pushed my updated version of the code to my employer’s website so you can see the circular ability in action. Visit http://www.ruckuswireless.com. The homepage has the page nav links underneath while the “Solutions”, “Verticals”, “TechTalk”, “Products”, “Ruck(us)” and “Management” page – under Ruck(us) – do not use the page nav links. Note that on the “Ruck(us)” page, the “next” and “previous” links are automatically hidden because there aren’t more items than are already displayed.