jQuery UI Resizable

Question

Hi, 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

Answer 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'
  });

});

Answer 2

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        
        }
  });