jQuery .resize() Method

What Is .resize()?

.resize() is jQuery’s legacy shorthand (since 1.0) for binding or triggering the browser resize event — typically on window. It is deprecated since 3.3 but still works in jQuery 3.x. Prefer .on("resize") / .trigger("resize").

// Deprecated (since 3.3) — still works in jQuery 3.x
$(window).resize(function () {
  // viewport size changed
});

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

// Modern replacements
$(window).on("resize", handler);
$(window).trigger("resize");

How to Use .resize()

Recognize the legacy call, bind on window, and migrate to .on() / .trigger().

1. Bind with $(window).resize(handler) (legacy) or .on("resize", handler) (preferred).
2. Optionally pass eventData: .resize(data, handler) → .on("resize", data, handler).
3. Trigger with no-arg .resize() (legacy) or .trigger("resize") (preferred).
4. Debounce expensive layout / chart work inside the handler.
5. Remove with .off("resize", handler) — not .unbind().

Pseudocode

call $(window).resize(handler)
    → internally: $(window).on("resize", handler)

call $(window).resize()
    → internally: $(window).trigger("resize")

when browser viewport size changes:
    fire resize on window
        for each registered handler:
            call handler(event)

to migrate:
    .resize(fn)      → .on("resize", fn)
    .resize(data, fn) → .on("resize", data, fn)
    .resize()        → .trigger("resize")

Cheat Sheet

Quick map from the deprecated shorthand to modern APIs.

Live Preview

Run the legacy .resize() shorthand (still available in jQuery 3.x) and watch the handler update the log.

Ready — resize the window or click Run.

jQuery Examples

Short, copy-ready snippets using the legacy shorthand. Prefer .on("resize") for new projects.

$(window).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).resize({ label: "viewport" }, function (event) {
  $("#out").text(
    event.data.label + ": " + $(window).width() + "px"
  );
});

Resize → "viewport: 980px"
event.data.label carries the context string

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

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

Click #run → .resize() fires the event
Bound handler runs without a real window drag

// Legacy — deprecated since jQuery 3.3
$(window).resize(function () {
  $("#out").text("Legacy: .resize(function(){ ... }).");
});

// Modern — use for new code
$(window).on("resize", function () {
  $("#out").text("Modern: .on('resize', function(){ ... }).");
});

Both handlers fire on resize
Behavior is identical — only the API name differs
Prefer .on("resize") for new code

var timer;

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

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

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

Performance Notes

Legacy and modern binds have the same cost. Keep handlers light, and debounce anything that measures or redraws the DOM.

Key Takeaways