jQuery Equal Height Children Methods

Glenn Glenn's Blog 0 Comments

Here are a number of useful snippets that will find the height of child elements in a parent div/ul etc and unify the hight throughout to the highest of all of them:-

Method 1 – This works best across a list with multiple rows. It takes each row in turn and makes it the highest height of the tallest element in that row. This means that there is no lost space below each row, which we feel looks much neater than all rows of equal height.


	<script>
		
		// these are (ruh-roh) globals. You could wrap in an
		// immediately-Invoked Function Expression (IIFE) if you wanted to…
		var currentTallest = 0,
		    currentRowStart = 0,
		    rowDivs = new Array();
		
		function setConformingHeight(el, newHeight) {
			// set the height to something new, but remember the original height in case things change
			el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
			el.height(newHeight);
		}
		
		function getOriginalHeight(el) {
			// if the height has changed, send the originalHeight
			return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
		}
		
		function columnConform() {
		
			// find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
			$('#yourdiv > ul').each(function() {
			
				// "caching"
				var $el = $(this);
				
				var topPosition = $el.position().top;
		
				if (currentRowStart != topPosition) {
		
					// we just came to a new row.  Set all the heights on the completed row
					for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);
		
					// set the variables for the new row
					rowDivs.length = 0; // empty the array
					currentRowStart = topPosition;
					currentTallest = getOriginalHeight($el);
					rowDivs.push($el);
		
				} else {
		
					// another div on the current row.  Add it to the list and check if it's taller
					rowDivs.push($el);
					currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest);
		
				}
				// do the last row
				for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);
		
			});
		
		}
		
		
		$(window).resize(function() {
			columnConform();
		});
		
		// Dom Ready
		// You might also want to wait until window.onload if images are the things that
		// are unequalizing the blocks
		$(function() {
			columnConform();
		});
		
	</script>
	

Method 2


    <script type="text/javascript">
/**
 * Equal Heights Plugin
 * Equalize the heights of elements. Great for columns or any elements
 * that need to be the same size (floats, etc).
 * 
 * Version 1.0
 * Updated 12/109/2008
 *
 * Copyright © 2008 Rob Glazebrook (cssnewbie.com) 
 *
 * Usage: $(object).equalHeights([minHeight], [maxHeight]);
 * 
 * Example 1: $(".cols").equalHeights(); Sets all columns to the same height.
 * Example 2: $(".cols").equalHeights(400); Sets all cols to at least 400px tall.
 * Example 3: $(".cols").equalHeights(100,300); Cols are at least 100 but no more
 * than 300 pixels tall. Elements with too much content will gain a scrollbar.
 * 
 */

(function($) {
   $.fn.equalHeights = function(minHeight, maxHeight) {
      tallest = (minHeight) ? minHeight : 0;
      this.each(function() {
         if($(this).height() > tallest) {
            tallest = $(this).height();
         }
      });
      if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
      return this.each(function() {
         $(this).height(tallest).css("overflow","auto");
      });
   }
})(jQuery);
</script>


<script type="text/javascript">
$(document).ready(function() {
	$(".equal_height").equalHeights(100,320).css("background-color","transparent");
});
</script>
    

Method 3

  
       <script type="text/javascript">
    $(document).ready(function(){
	//set the starting bigestHeight variable
	var biggestHeight = 0;
	//check each of them
	$('.equal_height').each(function(){
		//if the height of the current element is
		//bigger then the current biggestHeight value
		if($(this).height() > biggestHeight){
			//update the biggestHeight with the
			//height of the current elements
			biggestHeight = $(this).height();
		}
	});
	//when checking for biggestHeight is done set that
	//RUN height to all the elements
	$('.equal_height').height(biggestHeight);

});
    </script>
   

Method 4


<script type="text/javascript">
// make sure the $ is pointing to JQuery and not some other library
(function($){
    // add a new method to JQuery

    $.fn.equalHeight = function() {
       // find the tallest height in the collection
       // that was passed in (.column)
        tallest = 0;
        this.each(function(){
            thisHeight = $(this).height();
            if( thisHeight > tallest)
                tallest = thisHeight;
        });

        // set each items height to use the tallest value found
        this.each(function(){
            $(this).height(tallest);
        });
    }
})(jQuery);
</script>


<script type="text/javascript">
// call the above
$(document).ready(function() { 
         $('.equal_height').equalHeight();

  });
</script>

Method 5 – Works well with WordPress as we are using ‘jQuery’ rather than $


<script type="text/javascript">

/*--------------------------------------------------------------------
* The following source code is a modified version of the original plugin "EqualHeights" for jQuery.
*
* JQuery Plugin: "EqualHeights"
* by:    Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
*
* Copyright © 2009 Filament Group
* Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)

* JQuery Plugin : "EqualHeights-Light"
* Modified by : Michael (http://www.webdevcodex.com)
* Description : Does not use px-em dependencies based from the original version. Also fixes a small bug which does not allow divs to be of equal heights if there are more than 2 divs.

------------------------------------------------------------------------*/

jQuery.fn.equalheight = function() {
jQuery(this).each(function(){
var currentTallest = 0; //create currentTallest var

//go through every child of the mother div
jQuery(this).children().each(function(i){
//keep checking every child's height and get the height of the tallest div
if (jQuery(this).height() > currentTallest) { currentTallest = jQuery(this).height(); }

});

//set currentTallest as pixels
currentTallest = currentTallest+"px";

//If browser is Microsoft Internet explorer, then use css "height: yypx"
if (jQuery.browser.msie && jQuery.browser.version == 6.0) { jQuery(this).children().css({'height': currentTallest}); }

//use css "min-height or height: yypx"
jQuery(this).children().css({'min-height': currentTallest});
});
return this;
};
    </script>


<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".equal_height").equalheight();
});
</script>

About the Author
jQuery Equal Height Children Methods jQuery Equal Height Children Methods 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and Back-end Developer & New Media Specialist with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries built up over a number of years.

Leave a Reply

Your email address will not be published. Required fields are marked *