jQuery Equal Height

equal-height.js

$.fn.equalheight = function( remove ){

	if( remove == false ){
		$.each( this, function(){
			this.css('height','auto');
		});
		return;
	}

	// Reset heights from the last viewport resize so that values do not get wacky-large.
	this.height('auto');
	var $selection = this;
	var $groups = [];
	while( $selection.length > 1 ){// If $selection.length is greater than 1, then it must be 2, meaning there are at least 2 equal-height divs left. This will prevent an infinite loop if there is an equal-height div without a partner equal-height div.
		// Find an equal-height group.
		$groups.push( $selection.eq(0).siblings('.equal-height').addBack() );
		// Reduce selection by the latest equal-height group, because they have already been added to groups. This leaves only .equal-height elements that have not been added to a group.
		$selection = $selection.not( $groups[ $groups.length - 1 ] );

		// Test the group that was just added. Drop it if it only has 1 element - it doesn't make any sense to have a lone equal-height element.
		if( $groups[ $groups.length - 1 ].length < 2 ){
		// If the last group only has 1 element...
			// Remove the last element.
			$groups.pop();
		} else {
			// Make sure the top positions are different. If they aren't different, then they aren't stacked, and they should be equal height.
			var group = $groups[ $groups.length -1 ];// Latest group
			var group_length = group.length;
			var top_positions = [];
			for( var i = 0; i < group_length; i++ ){
				top_positions.push( $(group[i]).position().top );
			}
			for( var i = 0; i < group_length; i++ ){
				if( top_positions[0] != top_positions[i] ){
					$groups.pop();
					break;
				}
			}
		}
	}

	// The groups have been put into the $groups array. Time to make them equal height.
	// Iterate through the groups within the $groups variable.
	for( var i = 0; i < $groups.length; i++ ){
		var highest_px = 0;
		// Iterate through the selected jQuery objects within the current group.
		for( var j = 0; j < $groups[i].length; j++ ){
			if( $groups[i].eq(j).innerHeight() > highest_px ){
			// The current object has the largest height thus far.
				// Set it to the highest_px variable for later.
				highest_px = $groups[i].eq(j).innerHeight();
			}
		}

		// See if the positions don't match. If they don't match, don't apply the new height.
		var current_position_top = [];
		for( var j = 0; j < $groups[i].length; j++ ){
			current_position_top.push( $groups[i].eq(j).position().top );
		}


		// Iterate through the selected jQuery objects within the current group again and resize them this time.
		for( var j = 0; j < $groups[i].length; j++ ){
			// Set height to highest height for all objects.
			$groups[i].eq(j).height( highest_px );
		}
	}
};

$(window).load(function() {
	$('.equal-height').equalheight();
});


$(window).resize(function(){
	$('.equal-height').equalheight();
});