# jQuery resize event

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

Project Home | http://benalman.com/projects/jquery-resize-plugin/
GitHub | http://github.com/cowboy/jquery-resize/
Source | http://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 event | Version: 1.1, Last updated: 3/14/2010
License | Copyright © 2010 “Cowboy” Ben Alman, Dual licensed under the MIT and GPL licenses.
Examples | This working example, complete with fully commented code, illustrates a few ways in which this plugin can be used.
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).
Release History |
Properties |
jQuery.resize.delay | The numeric interval (in milliseconds) at which the resize event polling loop executes.
jQuery.resize.throttleWindow | Throttle the native window object resize event to fire no more than once every jQuery.resize.delay milliseconds.
Events |
resize event | Fired 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 event | http://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 Versions | 1.3.2, 1.4.1, 1.4.2
Browsers Tested | Internet Explorer 6-8, Firefox 2-3.6, Safari 3-4, Chrome, Opera 9.6-10.1.
Unit Tests | http://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