Skip to content

alisalti1992/jquery-same-height

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 

Repository files navigation

jquery-same-height

jQuery function can be used to make selected elements the same height.

jQuery(document).ready(function ($) {
    $(window).load(function () {
        mam_set_auto_height();
    });
    $(window).resize(function () {
        mam_set_auto_height();
    });
    mam_set_auto_height();
});
function mam_set_auto_height() {
    // reset sh-active class
    $('.sh-active').css('height', 'auto');
    $('.sh-active').removeClass('sh-active');

    // get all elemets with same height data
    $ashElements = $("[data-same-height]");
    // loop through the elements 
    $ashElements.each(function () {
        $element = $(this);

        // skip if it's been configured already or not
        if ($element.hasClass('sh-active')) {
            return true;
        }
        // get group to set same height
        var _group = $element.attr('data-same-height');

        // get group elements
        $groupElements = $('[data-same-height="' + _group + '"]');

        // Cache the highest
        var highestBox = 0;

        // loop throgh the group elements
        $groupElements.each(function () {
            // If this box is higher than the cached highest then store it
            if ($(this).height() > highestBox) {
                highestBox = $(this).height();
            }
        });
        // Set the height of all those children to whichever was highest 
        $groupElements.addClass('sh-active').height(highestBox);
    });
}

Usage

<!-- Example 1 -->
<div class="col-md-4" data-same-height="group-1"></div>
<div class="col-md-4" data-same-height="group-1"></div>
<div class="col-md-4" data-same-height="group-1"></div>

<!-- Example 2 -->
<div class="somediv">
    <div data-same-height="group-2"></div>
</div>
<div class="someotherdiv">
    <div data-same-height="group-2"></div>
</div>

About

jQuery function can be used to make selected elements the same height.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published