jQuery resize event


With jQuery resize event, you can now bind resize event handlers to elements other than window, for super-awesome-resizing-greatness!

Why is a plugin needed for the resize event?

Long ago, the powers-that-be decided that the resize event would only fire on the browser’s window object. Unfortunately, that means that if you want to know when another element has resized, you need to manually test its width and height, periodically, for changes. While this plugin doesn’t do anything fancy internally to obviate that approach, the interface it provides for binding the event is exactly the same as what’s already there for window.

For all elements, an internal polling loop is started which periodically checks for element size changes and triggers the event when appropriate. The polling loop runs only once the event is actually bound somewhere, and is stopped when all resize events are unbound.

What about window resizing?

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, this plugin throttles the window resize event (by default), making event behavior consistent across all elements.

Of course, you could just set the jQuery.resize.throttleWindow property to false to disable this, but why would you?

A basic usage example

It couldn’t be more easy, just use .resize() or .bind( "resize", fn ) or .trigger( "resize" ) just like you’ve always used them… except on any element your heart desires. Look at the working examples for more details.

// You know this one already, right?
  // do something when the window resizes

// Well, try this on for size!
  // do something when #unicorns element resizes

// And of course, you can still use .bind with namespaces!
$("span.rainbows").bind( "resize.rainbows", function(e){
  // do something when any span.rainbows element resizes

Known issues

  • 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+, and is explained in detail in the documentation.

If you have any non-bug-related feedback or suggestions, please let me know below in the comments, and if you have any bug reports, please report them in the issues tracker, thanks!

Post A Comment

  • Any of these HTML tags may be used for style: a, b, i, br, p, strong, em, pre, code.
  • Multi-line JavaScript code should be wrapped in <pre class="brush:js"></pre>
    (supported syntax highlighting brushes: js, css, php, plain, bash, ruby, html, xml)
  • Use &lt; instead of < and &gt; instead of > in the examples themselves.