1.0.1 • Published 7 years ago
sync-heights v1.0.1
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();
});
Options
For window resizing
$(window).resize(function(){
$('.end-box').syncHeights({
update : true
});
});