Jquery Smartresize

Debounced and Throttled Resize Events for jQuery
Alternatives To Jquery Smartresize
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Jquery Smartresize796
11 years ago1October 14, 201610JavaScript
Debounced and Throttled Resize Events for jQuery
Jquery Debouncedwidth3
5 years agomitJavaScript
Debounced width-only resizing event for jQuery
Equalize Heights2
9 years agoJavaScript
A simple jQuery plugin for equalizing the heights of elements in a row.
Alternatives To Jquery Smartresize
Select To Compare

Alternative Project Comparisons

Debounced and Throttled Resize Events for jQuery

It has always been a pain to deal with cross browser issues of the window's resize event:

  • in IE, many resize events fire as long as the user continues resizing the window,
  • Chrome an Safari behave like IE, but resize events always fire two by two,
  • Firefox used to fire one resize event at the end of the resizing, but now behaves like IE,
  • Opera behaves like IE, but fires resize events at a reduced rate.

This project offers two scripts, each providing a special jQuery event that make resize more manageable:

  • jquery.debouncedresize.js: adds a special event that fires once after the window has been resized,
  • jquery.throttledresize.js: adds a special event that fires at a reduced rate (no more double events from Chrome and Safari).

The Demo should help you make your choice.

Note to previous users: jquery.debouncedresize.js is the equivalent of the old jquery.smartresize.js, only the name of the special event changes. Update is not required unless you want to add jquery.throttledresize.js to a page page that already has jquery.smartresize.js.

Binding / Unbinding

Simply bind your special event just like a normal resize event.

$(window).on("debouncedresize", function( event ) {
	// Your event handler code goes here.

// or...
$(window).on("throttledresize", function( event ) {
	// Your event handler code goes here.

// unbind at will
$(window).off( "debouncedresize" );


Both special events have a .threshold option:

  • in jquery.debouncedresize.js, it defines the interval used to determine if two resize events are part of the same debouncedresize event. Defaults to 150 (milliseconds)
  • in jquery.throttledresize.js, it defines the number of animation ticks (or frames) between each throttledresize event. Defaults to 0 (tick), which means that it's going to fire at a maximum of 60fps.

They can be modified globally once the script has been loaded:

// increase the threshold to 250ms
$.event.special.debouncedresize.threshold = 250;

// decrease the firing rate to a maximum of 30fps
$.event.special.throttledresize.threshold = 1;
// 2 <=> 20fps, 3 <=> 15fps, ...

(Synchronous) Trigger

Triggering those events is achieved using jQuery's standard API:

$(window).trigger( "debouncedresize" );

It's also possible to execute the handler of any listener synchronously (without the delays):

$(window).trigger( "throttledresize", [true] );

Minimalist Standalone Version

Most of the time, I find myself using debouncedresize just to register a single listener on window. As it turns out, all the features I need actually fit in 91 bytes:

// debulked onresize handler
function on_resize(c,t){onresize=function(){clearTimeout(t);t=setTimeout(c,100)};return c};

Using it is pretty simple:

on_resize(function() {
  // handle the resize event here

Initializing a page (by executing the resize handler when the page loads) couldn't be easier:

on_resize(function() {
})(); // these parenthesis does the trick

No files are provided for this function, simply copy/paste it from this README.


MIT licensed http://louisremi.mit-license.org/

Copyright (c) 2012 Louis-Rémi Babé.

Popular Jquery Projects
Popular Resize Events Projects
Popular Web User Interface Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Resize Events