oliver-h
7/7/2012 - 5:37 PM

jQuery plugin to apply equal heights to children of a DOM element, with filters and targets.

jQuery plugin to apply equal heights to children of a DOM element, with filters and targets.

name = "jQuery Equal Heights Plugin"
description = "jQuery plugin to apply equal heights to children of a DOM element, with filters and targets."
version = 0.0.14
author = Aaron Klump <sourcecode@intheloftstudios.com>
/**
 * Equal Heights Plugin
 * Equalize the heights of all child elements to the tallest child
 *
 * @param object options
 *   - filter: An optional selector string to filter which children are considered.
 *   - not: An optional selector string to filter which children are NOT considered.
 *   - target: Additional selector of targets where height will be applied; these nodes
     will not be used to calculate height, but will ONLY receive the calculated
     height.
     - once: bool: Only allow each dom element to be processed 'once' by this
       function. When processed, elements receive the class
       'equal-heights-processed'. When once is set to false, this class is
       ignored. When true, elements with this class will not be reprocessed.
     - reset: bool: should the heights be removed on children before calculating
       auto heights? This removes the inline height value and allows the node to
       be auto sized.  You might set this to true when responsive is false.
     - disable: bool: Reset the height AND return without applying
       equal-heights. Use this to reverse the effects of this plugin on earlier
       elements.
     - responsive: bool: should this be applied when viewport changes size?
     - delay: milliseconds to wait before applying height after viewport changes

 *
 * Usage: $(object).equalHeights();
 *        $(object).equalHeights({filter: 'h2'});
 *
 * The second example above will process only h2 children
 *
 * @author Aaron Klump, In the Loft Studios, LLC
 * @see http://www.intheloftstudios.com
 * @see http://gist.github.com/gists/3067352
 *
 */(function(e){e.fn.equalHeights=function(t){var n=e(this);if(n.length===0)return this;e(window).load(function(){var r=e.extend({filter:null,not:null,target:null,once:!0,reset:!1,disable:!1,responsive:!0,delay:25},t),i=0,s=n.children(),o=e();r.target&&(o=n.find(r.target));r.filter&&(s=s.filter(r.filter));r.not&&(s=s.not(r.not));r.once&&(s=s.not("equal-heights-processed"));if(s.length==1)return e(this);(r.reset||r.disable)&&s.add(o).height("");if(r.disable)return e(this);s.each(function(){var t=e(this),n=t.outerHeight();i=Math.max(i,n)});r.target&&(s=s.add(o));var u="equal-heights-processed";s.addClass(u).height(i);if(r.responsive){var a;e(window).bind("resize",function(e){a||(a=setTimeout(function(){r.reset=!0;return n.equalHeights(r)},r.delay))})}n.addClass(u)});return this}})(jQuery);
/**
 * Equal Heights Plugin
 * Equalize the heights of all child elements to the tallest child
 *
 * @param object options
 *   - filter: An optional selector string to filter which children are considered.
 *   - not: An optional selector string to filter which children are NOT considered.
 *   - target: Additional selector of targets where height will be applied; these nodes
     will not be used to calculate height, but will ONLY receive the calculated
     height.
     - once: bool: Only allow each dom element to be processed 'once' by this
       function. When processed, elements receive the class
       'equal-heights-processed'. When once is set to false, this class is
       ignored. When true, elements with this class will not be reprocessed.
     - reset: bool: should the heights be removed on children before calculating
       auto heights? This removes the inline height value and allows the node to
       be auto sized.  You might set this to true when responsive is false.
     - disable: bool: Reset the height AND return without applying
       equal-heights. Use this to reverse the effects of this plugin on earlier
       elements.
     - responsive: bool: should this be applied when viewport changes size?
     - delay: milliseconds to wait before applying height after viewport changes

 *
 * Usage: $(object).equalHeights();
 *        $(object).equalHeights({filter: 'h2'});
 *
 * The second example above will process only h2 children
 *
 * @author Aaron Klump, In the Loft Studios, LLC
 * @see http://www.intheloftstudios.com
 * @see http://gist.github.com/gists/3067352
 *
 */
(function($) {
  $.fn.equalHeights = function(options) {

    var $parent = $(this);
    if ($parent.length === 0) {
      return this;
    }

    // We have to do this after the window has loaded because image height
    // cannot be used in determining heights correctly until they are fully
    // loaded.
    $(window).load(function() {

      // Create some defaults, extending them with any options that were provided
      var settings = $.extend( {
        'filter'      : null,
        'not'         : null,
        'target'      : null,
        'once'        : true,
        'reset'       : false,
        'disable'     : false,
        'responsive'  : true,
        'delay'       : 25,
      }, options);

      var tallest = 0;
      var $nodes = $parent.children();
      var $target = $();
      if (settings.target) {
        $target = $parent.find(settings.target);
      }
      if (settings.filter) {
        $nodes = $nodes.filter(settings.filter);
      }
      if (settings.not) {
        $nodes = $nodes.not(settings.not);
      }
      if (settings.once) {
        $nodes = $nodes.not('equal-heights-processed')
      }
      if ($nodes.length == 1) {
        return $(this);
      }
      // Reset height to allow for auto heights
      if (settings.reset || settings.disable) {
        $nodes.add($target).height('');
      }
      // Return here if disabling
      if (settings.disable) {
        return $(this);
      }
      // Find the tallest
      $nodes.each(function(){
        var $node = $(this);
        var height = $node.outerHeight();
        tallest = Math.max(tallest, height);
      });
      // Add additional targets, which we don't use to calculate heights
      if (settings.target) {
        $nodes = $nodes.add($target);
      }

      var processedClass = 'equal-heights-processed';
      // Apply the height
      $nodes
      .addClass(processedClass)
      .height(tallest);

      // Set this up to fire on responsive resize, if requested
      if (settings.responsive) {
        var timeout;
        $(window).bind('resize', function(e) {
          // Don't create a new timeout if we're already on one; that's bad
          if (!timeout) {
            timeout = setTimeout(function(){
              settings.reset = true;
              return $parent.equalHeights(settings);
            }, settings.delay);
          }
        });
      }

      $parent.addClass(processedClass);
    });

    return this;
  }
})(jQuery);