Simple jquery equalHeight cross browser fix for 960gs

As the title says, its a simple fix for those who usesĀ 960 grid system. I come across this problem while developing my new wordpress theme which requires an equal height for multiple columns so layout won’t mess up. I don’t know if this is already been posted but anyhow i would like to share how did i fix it.

JQUERY EQUAL HEIGHT CODE:

function equalHeight(group) {
	tallest = 0;
	extended = 0;
	group.each(function() {
		thisHeight = $(this).height();
		if(thisHeight > tallest) {
			tallest = thisHeight;
		}
	});
	group.height(tallest);
}

USAGE:

$(document).ready(function() {
	equalHeight($(".recent-article"));
	equalHeight($(".footer-col"));
});

but for some reason under 960 grid system the script above did not get the exact height of a column so as the result the layout mess up like hell for google chrome browser and safari.

WHAT DID I DO:
I call the equalHeight function directly on onload function.

window.onload = equalHeight($(".recent-article"));

equalheight

i really don’t know how to explain this but it really works. hope this helps.

Please help us spread the word!

NO RESPONSE TO "Simple jquery equalHeight cross browser fix for 960gs"

Leave a Reply