jQuery UI Resizable

Question

I am looking into the jQuery UI Resizable method and I have to DIVs (one next to the other). I want to be able to resize one and change the other accordingly. One DIV gets bigger and the other DIV gets smaller...

$(document).ready(function () {
$("#right").resizable({
    alsoResize: '#left',
});

$("#left").resizable({
    alsoResize: '#right',
});

});

Thanks, Max

DMCS · Accepted Answer · 2009-07-02 20:06:25Z

3

You want to tie into the "resize" event (http://docs.jquery.com/UI/Resizable#event-resize)

  $("#right").resizable({
        resize: function(event, ui) { 
          // look at the size of the ui element being resized 
          // and resize the left accordinly        
        }
  });

answered Jul 2, 2009 at 20:06

DMCS

31.9k14 gold badges73 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Acorn · Accepted Answer · 2009-06-25 16:40:35Z

1

It looks okay, but try removing the comma at the end of your array, since you don't have any more array elements.

$(document).ready(function () {
  $("#right").resizable({
        alsoResize: '#left'
  });

  $("#left").resizable({
        alsoResize: '#right'
  });

});

answered Jun 25, 2009 at 16:40

Acorn

8677 silver badges13 bronze badges

2 Comments

mistero Over a year ago

Yes this works however this resizes the left to the same size as the right. I want the left to get smaller by the amount I make the right bigger...

Acorn Over a year ago

Ah right. I don't think there's an "out-of-the-box" solution, but you could try using the resize event, make it a function which captures the difference of the old and new sizes, than adjust the current element height/width values. I'll try and come up with a code sample.

Collectives™ on Stack Overflow

jQuery UI Resizable

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related