Equal Height Columns with jQuery

There are a ton of great solutions out there for creating equal heights columns – so many that it can get a bit daunting to choose one. Here’s a simple jQuery snippet we’ve started using when CSS alone won’t suffice. Thanks to Rob Glazebrook for the building blocks, to which we added some special functionality including binding the equal height-ing to orientation change (for mobile) and window resize, as well as the option to specify a breakpoint above which the functionality should work.

/**
 * Equal Heights Plugin
 * 
 * Equalize the heights of elements. Great for columns or any elements
 * that need to be the same size (floats, etc).
 *
 * Based on Rob Glazebrook's (cssnewbie.com) script
 *
 * Additions
 *  - ability to include a break point (the minimum viewport width at which the script does anything)
 *  - binds the script to run on load, orientation change (for mobile), and when resizing the window
 *
 * Usage: jQuery(object).equalHeightColumns(minHeight, maxHeight, breakPoint);
 * 
 */

/* The calls
----------------------------------------- */ 
jQuery(document).ready(function() {
	
	// Set elements to the height of tallest element
	jQuery(".cols").equalHeightColumns();

	// Set elements to a minimum height
	jQuery(".cols").equalHeightColumns(400);

	// Set elements to a maximum height (scrollbars added if necessary)
	jQuery(".cols").equalHeightColumns(null,400);

	// Set elements within a min/max height range (scrollbars added if necessary)
	jQuery(".cols").equalHeightColumns(100,400);

	// Set elements to the height of the tallest element only when the viewport is wider than 768px
	jQuery(".cols").equalHeightColumns(null, null,768);


});


/* The function
----------------------------------------- */
(function(jQuery) {
 	jQuery.fn.equalHeightColumns = function(minHeight, maxHeight, breakPoint) {
 		var items = this;
 		breakPoint = breakPoint || 0;

 		// Bind functionality to appropriate events
 		jQuery(window).bind('load orientationchange resize', function() {
 			tallest = (minHeight) ? minHeight : 0;
 			items.each(function() {
 				jQuery(this).outerHeight('auto');
 				if(jQuery(this).outerHeight() > tallest) {
 					tallest = jQuery(this).outerHeight();
 				}
 			});

 			// Get viewport width (taking scrollbars into account)
 			var e = window;
 			a = 'inner';
 			if (!('innerWidth' in window )) {
 				a = 'client';
 				e = document.documentElement || document.body;
 			}
 			width = e[ a+'Width' ];

 			// Equalize column heights if above the specified breakpoint
 			if ( width >= breakPoint ) {
 				if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
 				return items.each(function() {
 					jQuery(this).outerHeight(tallest);
 				});
 			}
 		});
 	}

 })(jQuery);