equalheight.js 1.1.1

README.md

equalheight.js

This script sets the height of inline-block elements that are displayed in a single line.

It is based on the script from http://css-tricks.com/equal-height-blocks-in-rows/. I added some bug fixes, nice formatting and a version number.

Usage

equalheight(jQuerySelector);

You can check the version with:

equalheight.version;

equalheight.js

(function ($)
{
    'use strict';
    
    var equalheight = function (container)
    {
        var currentTallest = 0;
        var currentRowStart = 0;
        var rowDivs = [];
        var $el;
        var topPosition = 0;
        var currentDiv;
    
        $(container).each(function ()
        {
            $el = $(this);
            $el.height('auto');
            topPosition = $el.position().top;
    
            // alinnert - 2015-05-11
            // ---------------------
            // `display: inline-block;` doesn't seem to place the top edge of elements
            // at the exact same y-position when they flow into a second line.
            // Noticed this behaviour in Chrome and Firefox.
            // That's why I added a tolerance threshold of 1 pixel.
            if (currentRowStart < topPosition - 1 || currentRowStart > topPosition + 1) {
                for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
                    rowDivs[currentDiv].height(currentTallest);
                }
    
                rowDivs = [];
                currentRowStart = topPosition;
                currentTallest = $el.height();
                rowDivs.push($el);
            }
            else {
                rowDivs.push($el);
                currentTallest = Math.max(currentTallest, $el.height());
            }
        });
        
        for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
            // alinnert - 2015-05-18
            // ---------------------
            // jQuerys `.height(value)` method ignores `box-sizing: border-box;`.
            // That's why I had to replace it with the `.css(key, value)` method.
            rowDivs[currentDiv].css('height', currentTallest);
        }
    };
    
    equalheight.version = '1.1.1';

    window.equalheight = equalheight;
})(jQuery);