4

My goal should be obvious:

I have two rectangular panels (divs) that are adjacent (left and right) to one another. I would like to grab the boundary between the two and expand the left panel eastward, so that its right edge moves east, while the right panel's left edge also moves east, and vice versa. This is a common feature in many application UI, to change the relative width of adjacent panels interactively.

I am using the JQuery Resizable function, which has a alsoResize option. I have tried Simen Echholt's alsoResizeReverse function, documented here: jQuery UI Resizable alsoResize reverse

It does a very cool thing, but not specifically what I'm looking for.

If anyone had an elegant solution, or could explain what mod to apply to the alsoResizeReverse function to make this work ?

East-west (vertical boundary) resizing is my primary goal, but north-south (horizontal) would be useful as well. A generic solution is best.

thanks

Philippe

Community
  • 1
  • 1
Philippe Panzini
  • 41
  • 3
  • Did you find a solution for this? I have the exact same problem here... – Amir Abiri Apr 09 '13 at 13:28
  • Any luck? I have the same problem here. Seems rather complex as each of the two divs has quite a bit of content which would need to know how to be resized. – ari gold Sep 16 '13 at 18:40

1 Answers1

-1

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

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

UPD: this plugin relies on an outdated version of jQuery and is incompatible with current ones

Community
  • 1
  • 1
Andrey Mikhaylov - lolmaus
  • 23,107
  • 6
  • 84
  • 133