You could use the UI Layout plug-in. It utilizes a fixed-size
'container' with 2 or more sub-elements. When you drag the resizer/
splitter between two pane-divs, *both* divs are resized, so the
combined width and height is always constant. There are many options
available, like min/max-max sizes, live sizing, state-managment
(remembers sizes), etc.
website:
http://layout.jquery-dev.net/download.htmldemos:
http://layout.jquery-dev.net/demos.htmlforum:
http://groups.google.com/group/jquery-ui-layout/topicsIf you wish to use it, I suggest using the latest release-candidate
instead of version 1.2.0...
http://layout.jquery-dev.net/lib/js/jquery.layout-latest.jsThis has a lot of new features, and will become version 1.3.0 final in
a few days.
If you choose to make your own plug-in instead, you could still use
the same concept of having a fixed-size container with 2 sub-elements
inside, and a 'splitter' element between them. Then use ui-draggable
to make the spliltter draggable and resize the 2 sub-elements on
drag.stop.
/Kevin