jQuery Resize Event

What You’ll Learn

The resize event fires when the browser window changes size. This tutorial covers .on("resize") on $(window), logging viewport width, debouncing expensive layout work, .trigger("resize"), the official jQuery API demos, and how this differs from scroll, orientationchange, and the removed .resize() method.

Introduction

Responsive dashboards, fluid grids, and chart libraries all need to know when the viewport changes. The resize event is jQuery’s hook for that moment — when the browser window grows, shrinks, or the user finishes dragging an edge.

The official jQuery API distinguishes the resize event (bound with .on("resize") since 1.7 on $(window)) from the removed .resize() method (legacy shorthand, gone in jQuery 3.0). To programmatically run resize handlers, use .trigger("resize") since jQuery 1.0.

Understanding the resize Event

The resize event is sent to the window element when the browser window size changes. jQuery wraps the native event so you can bind with $(window).on("resize", handler) and chain further calls on the same collection.

Resize behavior differs by browser: in Internet Explorer and WebKit it may fire continuously while the user drags a window edge; in Opera it may fire only once when resizing finishes. Never assume a fixed number of calls — debounce or throttle layout work instead.

📝 Syntax

The modern jQuery API for the resize event has two main forms — binding a handler and triggering the event:

1. Bind a handler — .on("resize" [, eventData ], handler) (since 1.7)

.on( "resize" [, eventData ], handler )

• eventData — optional object passed to the handler as event.data.
• handler — function called when the window resizes: function( event ) { ... }.
• Bind on $(window) — the event is sent to the window element when the browser window size changes.

2. Trigger the event — .trigger("resize") (since 1.0)

.trigger( "resize" )

• Runs bound resize handlers on the matched element(s) — typically $(window).
• Useful when your code changes layout dimensions without the user resizing the browser.

3. Unbind — .off("resize" [, handler])

$( window ).off( "resize" );              // remove all resize handlers
$( window ).off( "resize", debouncedFn );   // remove one handler

Official jQuery API examples

$( window ).on( "resize", function() {
  $( "#log" ).append( "<div>Handler for `resize` called.</div>" );
} );

$( window ).on( "resize", function() {
  $( "#log" ).prepend( "<div>Handler for `resize` called.</div>" );
  $( "#log" ).prepend( "<div>window width is " + $( window ).width() + "</div>" );
} );

Deprecated shorthand

jQuery also provided .resize(handler) as a legacy binding shorthand and no-arg .resize() to trigger the event. The binding form is deprecated since jQuery 3.3 — see the jQuery .resize() method tutorial or migrate to .on("resize") and .trigger("resize").

Return value

• .on() and .trigger() return the original jQuery object for chaining.
• Inside the handler, this refers to the window DOM element — use $(window).width() and $(window).height() for viewport dimensions.

Examples Gallery

Examples 1–2 follow the official jQuery API documentation. Examples 3–5 extend the pattern with debounced layout recalc, programmatic triggers, and responsive breakpoint classes via eventData. Use the Try-it links to run each snippet in the browser.

$( window ).on( "resize", function() {
  $( "#log" ).append( "<div>Handler for `resize` called.</div>" );
} );

Page loads → handler bound on $(window)

Resize browser window → #log gains new lines:
  Handler for resize called.

May fire many times while dragging (IE/WebKit) or once (Opera)

$( window ).on( "resize", function() {
  $( "#log" ).prepend( "<div>Handler for `resize` called.</div>" );
  $( "#log" ).prepend( "<div>window width is " + $( window ).width() + "</div>" );
} );

Resize window → #log prepends:

window width is 1024
Handler for resize called.

Width updates to match $(window).width() on each fire

var resizeTimer;

function recalcLayout() {
  var w = $( window ).width();
  $( "#panel" ).css( "width", Math.min( w - 40, 600 ) );
  $( "#log" ).append( "<div>Layout recalc at width " + w + "</div>" );
}

$( window ).on( "resize", function() {
  clearTimeout( resizeTimer );
  resizeTimer = setTimeout( recalcLayout, 150 );
} );

Drag-resize window rapidly → few log lines, not hundreds

After 150 ms pause → one "Layout recalc at width …" entry

#panel width updates once per settled resize

$( window ).on( "resize", function() {
  $( "#log" ).append( "<div>Handler for `resize` called.</div>" );
} );

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

Click Trigger resize → trigger("resize") runs bound handler

#log appends: Handler for resize called.

Useful after toggling a sidebar or injecting content that changes layout

$( window ).on( "resize", { breakpoint: 768 }, function( event ) {
  var bp = event.data.breakpoint;
  if ( $( window ).width() < bp ) {
    $( "body" ).addClass( "is-narrow" ).removeClass( "is-wide" );
  } else {
    $( "body" ).addClass( "is-wide" ).removeClass( "is-narrow" );
  }
  $( "#log" ).append(
    "<div>Mode: " + ( $( window ).width() < bp ? "narrow" : "wide" ) +
    " (bp " + bp + ")</div>"
  );
} );

Viewport < 768px → body gets is-narrow, log shows Mode: narrow (bp 768)

Viewport ≥ 768px → body gets is-wide, log shows Mode: wide (bp 768)

event.data.breakpoint available inside handler without closure variables

🚀 Common Use Cases

• Responsive layout sync — recalculate column widths, sidebar visibility, or grid breakpoints when the viewport changes.
• Chart and canvas redraw — resize D3, Chart.js, or custom canvas drawings to fit the new window dimensions.
• Sticky header offsets — remeasure fixed nav height after orientation or window changes on tablets.
• Map widgets — call map.invalidateSize() or equivalent after container dimensions update.
• Virtual scroll lists — recompute visible row counts when the viewport height changes.
• Manual layout notifications — use .trigger("resize") after AJAX injects content that changes dimensions without a browser resize.

📝 Notes

• Bind with .on("resize", handler) since jQuery 1.7 — not the removed .resize() shorthand.
• Trigger with .trigger("resize") since jQuery 1.0.
• Attach handlers on $(window) — the event is sent to the window element when the browser window size changes.
• In IE and WebKit, resize may fire continuously while dragging; in Opera it may fire once at the end — never rely on call count.
• Debounce or throttle expensive layout, chart, and measurement code inside resize handlers.
• resize is not scroll — scroll fires when content position changes inside scrollable elements.
• On mobile, consider pairing with orientationchange for rotation-specific layout.
• Use .off("resize") to remove handlers — avoid deprecated .unbind("resize") or removed .resize().

💡 Best Practices