jQuery Same Height Columns

This requires the CSS flag below to release the min-heights – assuming the divs stack.

jQuery(document).ready(function($) {
    $window = $(window);
    var jma_same_height = function() {
        $('.same-height-wrap').each(function() {
            $this = $(this);
            // counter for successive same-height classes
            counter = 1;
            while ($this.find('.same-height-' + counter).length) {
                var highestBox = 0;
                $inner = $this.find('.same-height-' + counter);
                counter++;
                $inner.each(function() { //give us a fresh start on resize for going between
                    //stacked and not stacked
                    $(this).removeClass('tallest');
                    $(this).removeClass('not-tallest');
                });
                if ($this.css('min-height') === '23px') { //match flag in css -
                    //identifies this as a not stacked window
                    $inner.each(function() {
                        $(this).css('min-height', '');
                        // If this box is higher than the cached highest then store it
                        //remove tallest class from all others and give them not-tallest
                        //and give this one tallext class
                        if ($(this).outerHeight() > highestBox) {
                            highestBox = $(this).outerHeight();
                            $inner.each(function() {
                                if ($(this).hasClass('tallest')) {
                                    $(this).removeClass('tallest');
                                    $(this).addClass('not-tallest');
                                }
                                $(this).addClass('tallest');
                            });
                        } else {
                            $(this).addClass('not-tallest');
                        }
                    });
                    // Set the height of all those children to whichever was highest
                    $inner.css('min-height', highestBox + 'px');
                } else {
                    $this.find('*[class*="same-height-"]').css('min-height', '');
                }
            }
        });
    }
    $window.resize(jma_same_height);
    $window.load(jma_same_height);
});

jQuery(document).ready(function($) {

$window = $(window);

var jma_same_height = function() {

$('.same-height-wrap').each(function() {

$this = $(this);

// counter for successive same-height classes

counter = 1;

while ($this.find('.same-height-' + counter).length) {

var highestBox = 0;

$inner = $this.find('.same-height-' + counter);

counter++;

$inner.each(function() { //give us a fresh start on resize for going between

//stacked and not stacked

$(this).removeClass('tallest');

$(this).removeClass('not-tallest');

});

if ($this.css('min-height') === '23px') { //match flag in css -

//identifies this as a not stacked window

$inner.each(function() {

$(this).css('min-height', '');

// If this box is higher than the cached highest then store it

//remove tallest class from all others and give them not-tallest

//and give this one tallext class

if ($(this).outerHeight() > highestBox) {

highestBox = $(this).outerHeight();

$inner.each(function() {

if ($(this).hasClass('tallest')) {

$(this).removeClass('tallest');

$(this).addClass('not-tallest');

}

$(this).addClass('tallest');

});

} else {

$(this).addClass('not-tallest');

}

});

// Set the height of all those children to whichever was highest

$inner.css('min-height', highestBox + 'px');

} else {

$this.find('*[class*="same-height-"]').css('min-height', '');

}

});

}

$window.resize(jma_same_height);

$window.load(jma_same_height);

});

Add this flag. Any Css property is fine and any @media is ok (just match CSS property in jQuery – line 20 above).

/* "flag for jquery cols same height */
@media(min-width: 768px){
    .same-height-wrap {
        min-height: 23px;
    }
}
/* vertically align content */
.not-tallest>div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    -moz-transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    width: 95%;
}

/* "flag for jquery cols same height */

@media(min-width: 768px){

.same-height-wrap {

min-height: 23px;

}

/* vertically align content */

.not-tallest>div {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%) !important;

-moz-transform: translate(-50%, -50%) !important;

-webkit-transform: translate(-50%, -50%) !important;

width: 95%;

}