1.0.1 • Published 7 years ago

sync-heights v1.0.1

Weekly downloads
4
License
MIT
Repository
github
Last release
7 years ago

syncHeights

npm npm npm

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
   });
});