Coda Slider and More With jQuery Tools

When I need to setup tabs, accordions and other website user interface features, I use jQuery UI. That may very well be changing with the introduction of “jQuery Tools, The missing UI library for the Web“. jQuery Tools contains the UI features I use most, including an easy to setup “Coda slider” which jQuery UI doesn’t easily do (as in a few lines of code).

• View the Example
• Download the Source

In this article I’ll cover using jQuery Tools to setup a “Coda slider” and why I’ll be using jQuery Tools for my projects instead of jQuery UI.

Feature Comparison

jQuery UI and jQuery Tools aren’t exactly competitors as much as different sized tool boxes with different tool sets for your projects. If you need features like drag-and-drop, sortable, resizable windows, etc. for your project then jQuery UI may well be the better choice. However, most people don’t use all that extra stuff. In that case jQuery Tools is going to be the better choice.

jQuery Tools also packages a super simple way to integrate a “Coda slider” and tooltip effects into your website with a simple line of javascript. Here’s the list of features jQuery Tools boasts.

1. Tabs
2. Tooltips
3. Expose
4. Overlay
5. Scrollable (“Coda slider”)
6. Flashembed
7. jQuery Tools and Flowplayer

I won’t cover all of these so you’ll need to explore them on your own at the jQuery Tools Demo Area.

Now jQuery UI offers several of these features and it isn’t very hard to implement the rest of them with a little extra code. Who are we kidding though? We don’t want to write extra code! We want quick and simple one liners! jQuery Tools gives us the ability to do just that.

Size and Speed

Here’s the real kicker with jQuery Tools. You get the great features listed above with a 18.55 kb minified filesize. If you select Tabs and Accordion and deselect everything else in the jQuery UI custom download, you’ll still end up with a 131.46 kb minified file size. That’s a huge difference. Once you gzip the jQuery Tools file, it’s cut down to 5.82 kb!

Another thing I think is great about jQuery Tools is that when you build your custom download, you have the option of packaging the jQuery library with it. That minimizes HTTP requests to help speed things up a tad more. Of course you can do this yourself with jQuery UI but it’s nice when we don’t have to do things ourselves.

This translates into extra speed. Our visitors will be making fewer HTTP requests and downloading a smaller file. You also have the option of using jQuery Tools’ CDN hosted version so your visitors will be using a faster network with less latency, an expires header and a gzip’ed file.

Example Tabs

If you’ve ever setup a tabbed interface with jQuery UI, you know how incredibly simple it is. jQuery Tools is just as simple. View Demo

The HTML and CSS

The only CSS that’s actually required is to set the tab panes to “display: none;”. You can also add transition effects really easily, very similar to jQuery UI.

The jQuery

Example Tooltips

Tooltips are a great way of showing hidden information in a stylish web 2.0 way. Tooltips is something jQuery UI doesn’t have built in but can be easily added. Like I’ve said before though, we’re trying to minimize any extra work we have to do. View Demo

jQuery Tools has tooltips built in and you only need to write one short line of JavaScript to initialize it.

$("#trigger").tooltip();

The HTML and CSS

Just as with the tabs, set the tooltips CSS to “display:none;” so they are hidden when the page loads and that’s all the required CSS.

“Coda Slider”

The main reason I wanted to write this article was because of jQuery Tools’ “Coda slider” capability. This is one of those really popular features that adds a great looking transition effect to tabbed-like interfaces.

My main grudge with jQuery UI has been it’s lack of super easy “Coda slider” setup. I mean, initializing tabs only takes one line of javascript with a nice fade or sliding transition effect. I think creating the “Coda slider” effect should be just as easy and built in. jQuery Tools has done just that.

With jQuery Tools it’s called “Scrollable”. It’s flexible, easy to use and built in with the rest of these great tools. View Demo

The example above is from the jQuery Tools website which you can view by clicking the “View Demo” link above. However, I’ve put together a quick example of Scrollable in another commonly used format, essentially like tabs, along with three other basic examples of tabs and tooltips.

View Demo – Download Files

The HTML

As you can see, the HTML is really simple and includes an auto-generated navigation (tabs or another style) as well as next and previous links. Scrollable is very flexible and easy to use.

The CSS

Here’s the layout CSS. A few of the styles are just to make it look a little better but they aren’t necessary for it to function (border, background, padding). What’s important is the size and positioning of the panels within their parent container which is how the horizontal or vertical sliding effect is achieved.

Here’s the remaining styles for the links. Obviously none of these are necessary but I’ve included them to make it look better.

The JavaScript

This is all the javascript that’s required. In fact, the only javascript you actually need to make Scrollable functional is the first line, without “{size:1}”. I added the rest of the javascript to give it the tabs-like appearance.

The “{size:1}” addition tells the script that there is only one pane in the viewing area so when you click a tab, it only moves one pane. By default this is set at 5 which is used in the first example in this section.

Then I added the second section of javascript to add the word “Tab” and number the tabs starting from 1 (otherwise it starts from 0).

Scrollable has a ton of additional options that are very easy to set (like the size I set here). What makes this so great is that you get “Coda slider” functionality along with several other great tools like tabs, tooltips, expose, etc. All of this within a single, very small library.

Conclusion

As you can see, jQuery Tools contains some of the most used tools on the web in one super compact library. I wouldn’t say jQuery UI and jQuery Tools are competitors, but in a way they are. Here’s why I’ll be using jQuery Tools instead.

• Incredibly small
• Single line javascript Tooltip setup
• Single line javascript “Coda slider” setup
• Includes other great tools like Expose, Overlay, etc. that I would love to use with a single line of javascript to set it up.

Like I said before, it’s really going to just depend on your project. Most projects I deal with don’t require all the extra “fluff” jQuery UI provides. Without all that extra “fluff”, jQuery UI is still a huge file size, when compared to jQuery Tools. Being able to setup Scrollable, Tabs, Tooltips, Overlays, etc. with one library is exactly what I’ve been waiting for. Visit jQuery Tools

• Please subscribe to the Theme Forest RSS Feed, and follow us on Twitter.