This time I will share jQuery Plugin and tutorial about Auto Sync the Heights Of Matched Elements – Height Harmony, hope it will help you in programming stack.
Height Harmony is a minimal jQuery equal height plugin which automatically synchronizes the height of given elements with the same selector.
How to use it:
1. To get started, insert the minifier version of the Height Harmony plugin after loading jQuery JavaScript library.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/height-harmony-min.js"></script> |
2. Apply the heightHarmony function to the target elements and done.
01 |
<div class="block-one"> |
02 |
<div class="block-two">Content 1</div> |
03 |
<div class="block-three">Content 1</div> |
06 |
<div class="block-one"> |
07 |
<div class="block-two">Content 2</div> |
08 |
<div class="block-three">Content 2</div> |
11 |
<div class="block-one"> |
12 |
<div class="block-two">Content 3</div> |
13 |
<div class="block-three">Content 3</div> |
1 |
$(document).ready(function(){ |
2 |
heightHarmony('.block-one'); |
3 |
heightHarmony('.block-two'); |
4 |
heightHarmony('.block-three'); |
3. Re-init the plugin on window resize. Useful for responsive web design.
1 |
$(window).resize( function(){ |
2 |
heightHarmony('.block-one'); |
3 |
heightHarmony('.block-two'); |
4 |
heightHarmony('.block-three'); |
This awesome jQuery plugin is developed by byronjohnson. For more Advanced Usages, please check the demo page or visit the official website.
