Code has been added to clipboard!

Using jQuery .resize() Method: Definition, Syntax, and Usage

Reading time 1 min
Published Jan 10, 2018
Updated Oct 10, 2019

jQuery resize: Main Tips

  • The jQuery .resize() method either attaches an event handler that executes a function when a resize event occurs, or triggers the event.
  • This .resize() function is a shorthand for the .on() method with resize as the event parameter.

Handling resize Events

The jQuery .resize() method attaches an event handler, executing a function when a resize event occurs. It can trigger the event as well. This event occurs everytime a jQuery window resize happens:

Example
var times = 0; 
$(window).resize(() => {
   $("p").text("The window has been resized " + (times += 1) + " times.");
});

Use this syntax to trigger the jQuery resize event:

$("selector").resize();

Or this syntax to attach an event handler jQuery on window resize:

$("selector").resize(function);

In the first case, no arguments are needed (only the selector). However, to attach a handler, you need to specify a function to be executed when jQuery on window resize event occurs.

Note: depending on the browser, jQuery window resize events can be sent continuously during the resizing process, or only once after the resize is finished.