Jquery-ui-resizable-alsoresize-reverse - how to have two adjacent divs changing in the same direction, from the adjacent edge

Question

My goal should be obvious:

I have two rectangular panels (div) that are adjacent (left and right) to each other. I would like to grab the border between them and expand the left panel to the east, so that its right edge moves to the east, and the right left edge also moves to the east, and vice versa. This is a common feature in many application user interfaces to interactively change the relative widths of adjacent panels.

I am using the jQuery Resizable function, which has an isResize parameter. I tried the Simen Echholt andResizeReverse function described here: jQuery UI Resizable andResize reverse

This is a very cool thing, but not what I'm looking for.

If someone had an elegant solution or one could explain, which mod is applicable to the alsoResizeReverse function to make this work?

Resizing east-west (vertical border) is my main goal, but it is also useful to use from north to south (horizontal). The best solution.

thanks

Philip

Answer 1

Yay, I found a great plugin to solve your problem: jQuery Splitter Plugin .

Here's a quick demo: http://www.methvin.com/splitter/vbasic.html

UPD : this plugin relies on an outdated version of jQuery and is not compatible with current