With jQuery resize event, you can now bind resize event handlers to elements other than window, for super-awesome-resizing-greatness!

The resize event on block and inline elements

Paragraph (block)

N/A

Click this link to add text! Notice that the info box updates immediately, because the resize event is being triggered manually on click with .resize(). Resize the browser window to be smaller with the mouse to see the info box update more slowly.

Span (inline)

N/A

Click this link to add text! Notice that the info box updates slowly, because the resize event is *not* being triggered manually.

Textarea (block)

N/A

The code

$(function(){
  // Bind the resize event. When any test element's size changes, update its
  // corresponding info div.
  $('.test').resize(function(){
    var elem = $(this);
    
    // Update the info div width and height - replace this with your own code
    // to do something useful!
    elem.closest('.container').find('.info')
      .text( this.tagName + ' width: ' + elem.width() + ', height: ' + elem.height() );
  });
  
  // Update all info divs immediately.
  $('.test').resize();
  
  // Add text after inline "add text" links.
  $('.add_text').click(function(e){
    e.preventDefault();
    $(this).parent().append( ' Adding some more text, to grow the parent container!' );
  });
  
  // Resize manually when the link is clicked, but only for the first paragraph.
  $('.add_text:first').click(function(){
    $(this).parent().resize();
  });
});

Resizing an Iframe as its content grows

While this isn't the best approach to cross-domain Iframe resizing, it is definitely useful for same-domain Iframes. The best part about this approach is that since all of the resizing code is handled in the parent frame, the child page doesn't need to be modified.

N/A

The code

$(function(){
  // Append an iFrame to the page.
  var iframe = $('<iframe src="./child/" scrolling="no"/>').insertAfter('#iframe-info');
  
  // Called once the Iframe's content is loaded.
  iframe.load(function(){
    // The Iframe's child page BODY element.
    var iframe_content = iframe.contents().find('body');
    
    // Bind the resize event. When the iframe's size changes, update its height as
    // well as the corresponding info div.
    iframe_content.resize(function(){
      var elem = $(this);
      
      // Resize the IFrame.
      iframe.css({ height: elem.outerHeight( true ) });
      
      // Update the info div width and height.
      $('#iframe-info').text( 'IFRAME width: ' + elem.width() + ', height: ' + elem.height() );
    });
    
    // Resize the Iframe and update the info div immediately.
    iframe_content.resize();
  });
});

A throttled resize event on the window object

N/A

By default, the window resize event is throttled, making event behavior consistent across all elements (this can be disabled by setting jQuery.resize.throttleWindow property to false).

Just watch the "window" info box in the top right of the page as you resize the window to see how the event fires.

The code

$(function(){
  // Bind the resize event. When the window size changes, update its corresponding
  // info div.
  $(window).resize(function(){
    var elem = $(this);
    
    // Update the info div width and height - replace this with your own code
    // to do something useful!
    $('#window-info').text( 'window width: ' + elem.width() + ', height: ' + elem.height() );
  });
  
  // Updates the info div immediately.
  $(window).resize();
});