jQuery .resize() Method

What You’ll Learn

The .resize() method is jQuery’s legacy shorthand for binding and triggering the resize event on the window. This tutorial covers .resize(handler) since 1.0, .resize(eventData, handler) since 1.4.3, no-argument .resize() as a trigger, migration to .on("resize") and .trigger("resize"), and why the binding form is deprecated since jQuery 3.3 but still works in 3.x. See the jQuery resize event tutorial for the modern API.

Introduction

Before jQuery 1.7 unified events with .on() and .off(), every common event had a matching shorthand — .resize(), .scroll(), .click(), and more. The .resize() method let you react to viewport changes in one short call: $(window).resize(function(){ layout(); }). It remains in jQuery 3.x for backward compatibility but is marked deprecated since 3.3 — unlike .error(), which was removed in jQuery 3.0.

Understanding .resize() matters when reading older dashboard, chart, and responsive-layout tutorials in legacy codebases. The method does two distinct jobs: with a function argument it binds; with no arguments it triggers. Modern jQuery splits those roles explicitly — .on("resize", handler) for binding and .trigger("resize") for firing.

Understanding the .resize() Method

The official jQuery API describes .resize() as a way to bind an event handler to the resize event, or trigger that event on an element. When you pass a handler, jQuery registers it on each matched element and calls it when the browser window size changes — the same resize event that .on("resize") handles today. In practice, bind on $(window) for viewport changes.

When you call .resize() with no arguments, jQuery synthetically fires the resize event on each matched element. Bound handlers run once per call. This trigger behavior is equivalent to .trigger("resize").

📝 Syntax

The .resize() method has three signatures from the official jQuery API. The binding forms are deprecated; the trigger form remains valid but .trigger("resize") is preferred:

1. Bind a handler — .resize( handler ) (since 1.0, deprecated 3.3)

.resize( handler )

• handler — function executed each time resize fires: function( event ) { ... }.
• Returns the jQuery object for chaining.
• Bind on $(window) for viewport size changes.
• Modern replacement: .on( "resize", handler ).

2. Bind with eventData — .resize( [eventData], handler ) (since 1.4.3, deprecated 3.3)

.resize( [eventData], handler )

• eventData — optional object available in the handler as event.data.
• Modern replacement: .on( "resize", eventData, handler ).

3. Trigger the event — .resize() (since 1.0)

.resize()

• No arguments — triggers resize on every matched element.
• Runs bound resize handlers.
• Preferred replacement: .trigger( "resize" ).

Official jQuery API migration note

// Deprecated binding
$( window ).resize( function() {
  alert( "Handler for `resize` called." );
} );

// Modern binding
$( window ).on( "resize", function() {
  alert( "Handler for `resize` called." );
} );

// Deprecated trigger
$( window ).resize();

// Modern trigger
$( window ).trigger( "resize" );

Return value

• All .resize() signatures return the original jQuery object for chaining.
• Handler return values are ignored unless you use return false (equivalent to preventDefault() + stopPropagation()).

Examples Gallery

Five examples cover binding on $(window), eventData breakpoints, triggering, migration from .resize() to .on("resize"), and debouncing inside a legacy handler. Use the Try-it links to run each snippet in the browser. Remember: binding with .resize(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

$( window ).resize( function() {
  $( "#log" ).append( "Handler for resize called. " );
} );

Resize the browser panel → log appends "Handler for resize called."

May fire many times while dragging — debounce heavy work

Deprecated — prefer .on("resize", fn) for new code

function apply( bp ) {
  var w = $( window ).width();
  $( "body" ).toggleClass( "is-narrow", w < bp ).toggleClass( "is-wide", w >= bp );
  $( "#status" ).text( w < bp ? "Narrow (< " + bp + "px)" : "Wide (≥ " + bp + "px)" );
}

$( window ).resize( { breakpoint: 480 }, function( e ) {
  apply( e.data.breakpoint );
} );
apply( 480 );

Resize below 480px → body turns amber, status shows "Narrow"

Resize above 480px → body turns green, status shows "Wide"

eventData.breakpoint passed without a closure

Modern: .on("resize", { breakpoint: 480 }, fn)

var count = 0;

$( window ).resize( function() {
  count++;
  $( "#log" ).text(
    "Handler called " + count + " time(s). Width: " + $( window ).width() + "px"
  );
} );

$( "#trigger" ).on( "click", function() {
  $( window ).resize();
} );

Resize browser → count increments, log shows width

Click Trigger with .resize() → $(window).resize() → same handler runs

No-arg .resize() is trigger shorthand — prefer .trigger("resize")

// Modern (recommended)
$( window ).on( "resize", function() {
  $( "#log" ).append(
    "<div>.on('resize') handler — width " + $( window ).width() + "px</div>"
  );
} );

// Legacy (deprecated): $( window ).resize( function() { ... } );

$( "#go" ).on( "click", function() {
  $( window ).trigger( "resize" );
} );

Click Run modern handler → .trigger("resize") fires

Log appends ".on('resize') handler — width 768px" (example)

Legacy .resize(fn) would behave identically — only the API name differs

var raw = 0, deb = 0, timer;

$( window ).resize( function() {
  raw++;
  $( "#raw" ).text( raw );
  clearTimeout( timer );
  timer = setTimeout( function() {
    deb++;
    $( "#deb" ).text( deb );
    $( "#box" ).text(
      "Width: " + $( window ).width() + "px — layout #" + deb
    );
  }, 200 );
} );

Drag-resize window → Raw counter climbs quickly

Debounced counter increments ~200ms after resize stops

#box updates with current width and layout number

Same debounce pattern applies to .on("resize", fn)

🚀 Common Use Cases

• Reading legacy code — recognize $(window).resize(fn) as equivalent to .on("resize", fn) in older dashboard scripts.
• Responsive layout toggles — legacy tutorials bind .resize() to switch mobile/desktop CSS classes at breakpoints.
• Programmatic trigger — $(window).resize() from a button — replace with .trigger("resize").
• Shared eventData — $(window).resize({ breakpoint: 768 }, fn) passes metadata without closures.
• Chart and canvas redraws — debounced .resize(fn) calls in older visualization libraries.
• Maintaining legacy admin UIs — many jQuery 1.x panels still use .resize() — know how to migrate safely to jQuery 3.x.

📝 Notes

• Deprecated since jQuery 3.3 — do not use .resize(handler) or .resize(eventData, handler) in new code. Use .on("resize") instead. Unlike .error(), .resize() is not removed in jQuery 3.x.
• Bind with .resize(handler) since jQuery 1.0; eventData form since 1.4.3.
• No-argument .resize() triggers the event since jQuery 1.0 — prefer .trigger("resize").
• Always bind on $(window) for viewport size changes — not document or body.
• Never rely on a specific resize call count — browsers fire continuously while dragging in some engines.
• Debounce or throttle expensive layout, chart, and measurement code inside handlers.
• Remove handlers with .off("resize") — not by calling .resize(undefined).
• For the full modern resize guide — debouncing, breakpoints, and .trigger("resize") — see the jQuery resize event tutorial.

💡 Best Practices