mcgraths
2/18/2015 - 8:07 PM

Handy Javascript function for making elements in a row even/equal height. Relies on jQuery.

Handy Javascript function for making elements in a row even/equal height. Relies on jQuery.

//set this for the elements you want equal height
var jquery_selector = '.main-content .story-block .thumbnail h3';

equalheight = function(container) {

	var currentTallest = 0,
	     currentRowStart = 0,
	     rowDivs = new Array(),
	     $el,
	     topPosition = 0;
	 
	$(container).each(function() {

		$el = $(this);
		$($el).height('auto')
		topPostion = $el.offset().top;

		if (currentRowStart != topPostion) {
			for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
				rowDivs[currentDiv].height(currentTallest);
			}
			rowDivs.length = 0; // empty the array
			currentRowStart = topPostion;
			currentTallest = $el.height();
			rowDivs.push($el);

		} else {
			rowDivs.push($el);
			currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
		}
		for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
			rowDivs[currentDiv].height(currentTallest);
		}
	});
}

$(window).load(function() {
  equalheight(jquery_selector);
});

$(window).resize(function(){
  equalheight(jquery_selector);
});