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.

Learn jQuery
Introduction
Selectors
Events
Event Methods
Download
Callback
Chaining
Get and Set
Add Element
Remove Element
Traverse
Parent
Children
Sibling Traverse
Filtering
jQuery AJAX
Effects
Show and Hide
Fade Effect
Slide Effect
Animate Effect
Manipulate CSS
Width and Height
.addClass()
.after()
.animate()
.append()
.appendTo()
.attr()
.before()
.bind() (deprecated)
.blur()
.change()
.click()
.clone()
.css()
.dblclick()
.delay()
.delegate() and .undelegate() (deprecated)
.detach()
.empty()
.end()
.error() (deprecated)
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
.finish()
.focus()
.focusIn()
.focusOut()
.hasClass()
.height()
.hide()
.hover()
.html()
.innerHeight()
.innerWidth()
.insertAfter()
.insertBefore()
.keypress()
.keyup()
.live() and .die() (deprecated)
.load() (deprecated)
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
.off()
.offset()
.offsetParent()
.on()
.one()
.outerHeight()
.outerWidth()
.position()
.prepend()
.prependTo()
.prop()
.proxy()
.queue()
.ready()
.remove()
.removeAttr()
.removeClass()
.removeProp()
.replaceAll()
.replaceWith()
.resize()
.scroll()
.scrollLeft()
.scrollTop()
.show()
.slideDown()
.slideToggle()
.slideUp()
.stop()
.submit()
.text()
.toggle()
.toggleClass()
.trigger()
.triggerHandler()
.unbind() (deprecated)
.unload() (deprecated)
.unwrap()
.val()
.width()
.wrap()
Event Properties
event.currentTarget
event.preventDefault()
event.relatedTarget
event.stopImmediatePropagation()
event.stopPropagation()
event.target
event.timeStamp
event.type
event.which
jQuery .find()
jQuery .keydown()
jQuery.noConflict()
pageY and pageX