Equal Heights & EHAlways

by Michael Mandarino

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<h1>EqualHeights - v5.0</h1>
<h2>Last Update: Sept 27th 2023 by Michael Mandarino</h2>
<br />
<code>
  <strong>For Sitefinity sites, add the following code for sfPageEditor...</strong><br />
  .sfPageEditor {
    .equalheights {
        height: auto !important;
    }
  }
</code>
<br />
<br />

<section class="main">

    <div class="equalheights">Lorem ipsum dolor sit amet, autem dolor at est. Ut vel tempor copiosae indoctum, cu.</div>

    <div class="equalheights">Lorem ipsum dolor sit amet, dico quas no sit. An mea falli libris eleifend, tation dolore conclusionemque has cu. Nam democritum philosophia id, ad justo atomorum mel. Usu eu perpetua urbanitas interesset. Ea suas sapientem qui, mei ullum maiestatis
        ne.
    </div>

    <div class="equalheights" style="width: 100%;">Lorem ipsum dolor sit amet, laoreet referrentur nec ut, pro dicant verear percipit ex. Et laudem partem explicari qui, ad.</div>

    <div class="equalheights">Lorem ipsum dolor sit amet, legere cetero aeterno has ne, eu eum lucilius liberavisse. Mucius impetus rationibus vim no, malis eleifend usu in, tamquam copiosae nec ea. Et inani novum.</div>

    <div class="equalheights" style="padding: 4em;">Lorem ipsum dolor sit amet.</div>

    <div class="equalheights">Lorem ipsum dolor sit amet, nec consul definitionem id. Ne mea liber audire.</div>
    
    <div style="display: none;" class="equalheights">Goodbye World!</div>

    <div class="equalheights">Lorem ipsum dolor sit amet, utinam albucius sit et, cum.</div>

    <div class="equalheights">Ad graece meliore vim. Ex hinc natum dissentiet. Ad graece meliore vim. Ex hinc natum dissentiet. Ad graece meliore vim. Ex hinc natum dissentiet.</div>

    <div class="equalheights">Ad illum vituperatoribus pri, duo no.</div>

    <div class="equalheights">mollis aperiam convenire ut vel, altera audiam sed id. Ullum accumsan hendrerit ei vel, omnesque consequuntur sit no....

SCSS

/* Base Styles */

*,
*:after,
*:before {
    box-sizing: border-box;
}

body {
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: 16px;
    padding: 0.5em;
}

h1 {
	color: #61bb46;
    font-size: 2em;
}

h2 {
    font-size: 0.75em;
    margin-bottom: 1em;
}

strong {
    font-weight: bold;
}


/* Main Styles */

section.main div {
    background: #61bb46;
    border: solid 4px #fff;
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    margin-right: -4px;
    padding: 1em;
    vertical-align: top;
    width: 33.333%;
}

JavaScript

var FW = FW || {};

FW.EqualHeights = function (container) {
    // Version 5.0
    var currentRowStart = 0;
    var rowElements = [];
    var topPosition = 0;

    $(container).each(function () {
        var $el = $(this);
        $el.css('height', 'auto'); // Reset element height

        topPosition = $el.position().top;

        if (topPosition === currentRowStart) { // Element is in the same row
            rowElements.push($el);
        } else { // Element starts a new row
            // Set all elements in the previous row to match the tallest
            if (rowElements.length > 1) {
                var maxElementHeight = 0;
                $.each(rowElements, function () {
                    maxElementHeight = Math.max(maxElementHeight, $(this).outerHeight());
                });
                $.each(rowElements, function () {
                    $(this).outerHeight(maxElementHeight);
                });
            }
            // Start a new row
            rowElements = [$el];
            currentRowStart = topPosition;
        }
    });

    // Set heights for the last row
    if (rowElements.length > 1) {
        var maxElementHeight = 0;
        $.each(rowElements, function () {
            maxElementHeight = Math.max(maxElementHeight, $(this).outerHeight());
        });
        $.each(rowElements, function () {
            $(this).outerHeight(maxElementHeight);
        });
    }
};


$(document).ready(function() {
    if ($('.sfPageEditor').length === 0) {
        FW.EqualHeights('.equalheights');
    }
});


$(window).load(function() {
	if ($('.sfPageEditor').length === 0) {
		FW.EqualHeights('.equalheights');
	}
});

$(window).resize(function() {
    if ($('.sfPageEditor').length === 0) {
        FW.EqualHeights('.equalheights');
    }
});