syncHeights

jQuery SyncHeights

This plugin takes a specific DOM element and samples all instances of that element on a page, measures the elements heights and updates all instances to have the same height. Great for a design that has equal sized div elements, that need to have an auto height to allow for different sized content.

*Requires jQuery, tested with 1.11.0 - should work with much earlier versions. ** Can be solved using css flex nowadays, use this if you need to support older browsers.... **

---

Example

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
 
<div class="end-box">
    <h1> Basic Title </h1>
</div class="box">
 
<div class="box">
    <h1> Basic Title </h1>
</div>
 
<div class="end-box">
    <h1> Basic Title </h1>
</div>

Basic usage

$(document).ready(function(){	
    $('.end-box').syncHeights();		
});

In this example the html elements with a class of "end-box" will be equal to each other in height.

You'll notice that whatever class, div or html element you apply syncHeights() to will be measured against each other on page load and perform the correct manipulation to heights.

---

Options

For window resizing

$(window).resize(function(){
   $('.end-box').syncHeights({
       update : true
   });
});