Skip to content

Equal heights

Usage:

    jQuery(itemsContainer).esEqual({
        itemSelector: ".item",
        maxAuto: false,
        maxAutoWidth: 480,
        perRow: false,
        extraAttributes:[]
    });

Source code:

 jQuery.fn.esEqual = function( options ) {

        var itemsContainer = jQuery(this);
        var settings = jQuery.extend({
            itemSelector: ".item",
            maxAuto: false,
            maxAutoWidth: 480,
            perRow: false,
            extraAttributes:[]
        }, options);

        function equalHeights(){
            var windowWidth = jQuery(window).width();
            itemsContainer.each(function(){
                var items = jQuery(this).find(settings.itemSelector);
                var equalHeight = 0;

                if(settings.maxAuto && (windowWidth <= settings.maxAutoWidth)){
                    items.height('auto');
                    if (typeof settings.extraAttributes !== 'undefined' && settings.extraAttributes.length > 0) {
                        $.each(settings.extraAttributes, function( index, value ) {
                            items.css(''+value+'','');
                        });
                    }
                } else {
                    items.height('auto');
                    if (typeof settings.extraAttributes !== 'undefined' && settings.extraAttributes.length > 0) {
                        $.each(settings.extraAttributes, function( index, value ) {
                            items.css(''+value+'','');
                        });
                    }
                    if(!settings.perRow){
                        items.each(function(){
                            var offsetTop = jQuery(this).offset().top;
                            var itemHeight = jQuery(this).height();
                            if(itemHeight > equalHeight){
                                equalHeight = itemHeight;
                            }
                        });
                        items.height(equalHeight);
                        if (typeof settings.extraAttributes !== 'undefined' && settings.extraAttributes.length > 0) {
                            $.each(settings.extraAttributes, function( index, value ) {
                                items.css(''+value+'',equalHeight+'px');
                            });
                        }

                    } else {
                        var offsetTop = 0;
                        var itemIndex = 0;
                        var itemsCount = items.length;
                        items.each(function(){
                            itemIndex++;
                            var itemOffsetTop = jQuery(this).offset().top;
                            var itemHeight = jQuery(this).height();
                            if(itemOffsetTop > offsetTop){
                                offsetTop = itemOffsetTop;
                                jQuery('.equal-calculate').height(equalHeight).removeClass('equal-calculate');
                                equalHeight = itemHeight;
                            } else if(itemHeight > equalHeight){
                                equalHeight = itemHeight;
                            }
                            jQuery(this).addClass('equal-calculate');
                            jQuery('.equal-calculate').height(equalHeight);

                            if(itemIndex == itemsCount){
                                jQuery('.equal-calculate').removeClass('equal-calculate');
                            }
                        });
                    }

                }
            });
            jQuery(window).trigger('esEqualComplete');
        }

        equalHeights();

        jQuery(window).on('resize',function(){
            equalHeights();
        });

        jQuery(window).on('load',function(){
            equalHeights();
        });

        jQuery(window).on('esAjaxLoad',function(){
            equalHeights();
        });

    };