[jQuery] Another equal column heights plugin with jQuery

Data dodania wpisu: 09-11-2010

Due to website development we do often come across situations where some - not necessarily contiguous - items must have the same height. Of course - we can choose CSS tricks, however if these elements contents is not static, the constant parameter in stylesheet does not take enough possibilities.

Thankfully to jQuery, we can play a ruler, which measures the maximum height of all compared columns and put the match to the height's of other elements in DOM objects.

But there's a plugin ready ... ;)

Yeap, there is a plugin jQuery.equalHeight. However... jQuery plugin that I developed and show in here is a little bit different than the existing one. The major difference is, that plugin by CSSNewbie requires all items to be in the same container (to be children of some object). My plugin does not requires this thing - you are free to choose the elements to set the same height - these ones can be placed all over the layout - no no, there's no no no, there's no limits:)

Plugin is also bullIEtproof:P

(function($){
    $.fn.equalHeights = function(){
        var max = 0;
        $(this).each(function(){
            if ($(this).height() > max) {
                max = $(this).height();
            }
        });
        if ($.browser.msie && $.browser.version == 6.0) {
            $(this).each(function() {
                $(this).css({
                    'height': max,
                    'min-height': max
                });
            });
        } else {
            $(this).each(function(){
                $(this).css({
                    'height': max
                });
            });
        }
    };
})(jQuery);

To call this one, you just have to set the items to be equal-height as the method parameters:

$(document).ready(function(){
    $('#column1, #header, #adwords').equalHeights();
});

Comments

This entry has no comments yet

Comments closed...

DesignEnd on Facebook

Inspiration