jQuery special events

Custom resize event: heavy on the polling http://benalman.com/news/2010/03/jquery-special-events/

by Ben Alman

HTML

<h1>
    <a href="http://benalman.com/news/2010/03/jquery-special-events/" target="_top">jQuery special events</a>
    &raquo; Custom resize event: heavy on the polling
</h1>

<p class="intro">(click links, resize the window)</p>

<div id="test">
    <div id="a">
        <div id="b"></div>
        <div id="c"></div>
        <div id="d"></div>
    </div>
</div>

<div id="log"></div>

CSS

body { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; }
h1 { font-weight: 700; font-family: "Gill Sans", "Gill Sans MT", Arial, Helvetica, sans-serif; }
h1, a { color: #913D00; }
a:hover { color: #FF7F00; }
h1 { font-size: 120%; margin-bottom: 0.6em; }
.intro { font-style: italic; margin-top: 0.5em; }

#test div {
    border: 1px solid #000;
    margin: 1em 0;
    padding: 0.5em 1em;
}

#a {
    padding-bottom: 0 !important;
}

#log {
    margin-top: 1em;
}

JavaScript

$(function(){
    
    function log(){
        $('#log').prepend([].join.call(arguments,', ')+'<br/>');
    };
    
    // This is just for the "add content" links.
    $('<a href="#">add content</a>')
        .prependTo('#test div')
        .click(function(){
            $(this).after('<br/>Some more content! Some more content!');
            return false;
        });
    $('#test div').prepend('<span/> ');
    
    // Bind resize event handlers.
    var i = 0;
    $('#test div').resize(function(event){
        var div = $(this),
            size = div.width() + 'x' + div.height();
        $(this).children('span').text( this.id + ' ' + size );
        log( ++i, '#' + this.id, size );
    });
    
    // Trigger resize handler manually.
    $('#test div').resize();
});

//////////////////////////////////////////////////
// THE FOLLOWING CODE IS TAKEN FROM THE EXAMPLE //
//////////////////////////////////////////////////

(function($){
  
  // Special event definition.
  $.event.special.resize = {
    setup: function() {
      var elem = $(this);
      
      // Initialize default plugin data on this element.
      elem.data( 'resize', { w: elem.width(), h: elem.height() } );
      
      // Start polling loop for this element.
      poll( elem );
    },
    teardown: function() {
      var elem = $(this),
        data = elem.data( 'resize' );
      
      // Since no more "resize" events are bound to this element, cancel
      // polling loop.
      clearTimeout( data.timeout_id );
      
      // Remove plugin data from this element.
      elem.removeData( 'resize' );
    }
  };
  
  // As long as a "resize" event is bound, this function will execute
  // repeatedly.
  function poll( elem ) {
    
    var width = elem.width(),
      height = elem.height(),
      data = elem.data( 'resize' );
    
    // If element size has changed since the last time, update the element
    // data store and trigger the "resize" event. Since the event shouldn't
    // propagate,...