jQuery resize Event

What Is resize?

The resize event is sent to the window when the browser viewport changes size. Bind it with $(window).on("resize", handler) (since jQuery 1.7). Trigger it with .trigger("resize").

$(window).on("resize", function () {
  // viewport size changed
});

$(window).trigger("resize"); // fire handlers programmatically

// Do not rely on how many times the handler runs
// Debounce expensive layout / chart work

How to Use resize

Bind on window, keep the handler light, and debounce anything expensive.

1. Attach with $(window).on("resize", handler).
2. Read size with $(window).width() / .height() inside the handler.
3. Debounce or throttle layout recalculation and DOM-heavy work.
4. Call $(window).trigger("resize") when your code changes layout without a real resize.
5. Remove with $(window).off("resize", handler) when cleaning up.

Pseudocode

bind resize on window with handler(event)

when browser viewport size changes:
    fire resize on window
        for each registered handler:
            call handler(event)
            // may fire many times during a drag

when your code needs the same logic:
    trigger resize on window

for expensive work:
    on each resize:
        clear previous timer
        start timer (e.g. 200ms)
        when timer ends: run layout / redraw

Cheat Sheet

Keep these facts handy while wiring viewport-aware UI.

Live Preview

Resize the browser (or click Trigger) and watch the resize handler update the log.

Ready — resize the window or click Run.

jQuery Examples

Short, copy-ready snippets. Resize the preview window, or use Try It Yourself for a live editor.

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

Resize the window →
#log gains " Handler for resize called. "
May append many times during one drag

$(window).on("resize", function () {
  $("body").prepend($(window).width() + " ");
});

Resize → current width prepended (e.g. 980 )
Newest values appear first

var timer;

function recalcLayout() {
  $("#box").text("Width: " + $(window).width() + "px");
}

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

Many raw resize events during a drag
recalcLayout runs once ~200ms after the last event
Page stays smoother

$(window).on("resize", function () {
  $("#log").text("Width: " + $(window).width() + "px");
});

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

Click #run → .trigger("resize")
Bound handler runs immediately
Useful after dynamic layout changes

function applyBreakpoint(bp) {
  var w = $(window).width();
  $("#status").text(
    w < bp ? "Narrow (< " + bp + "px)" : "Wide (≥ " + bp + "px)"
  );
}

$(window).on("resize", { breakpoint: 480 }, function (event) {
  applyBreakpoint(event.data.breakpoint);
});

applyBreakpoint(480);

Width < 480 → "Narrow (< 480px)"
Width ≥ 480 → "Wide (≥ 480px)"
event.data.breakpoint carries the threshold

Performance Notes

Resize handlers are fine when they stay light. Measure once after settling, then update the DOM — do not reflow on every pixel of drag.

Key Takeaways