Question

I have a webpage that’s divided into two columns. I have made these columns resizable. Is there any way to allow only the width to resize, and not height? Also, when I resize one column the width of other column should get resized correspondingly.

To give information about How I am achieving this at this point of time is:
On the “resize” event of column1 I am retrieving the width of that column1 & setting width of column2 by subtracting column1 width from entire webpage width.this is how the second column gets resized correspondingly when I resize the first Column.

Can anybody tell if this is an appropriate way to do it?
If not please suggest a better way to do it..thanx in advance 🙂

Answer 1

The Resizable widget has options for minHeight^{[API Ref]} and maxHeight^{[API Ref]}. If you set those equal to your viewport height, only the width will be resizable.

var wndHeight = $(window).height(); // Use whatever height is appropriate
$('#column1').height(wndHeight)
             .resizable({ minHeight: wndHeight, maxHeight: wndHeight });

Here’s a working example.

To resize the other column, you can use the resize event of the Resizable widget, similarly to how you’ve already described using the stand resize event.