jQuery Equal height divs

Let jQuery set the all variable height <div>'s inside the #container to the tallest <div> height.

The core script:

$(window).load(function(){

	//LOOP AT ALL ITEMS WITH .item
	var itemH = 0;
	
	$(".item").each(
		function(i){
			var iH = $(this).height();
			if (iH > itemH) {
				itemH = iH;
			}
		}
	);

	//SET ALL ELEMENTS WITH .item to the TALLEST height
	$(".item").css({"height":itemH});

});
	

Note: Safari executes javascripts in parallel with the content. So it doesn't get the heights of <img> items when the DOM is ready. The work around is to place height attributes in <img> like the old days or use $(window).load (see code above) instead of the usual $(document).ready

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Second example

Place it within a function. Much easier to target new elements within a page.


function eqh(el) {

	//LOOP AT ALL ITEMS WITH .item
	var itemH = 0;
	
	$(el).each(
		function(i){
			var iH = $(this).height();
			if (iH > itemH) {
				itemH = iH;
			}
		}
	);

	//SET ALL ELEMENTS WITH .item to the TALLEST height
	$(el).css({"height":itemH});

}
	

You could call the script when you need it:

<script type="text/javascript">
<!--
	eqh("#blah p");
-->
</script>
	

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit.


Post-it notes example: