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.

COMMENTS ARE CLOSED

  1. Lester Hein May 22, 2010 at 11:08 am | Permalink |

    where would you use this is the newspress theme? My recent articles display with unequal heights when views in Google chrome or Safari.

News & Updates

Our Sponsors

themeforest

Advertise Here