Resizeable DIVs (aka SplitPanes)
If you've read any of my other posts, you might have gathered that I've been writing a portal . One of the things I wanted for this portal was the ability to have pages with a different number of columns of various sizes. Initially I wrote it to have three columns. By the way there are many articles on the web devoted to how to implement a three column layout using CSS. Well actually it isn't that hard, but the solution presented here uses JavaScript for reasons that should become obvious.
To me, the most obvious way to achieve this was to allow the columns to be resized. If I provided three columns then the user could resize those columns however they liked - including resizing a column to zero (which would then make it a two column layout) or resizing all but one column to zero (which would make it a one column layout!). So anyway I implemented this in a JavaScript class. The class uses some facilities from prototype , so you need to include prototype.js in any page that uses this splitpane too.
There's a fair bit to say about this but just to keep you interested, here's an example. The colors are pretty nasty and I wouldn't normally make the handles visible, but its there so you can see how it fits together and what happens when you resize the columns.
This is some wrapped text that will be in the left column.
This is some text that will be in the middle column.
This is some text that will be in the right column.
The exact effect of resizing a column on the layout of the page depends a lot on the CSS used for the column DIVs and on the CSS used for the content of those columns. Here I'm floating the columns and its that which causes the content beneath the columns to move down as the columns grow in height. Also you'll notice that some of the contents are cropped width-wise while some adjust to the new width. This is determined by the css of the content itself. In this case the content that wraps is just a regular paragraph, the content that crops has the style white-space: nowrap; overflow:hidden added.
For more information see this page.
