namklabs · February 20, 2014 16:46 · Feb 20, 2014
diff --git a/equal-height.js b/equal-height.js
@@ -0,0 +1,77 @@
+$.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();
+});