Equal height jQuery plugin

Sometimes you need to have elements to be the same height, but you can’t achieve it by using CSS. This could be because the elements don’t share the same parent element or you can’t use display:table and flexbox options. Here’s a little quick and dirty plugin which checks if elements are on the same row, if this is the case they will be stretched to match the tallest element. Note that you can feed the plugin any collection of jQuery selectors, even completely different elements.

Download the source or minified production ready plugin from GitHub.

The only two options (right now) can disable auto resize and load binding.

The plugin should typically be initialised on document ready. But you can call it at any time.
Window resize and load events are bound by the plugin automatically. This can be disabled in the options.

$( document ).ready(function() {

	// make all list items with class category the same height
	$('li.category').equalHeights();

	// make different elements the same height
	$('p.intro, img.thumbnail').equalHeights();

	// only resize once now (not on window.resize and window.load)	
	$('.nav button').equalHeights({
		onResize: false, 
		onLoad: false 
	});
});

Live examples

See the Pen jQuery Equal Heights Plugin examples by Status201 (@status201) on CodePen.18405

/**
 * Equal heights little jQuery plugin by Status201
 * @version 1.02
 * @requires jQuery 1.7+
 * @author Gijs Oliemans <gijs[at]status201.nl>
 * @license MIT
 */

(function( $ ) {

	$.fn.equalHeights = function( options ) {
		var defaults = {
			onResize: 	true,
			onLoad: 	true
		};
		var settings = $.extend( {}, defaults, options );
		
		var topPositions = {},
			foundPosition = 0,
			$el = [],
			curHeight = 0,
			topPosition = 0,
			resizeTimer,
			$elements = $(this);
	 
		if ($elements.length < 2) return this;
		
		if ( settings.onResize ) {
			$( window ).resize(function() {
				if ( resizeTimer ) window.clearTimeout(resizeTimer);
				resizeTimer = window.setTimeout(function() {
					$elements.equalHeights( { onResize: false, onLoad: false } );
				}, 100);
			});
		};

		if ( settings.onLoad ) {
			$( window ).load(function() {
				$elements.equalHeights( { onResize: false, onLoad: false } );
			});
		}
	 
		$elements.each(function() {
			$el = $(this);
			$el.height('auto');// restore original height from possible previous equalHeights()
			curHeight = $el.height();
	 
			if ( curHeight > 0 ) {
				topPosition = $el.position().top;
				foundPosition = topPosition in topPositions;
					 
				if(!foundPosition) {
					// First at this position, only store and set height
					topPositions[topPosition] = curHeight;
					// $el.height(topPositions[topPosition]); // Don't set height for the first (possibly only) element on this position
				} else {
					if(curHeight > topPositions[topPosition]) {
						// Tallest so far for this position, remember tallest and stretch others on this position
						topPositions[topPosition] = curHeight;
						$($elements).filter(function() {
							return $(this).position().top == topPosition;
						}).height(curHeight);
					} else {
						// Same or less high, maximize this one
						$el.height(topPositions[topPosition]);
					}
				}
			}
		});
	 
		return this;
	 
	};

}( jQuery ));