jQuery resize event

Fired when an element’s width or height changes.  Because browsers only provide this event for the window element, for other elements a polling loop is initialized, running every jQuery.resize.delay milliseconds to see if elements’ dimensions have changed.  You may bind with either .resize( fn ) or .bind( “resize”, fn ), and unbind with .unbind( “resize” ).

Usage

jQuery('selector').bind( 'resize', function(e) {
  // element's width or height has changed!
  ...
});

Additional Notes

• The polling loop is not created until at least one callback is actually bound to the ‘resize’ event, and this single polling loop is shared across all elements.

Double firing issue in jQuery 1.3.2

While this plugin works in jQuery 1.3.2, if an element’s event callbacks are manually triggered via .trigger( ‘resize’ ) or .resize() those callbacks may double-fire, due to limitations in the jQuery 1.3.2 special events system.  This is not an issue when using jQuery 1.4+.

// While this works in jQuery 1.4+
$(elem).css({ width: new_w, height: new_h }).resize();

// In jQuery 1.3.2, you need to do this:
var elem = $(elem);
elem.css({ width: new_w, height: new_h });
elem.data( 'resize-special-event', { width: elem.width(), height: elem.height() } );
elem.resize();