getButterfly Logo getButterfly

I have recently used this function for our ImagePress plugin. We needed to make all the boxes use the same height, after all of them have been loaded.

For this DOM structure:

<div class="ip-list">
    <div class="ip-box">my content here</div>
    <div class="ip-box">my content here</div>
    <div class="ip-box">my content here</div>
</div>

I have used this function:

jQuery(window).load(function() {
    equalheight = function(container) {
        var currentTallest = 0,
            currentRowStart = 0,
            rowDivs = new Array(),
            $el,
            topPosition = 0;

        jQuery(container).each(function() {
            $el = jQuery(this);
            jQuery($el).height('auto');
            topPosition = $el.position().top;

            if (currentRowStart != topPosition) {
                for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
                    rowDivs[currentDiv].height(currentTallest);
                }
                rowDivs.length = 0;
                currentRowStart = topPosition;
                currentTallest = $el.height();
                rowDivs.push($el);
            } else {
                rowDivs.push($el);
                currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
            }

            for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
                //console.log(currentTallest);
                rowDivs[currentDiv].height(currentTallest);
            }
        });
    }

    //console.log('creating equal heights...');
    equalheight('.ip-list .ip-box');
});

jQuery(window).resize(function(){
    equalheight('.ip-list .ip-box');
});

That’s it. Note the jQuery() notation — instead of $() — for WordPress compatibility.


Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.



If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

Leave a Reply

Your email address will not be published. Required fields are marked *