jQuery special events

Custom resize event: minimal 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: minimal 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($){
  
  // A collection of elements to which the resize event is bound.
  var elems = $([]),
  
    // An id with which the polling loop can be canceled.
    timeout_id;
  
  // Special event definition.
  $.event.special.resize = {
    setup: function() {
      var elem = $(this);
      
      // Add this element to the internal collection.
      elems = elems.add( elem );
      
      // Initialize default plugin data on this element.
      elem.data( 'resize', { w: elem.width(), h: elem.height() } );
      
      // If this is the first element to which the event has been bound,
      // start the polling loop.
      if ( elems.length === 1 ) {
        poll();
      }
    },
    teardown: function() {
      var elem = $(this);
      
      // Remove this element from the internal collection.
      elems = elems.not( elem );
      
      // Remove plugin data from this element.
      elem.removeData( 'resize' );
      
      // If this is the last element to which the event was bound, cancel
      // the polling loop.
      if (...