Skip to main content

jQuery equal height and width plugin.

(function ($) {
  'use strict';

  /**
   * jQuery Equal Height and Width Plugin - v2.0, 07.24.2008
   *
   * Compares the heights or widths of the top-level children of a provided
   * element and sets their min-height to the tallest height (or width to widest
   * width). Sets in em units by default if pxToEm() method is available.
   *
   * Modifications to Original
   *
   *  - Cache selectors for huge performance gain.
   *  - Remove dependency to pixel and em conversion.
   *  - Remove old IE shims.
   *
   * Jon LaBelle <jon@tech0.com>
   *
   * @example
   *   $(selector).equalHeights();
   *
   * Copyright (c) 2007 Filament Group Licensed under GPL
   * https://github.com/filamentgroup/jQuery-Equal-Heights
   */

  $.fn.equalHeights = function () {
    $(this).each(function () {
      var currentTallest = 0,
        $self = $(this),
        $children = $self.children();

      $children.each(function () {
        var $child = $(this);
        if ($child.height() > currentTallest) {
          currentTallest = $child.height();
        }
      });

      $children.css({'min-height': currentTallest });
    });

    return this;
  };

  $.fn.equalWidths = function () {
    $(this).each(function () {
      var currentWidest = 0,
        $self = $(this),
        $children = $self.children();

      $children.each(function () {
        var $child = $(this);
        if ($child.width() > currentWidest) {
          currentWidest = $child.width();
        }
      });

      $children.css({'min-width': currentWidest });
    });

    return this;
  };

})(jQuery);