Menu

Lab Entry

Home  /  Lab  /  Equalize the height of child elements

Equalize the height of child elements

Here’s a cool little jQuery plugin that I wrote in order to solve a problem that I’ve frequently encountered with floated elements. That problem is that there’s really no way to dynamically set a height across elements within a single row. Well, this plugin will do just that… and not only will it do it but it will determine whether the elements are all within a single row.

View & Download on GitHub

What is does

heightEQ will first perform calculations to determine if all the elements fit into a single row and if so it will set the height of those elements to the height of the tallest one found in that row.

heighteq-diagram

Usuage

First and foremost, make sure that jQuery and the heightEQ plugin scripts are loaded. For example, make sure this (or your own variant) is included in your head:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//www.ninesphere.com/js/jquery.heightEQ.min.js"></script>

After that is done you simply attach heightEQ to the parent container and it will find direct children elements and perform calulcations. Like so:

jQuery(document).ready( function($) {
    $('#heighteq').heightEQ();
});

Your HTML should look something like this:

<div id="heighteq">
    <div class="column">Text here</div>
    <div class="column">Text here</div>
    <div class="column">Text here</div>
    <div class="column">Text here</div>
</div>

In the example HTML above, heightEQ will loop through all the children elements and make adjustments from there. Simple as that.

Comments (19)

Leave a Reply

Your email address will not be published. Required fields are marked *

© Copyright 2023 Ninesphere.com - Chicago Web Design & Development