W-Shadow.com

In this post I’ll review* several splitter components for JavaScript. A splitter is usually a vertical or horizontal bar that you can drag to change the size of the surrounding elements. Most splitter scripts also depend on, or are part of a JS framework, which may be an important consideration if you’re already using some kind of a framework in your project.

Clicking on one of the headlines below will bring you to the scripts webpage and clicking on a screenshot will open a demo (or sometimes a list of demos).

A simple and functional Splitter class that uses the Mootools framework. Supports horizontal and vertical splitters, setting the minimum width/height for each panel… and that’s pretty much it. It’s also fairly lightweight (8 KB not including the framework) and fast – when dragged, the splitter bar becomes an outline and the panel is actually resized only when the you release the bar.

Despite the crappy screenshot, this splitter variant is actually more advanced than the previous one – it supports vertical and horizontal splitters, setting minimum and maximum width/height, CSS styling of the bar and keyboard shortcuts for moving it, though the access don’t work in some browsers.

Panels are resized in real-time when the splitbar is moved; there wasn’t any noticeable lag in my tests. The fact that it’s a jQuery plugin also counts as a plus, at least in my book 🙂 All of this is packed in a small 8 KB file. The jQuery framework itself is around 30 – 50 KB depending on version.

The Yahoo! UI library includes a “resize utility” that can also be used as a splitter. There’s lots of features, many examples, extensive documentation and even a “cheat sheet”. On the other hand, this component may be too complex for simple projects, and is also relatively “heavy” – 20 KB (not including the YUI framework).

This visually appealing splitter control from the DHTML Suite has some unique features, like panels that can be shown/hidden with a single click some kind of “roll-out mode” that I haven’t seen anywhere else. However, I wouldn’t recommend using it – the demo was only partially functional in Opera, nearly crashed my Firefox 3.0.3 and seemed a bit internally inconsistent overall. The splitter isn’t available as a separate file, so you’d have to download the whole 780 KB suite if you wished to use it.

*In this context equivalent to “rant about [smth]”. In the presence of a financial interest may mean “advertise [smth]” instead. Unfortunately, no-one wanted to bribe me to get their script on this list. [Remember to insert something more witty here]