jQuery resize event

Version: 1.1, Last updated: 3/14/2010

Project Homehttp://benalman.com/projects/jquery-resize-plugin/
GitHubhttp://github.com/cowboy/jquery-resize/
Sourcehttp://github.com/cowboy/jquery-resize/raw/master/jquery.ba-resize.js
(Minified)http://github.com/cowboy/jquery-resize/raw/master/jquery.ba-resize.min.js (1.0kb)
Summary
jQuery resize eventVersion: 1.1, Last updated: 3/14/2010
LicenseCopyright © 2010 “Cowboy” Ben Alman, Dual licensed under the MIT and GPL licenses.
ExamplesThis working example, complete with fully commented code, illustrates a few ways in which this plugin can be used.
Support and TestingInformation about what version or versions of jQuery this plugin has been tested with, what browsers it has been tested in, and where the unit tests reside (so you can test it yourself).
Release History
Properties
jQuery.resize.delayThe numeric interval (in milliseconds) at which the resize event polling loop executes.
jQuery.resize.throttleWindowThrottle the native window object resize event to fire no more than once every jQuery.resize.delay milliseconds.
Events
resize eventFired when an element’s width or height changes.

License

Copyright © 2010 “Cowboy” Ben Alman, Dual licensed under the MIT and GPL licenses.  http://benalman.com/about/license/

Examples

This working example, complete with fully commented code, illustrates a few ways in which this plugin can be used.

resize eventhttp://benalman.com/code/projects/jquery-resize/examples/resize/

Support and Testing

Information about what version or versions of jQuery this plugin has been tested with, what browsers it has been tested in, and where the unit tests reside (so you can test it yourself).

jQuery Versions1.3.2, 1.4.1, 1.4.2
Browsers TestedInternet Explorer 6-8, Firefox 2-3.6, Safari 3-4, Chrome, Opera 9.6-10.1.
Unit Testshttp://benalman.com/code/projects/jquery-resize/unit/

Release History

1.1(3/14/2010) Fixed a minor bug that was causing the event to trigger immediately after bind in some circumstances.  Also changed $.fn.data to $.data to improve performance.
1.0(2/10/2010) Initial release

Properties

jQuery.resize.delay

The numeric interval (in milliseconds) at which the resize event polling loop executes.  Defaults to 250.

jQuery.resize.throttleWindow

Throttle the native window object resize event to fire no more than once every jQuery.resize.delay milliseconds.  Defaults to true.

Because the window object has its own resize event, it doesn’t need to be provided by this plugin, and its execution can be left entirely up to the browser.  However, since certain browsers fire the resize event continuously while others do not, enabling this will throttle the window resize event, making event behavior consistent across all elements in all browsers.

While setting this property to false will disable window object resize event throttling, please note that this property must be changed before any window object resize event callbacks are bound.

Events

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();
The numeric interval (in milliseconds) at which the resize event polling loop executes.
Close