WPDD

WordPress Develop & Design

Equal Height Divs

Written by

Yaniv Sasson

in

Query. I have many divs with the class “text-inner” that has many height because of the text that is in the divs. How to make all of them the same height by the size of the height’s div?

but what if i don’t have the div with the class row ?

can you identify which div has style=”display: none”?

<!DOCTYPE html>
<html>
<head>
    <title>Equal Height Divs in Batches</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .text-inner {
            border: 1px solid black;
            margin: 10px;
            padding: 10px;
            width: calc(25% - 22px); /* Adjust for margin and border */
            box-sizing: border-box;
            float: left;
        }
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="text-inner">Text 1</div>
    <div class="text-inner" style="display: none;">Some more text 2</div>
    <div class="text-inner">Short text 3</div>
    <div class="text-inner">Even longer text 4</div>
    <div class="text-inner">Another text 5</div>
    <div class="text-inner">Some other text 6</div>
    <div class="text-inner" style="display: none;">A bit more text 7</div>
    <div class="text-inner">Final text 8</div>

    <script>
        $(document).ready(function() {
            // Select all visible .text-inner divs
            var divs = $('.text-inner').filter(':visible');

            // Loop through the divs in groups of 4
            for (var i = 0; i < divs.length; i += 4) {
                var maxHeight = 0;

                // Find the maximum height in this group of 4
                for (var j = i; j < i + 4 && j < divs.length; j++) {
                    if ($(divs[j]).height() > maxHeight) {
                        maxHeight = $(divs[j]).height();
                    }
                }

                // Set the height of all divs in this group to the maximum height
                for (var j = i; j < i + 4 && j < divs.length; j++) {
                    $(divs[j]).height(maxHeight);
                }
            }
        });
    </script>
</body>
</html>

function equalizeHeights(groupSize, className) {
    var divs = document.querySelectorAll(className);

    for (var i = 0; i < divs.length; i += groupSize) {
        var maxHeight = 0;

        // Find the maximum height in this group
        for (var j = i; j < i + groupSize && j < divs.length; j++) {
            var height = divs[j].offsetHeight;
            if (height > maxHeight) {
                maxHeight = height;
            }
        }

        // Set the height of all divs in this group to the maximum height
        for (var j = i; j < i + groupSize && j < divs.length; j++) {
            divs[j].style.height = maxHeight + "px";
        }
    }
}

// Example usage after DOM is loaded
document.addEventListener("DOMContentLoaded", function () {
    equalizeHeights(3, ".section-resources .left .text-wrap .text");
});

More posts