jQuery API

.resize()

Categories: Events > Browser Events

.resize( handler(eventObject) ) Returns: jQuery

Description: Bind an event handler to the "resize" JavaScript event, or trigger that event on an element.

  • version added: 1.0.resize( handler(eventObject) )

    handler(eventObject)A function to execute each time the event is triggered.

  • version added: 1.4.3.resize( [eventData], handler(eventObject) )

    eventDataA map of data that will be passed to the event handler.

    handler(eventObject)A function to execute each time the event is triggered.

  • version added: 1.0.resize()

This method is a shortcut for .bind('resize', handler) in the first and second variations, and .trigger('resize') in the third.

The resize event is sent to the window element when the size of the browser window changes:

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

Now whenever the browser window's size is changed, the message is appended to <div id="log"> one or more times, depending on the browser.

Code in a resize handler should never rely on the number of times the handler is called. Depending on implementation, resize events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in some other browsers such as Opera).

Example:

To see the window width while (or after) it is resized, try:


$(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
});

Support and Contributions

Need help with .resize() or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to .resize()? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

  • Bob

    So this only works on the window object? I can’t call resize() on any arbitrary element, for example on a div?

    • http://www.learningjquery.com/ Karl Swedberg

      Yes, this only works on the window object. See window.onresize on the Mozilla Developer Center for more information.

    • James Lafferty

      It works on an arbitrary element if you fire resize whenever you resize the element in question. So, for example try:

      Example

      myFunctionThatResizes = function (fooText, myDiv) {

      jQuery(myDiv).html(fooText);
      jQuery(myDiv).resize();

      }

      jQuery(document).ready(function () {

      jQuery(‘#id-of-div-I-want’).resize(function () {

      alert(“Height: ” + jQuery(this).height() + “nWidth: ” + jQuery(this).width());

      });

      myFunctionThatResizes( ‘some text’, ‘#id-of-div-I-want’);

      jQuery(‘#id-of-div-I-want’).click(function () {

      myFunctionThatResizes(‘Here is some brand new textThat breaks linesAnd gets taller.’, this);

      })

      });

      Hope that helps!

  • Anonymous

    Appears so.. I’ve tried with various DIV’s with no luck… seems a bit useless, the demo doesnt even work properly for me.

    • http://www.learningjquery.com/ Karl Swedberg

      It’s only useless if you have no use for triggering something when the window resizes. ;)

      The demo did not work because it was contained within an iframe. Put it in your own script (not in Firebug) to test.

  • Bob

    The demo works for me, since it’s attaching the event to the WINDOW object, but that’s about all I can do.

  • Ivan Xu

    it seems that not work with $(document.body),someone tell me why?

  • http://benalman.com/ "Cowboy" Ben Alman

    In case anyone is interested, the jQuery resize event plugin not only uses jQuery special events to supply a resize event for all elements, but will also throttle the window resize event to make it consistent cross-browser.

  • zeljko

    code works diferent on IE and Netscape…. The basic diference is that in IE function is trigered when body is resized and on Netscape when actual window is resized…

  • http://twitter.com/damien_m Damien McMahon

    This doesn't seem to be working on IE8 when using quirksmode I'm getting “Object doesn't support this property or method” (Unfortunately for work I have to use quirksmode/ loose doctype)

  • Dgit1

    How do set maximum height or width in the resize function?

  • Spienaru

    The event doesn't seem to get triggered on FF (on IE it works fine) if the windows expands vertically and the scroll appears on the right. Anyone knows how can I have the event triggered in this case as well ?

  • Anandbabu

    In mozill it doesn't call. what can i do

  • javanaut

    Consistent ….
    Maybe for *most* users.
    I use:
    Kubuntu 10.10
    blackboxwm
    FF 3.6.13

    Code:
    $(window).resize(function() {
    alert(“Resized!”);
    });

    Resize responds as follows:
    Pops up window [Resized!] <user clicks=”" ok=”">
    Pops up window [Resized!] <user clicks=”" ok=”">
    Pops up window [BLANK] <user able=”" browser=”" close=”" crashing=”" offending=”" tab=”" to=”" without=”">

    This behaviour is consistently repeatable.</user></user></user>

  • javanaut

    Consistent ….
    Maybe for *most* users.
    I use:
    Kubuntu 10.10
    blackboxwm
    FF 3.6.13

    Code:
    $(window).resize(function() {
    alert(“Resized!”);
    });

    Resize responds as follows in FF3.6:
    Pops up window [Resized!]
    user clicks ok
    Pops up window [Resized!]
    user clicks ok
    Pops up window [BLANK]
    page stops responding; user able to close offending tab without crashing browser

    On Google chrome:
    The window pops up exactly 4 times; after that, the browser tab is stlll responsive.

  • javanaut

    Consistent ….
    Maybe for *most* users.
    I use:
    Kubuntu 10.10
    blackboxwm
    FF 3.6.13

    Code:
    $(window).resize(function() {
    alert(“Resized!”);
    });

    Resize responds as follows in FF3.6:
    Pops up window [Resized!]
    user clicks ok
    Pops up window [Resized!]
    user clicks ok
    Pops up window [BLANK]
    page stops responding; user able to close offending tab without crashing browser

    On Google chrome:
    The window pops up exactly 4 times; after that, the browser tab is stlll responsive.

  • Jean-Francis

    this works with [style="resize:both;"] elements (css3)?

  • Yyq2007aa

    Resizable(“destroy”) doesn't reset the position style, my span's position is relative before resizable, when I set it to be resizable and resized it, I destroyed the resize ability, then the position of the span element is set to “absolute” not the previous “relative”.
    It is a bug.
    Also, I think, there should be a option for resize function, which can flag if I want to set the style of the wrapper div to the target element or not, surely, the position should set correctly as original position.

    • Yyq2007aa

      sorry, it is a wrong comment here.