jenwachter
8/12/2013 - 1:55 PM

jQuery plugin used to alters the CSS height of each item in the passed selector to be equal height, which is determined by the tallest item

jQuery plugin used to alters the CSS height of each item in the passed selector to be equal height, which is determined by the tallest item in the set. Useful for column layouts that need to be the same height for styling purposes.

jquery.equalizeHeight.js
content_copyfile_download
/*!
 * jQuery Equalize Height
 *
 * $(selector).equalizeHeight();
 * 
 * Alters the CSS height of each item in the passed selector to be
 * equal height, which is determined by the tallest item in the set.
 * Useful for column layouts that need to be the same height for
 * styling purposes.
 *
 * Make sure to execute inside $(window).load() so that all
 * elements inside the selector are rendered and have the
 * correct height.
 *
 * Author: Jen Wachter
 * Author URI: http://www.jenwachter.com
 * Plugin URI: https://gist.github.com/jenwachter/6210996
 * License: MIT
 */

(function ($) {

	$.fn.equalizeHeight = function (includeMargin) {

		includeMargin = includeMargin || false;

		var heights = [];
		this.each(function () {
			heights.push($(this).outerHeight(includeMargin));
		});

		var max = Math.max.apply(Math, heights);
		this.css("height", max);

	};

})(jQuery);