Equal Height Columns jQuery

equal-height-columns.js

/**
 * 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);