Draconis Software Blog

Recently, I've been working on some Javascript effects using the great Scriptaculous code, and needed to create a "panel-resize" widget, where dragging an icon between two panels would result in both panels' sizes changing relative to each other (in other words, dragging to the right would widen the left panel while shrinking the right, etc). I hadn't seen this in use anywhere, so I decided to create a mockup and explain how I created it.

Of course, it's by no means perfect, so be sure to let me know what you think. But I think it's a workable example that seems to work fine in Firefox, Safari and IE (haven’t tested Opera, Konqueror, or several others yet).

Implementation is quite easy: I used Prototype/Scriptaculous for the slider effect, and some CSS for the panels. The main trick is using a slider for the controller: I simply used an image as the widget and hid the track it runs on (this is also useful as it lets me easily set limits on how far left & right the user is allowed to slide the widget, and thus resize the panels).

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce euismod augue nec eros. Cras sapien.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce euismod augue nec eros. Cras sapien. Proin hendrerit interdum eros. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

There are two parts to this script: the visual aspect (using CSS), and the Javascript effects code, that handles the updates. The CSS looks as follows (note: I stuck all the style declarations in the div tags to illustrate the markup and styling together, hopefully making things clearer):

The second part is the Javascript code that makes use of the Scriptaculous library: we just give it the ID of the image for use as the slider, as well as the ID of the "track" div, and it handles (almost) all the rest.

In the previous listing, you'll notice there’s an inline function assigned to the onSlide variable. As you’ll probably guess, this is called while the user is moving the slider, and is what we use to change the sizing of our divs.

Configuration
The first thing to notice is the two variables at the beginning of the listing: leftDivWidth and rightDivWidth. Since we anchor our divs on the left and right sides of the manPanel div, we only need to set the widths of these two divs (rather than the width of the leftPanel and the left and width values for the rightPanel). Make sure these values match the widths you choose for the leftPanel and rightPanel widths (in the CSS listing).

Second, we have a variable that determines the slider's track width. This is the width of the track div, and should match. This value serves as our upper-limit: a user can't slide more than this width / 2 in either direction (we divide by 2 because Scriptaculous starts our slider at the half-way mark on the track).

How it works
Scriptaculous returns a value (called v) that contains the current location of the slider on its track (when started, it’s at the half-way mark, which Scriptaculous reports as 0.5). A simple linear function gives us the distance in pixels the user has moved the slider (thus, moving it all the way to the right returns sliderWidth / 2, while moving it all the way to the left returns –(sliderWidth / 2)). We can just plug this value into our divs' width values, and we have our effect!

Please keep in mind that this is just an example (and a first draft, at that). One bug I notice is how the slider widget seems to move out of position relative to the divs as it's dragged to the extremes. I'll see if I can figure out a solution to this one. Also, as I mentioned, I haven’t tested this on many browsers, so be sure and let me know how it worked for you.

Let me know if you find this useful. Obviously my demo isn't very fancy, but there's a lot of cool potential in it, especially for enterprise web apps, where users are used to many of these kinds of widgets.