Archive

Archive for July, 2009

Setting equal CSS heights using jQuery.

July 2nd, 2009 No comments

I recently needed to do this and found a solution over at filament group, however, I wanted the flexibility to specify the elements to work with.

This is what I came up with:

(function($) {
    $.equalHeight = function(element) {
        var maxHeight = 0;
        $.each(element, function() {
            if ($(this).height() > maxHeight) {
                 maxHeight = $(this).height();
            }
        });
        $.each(element, function() {
            $(this).height(maxHeight);
        });
    }
})(jQuery);

And an example of usage:

var obj = {
    one:$("#pinned .content"),
    two:$("#top10 .content")
};
$.equalHeight(obj);

Demo:







Categories: All, JavaScript, Web
Tags: ,