jQuery UI - I want to check if a resize event was triggered on a resizable div

Question

I have two divs $('.list') and $('.content') side by side. $('.list') is resizable using jQuery UI resizable and $('.content') is bound to the alsoResize.

The problem I am having is I need to know when the resizable event is triggered. .bind('change') or .bind('resize') don't work because resize is only for the window/frame and 'change' seems to be an IE only event.

The solution I had in mind was to actively 'watch' for any changes to the width of the $('.list') div and trigger an event but I'm not sure how to go about doing this.

What I can't do is put this inside the resize event because it has to live inside an independent jQuery plugin. I want the jQuery plugin to watch for any changes.

Thanks!

Answer 1

You should be able to attach a function to the start event when you bind the <div> like so:

$('.list').bind('resizestart', function(event, ui) {
  ...
});

EDIT: If you want to track when a DOM element has been resized, I believe you can externally attach the resize event:

$('.list').resize(function(){
    ...
});

Another EDIT: It would seem that the resize event has a known issue. Look here for a full explanation.