Last month, I posted a blog about dynamically resizing divs with jQuery, and we received a lot of positive feedback about it. My quest to avoid iframes proved to be helpful, so I thought I’d share a few more esoteric jQuery tips and tricks that may be of use to the developers and designers in the audience. As I thought back about other challenges I’ve faced as a coder, a great example came to mind: Making divs equal height, regardless of the amount of content inside.
I haven’t seen many elegant div-based solutions for that relatively simple (and common) task, so I’ve noticed that many people struggle with it. Often, developers will turn back to the “Dark Side” of using tables to format the content since all columns would have the same height as the tallest column by default:
It was easy theme table columns and to achieve the coveted 100% height that many designers seek, but emulating that functionality with divs proves to be much more difficult. A div is like the Superman of HTML elements (faster-loading, more flexible, more dynamic, etc.), and while it has super powers, it also has its own Kryptonite-like weaknesses … The one relevant to this blog post being that floating three div elements next to each other isn’t going to give you the look of a table:
Each of the three divs has its own height, so if you’re doing something as simple as applying background colors, you’re going to wind up with an aesthetically unpleasing result: It’s going to look funky.
You could get into some nifty HTML/CSS workarounds, but many frustrated theme creators and designers will tell you that if your parent elements don’t have a height of a 100%, you’re just wasting coding lines. Some complex solutions create the illusion of all three divs being the same height (which is arguably better than setting fixed heights), but that complexity can be difficult to scale and repeat if you need to perform similar tasks throughout your site or your application. The easiest way to get the functionality you want and the simplicity you need: The jQuery equalHeights plugin!
With a few class declarations in your existing HTML, you get the results you want, and with equalHeights, you can also specify the minimum and maximum parameters so it will create scrollable divs if the tallest element happens to be higher than your specified maximum.
How to Use jQuery equalHeights
First and foremost, include your JQuery lirbraries in the <HEAD> of your document:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script language="javascript" type="text/javascript" src="jquery.equalheights.js"></script>
The equalHeights plugin is not a hosted library, so you have to host the file on your server (here’s the link again).
With the required libraries called in our document, it’s time to make the magic happen in your HTML.
Create Your Divs
<div class="divHeight">This DIV is medium sized, not too big and not too small, but just right.</div> <div class="divHeight">This DIV has a lot of useful content and media that the user can interact with, thus it's very tall.</div> <div class="divHeight">This DIV is tiny. Period.</div>
To have them line up next to each other, you’d have them float:left; in your CSS, and now you need to apply the equalHeights function.
Call the equalHeights Plugin
In order for the script to recognize the height of the tallest element, you’d need to call $(document).ready just before the </body> tag on your page. This will ensure that the page loads before the function runs.
The call looks like this:
<script type="text/javascript">$(document).ready(function() { $(".divHeight").equalHeights(); });</script>
If you want to specify a minimum and maximum (i.e. The div should be at least this tall and should be no taller than [adds scrollbar if the div size exceeds] the maximum), just add the parameters:
<script type="text/javascript">$(document).ready(function() { $(".divHeight").equalHeights(300, 600); });</script>
The initial call does not change the appearance of the divs, but the time it takes to do the resizing is so miniscule that users will never notice. After that call is made and the height is returned, each div with the class of divHeight will inherit the the same height, and your divs will be nice and pretty:
This trick saved me a lot of headache and frustration, so hopefully it will do the same for you too!
-Cassandra