Menu

Lab Entry

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 (3)

  • This is really interesting, You are a very skilled blogger. I’ve joined your rss feed and look forward to seeking more of your excellent post. Also, I have shared your site in my social networks!

  • Hi, Neat post. There is a problem along with your site in internet explorer, may check this?K IE nonetheless is the marketplace leader and a large portion of folks will leave out your excellent writing because of this problem.

  • Great V I should definitely pronounce, impressed with your site. I had no trouble navigating through all tabs as well as related information ended up being truly easy to do to access. I recently found what I hoped for before you know it at all. Quite unusual. Is likely to appreciate it for those who add forums or anything, web site theme . a tones way for your customer to communicate. Excellent task..

Leave a Reply

Your email address will not be published.

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