jQuery-UI resizable, programatically resizing

Question

I am trying to resize a div with jquery and have the alsoResize trigger: I tried changing the width and then triggering the resize event, but it doesnt work.

fiddle: http://jsfiddle.net/Ns3yn/2/

Thanks!

Answer 1

This issue is an interesting one. My need required me to resize many "alsoResize" objects along with resizing the original object.

For one, it is a requested jQuery UI feature:
Resizable: Expose an API for programatically triggering a resize

But, until that is implemented, in lieu of creating this feature myself, I have found a pretty decent quick solution. The solution comes from here:
Programmatically Resize a resizable element

The solution uses some jquery unit testing libraries that simulate a mouse drag. You can find the necessary libraries here:
jquery.simulate.js
resizable_test_helpers.js

So include those two files above, then you can run code like this:

var handle = ".ui-resizable-se";
TestHelpers.resizable.drag(handle, 50, 50);

This will programatically resize your object by 50 pixels right and down.

Answer 2

Because nowhere says that the resizable plugin use the resize event to trigger changes. All you need is add .add('img') after window selector to have the expected result

Answer 3

.trigger("resize") doesn't actually trigger the resize event.

If you bind explicitly to the event you'll see this...

$(".window").bind("resize", function(){
   alert("resize event");

});