CODEWITHSUNDEEP
jqueryjquery-ui
Pranjali
Pranjali

Reputation: 535

Width-only resize with jQuery UI?

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 :)

Upvotes: 1

Views: 3958

Answers (3)

Eugene Ananin
Eugene Ananin

Reputation: 146

FishBasketGordo's answer didn't work for me for some reason. I was able to fix the problem by using the ResizableWidget's resize[API Ref] event. The following example assumes that you are resizing #target_div, and you want #target_div to maintain the same height (in pixels). 

var targetHeight = $('#target_div').height(); // Get the height of the object.  This can be done when the window loads.
$('#target_div').resizable({
  resize: function(event, ui) {
    ui.element.css('height', targetHeight);
  },
});

Upvotes: 0

FishBasketGordo
FishBasketGordo

Reputation: 23132

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.

Upvotes: 2

Andrés Torres
Andrés Torres

Reputation: 733

you have tried with the css properties min-height, max-height, min-width and max-width? if your using a plugin, the most common thing is that those properties will work for you as limits for resizing the element

Upvotes: 0

Related Questions