Equal Height jQuery

Equal Height jQuery.markdown

Equal Height jQuery

Equal height elements using jquery this works well for dashboard structures.

A Pen by Alan Parsons on CodePen.

License.

script.js

jQuery.fn.equalHeights = function(){

    var $this = $(this),
        currentTallest = 0,
        equalAtt = $this.attr('data-equal'),
        equalArr = equalAtt.split('|'),
        l = equalArr.length;

    for ( var u = 0; u < l; u++ ) {
        var $el = $(equalArr[u]);
        $el.height('auto');
        if (parseInt($el.css('height')) > currentTallest) currentTallest = parseInt($el.css('height'));
    }

    for ( var i = 0; i < l; i++ ) {
        var $el = $(equalArr[i]);
        $el.css('height', currentTallest + 'px');

        if($el.attr('data-equal-split')) {
            equalArr = $el.attr('data-equal-split').split('|');
            var newHeight = currentTallest/equalArr.length;
            for ( var k = 0; k < equalArr.length; k++ ) {
                var $el = $(equalArr[k]);
                $el.css('height', newHeight + 'px');
            }
        }

    }

}

$('[data-equal]').each(function(){ $(this).equalHeights(); });