Auto Sync the Heights Of Matched Elements - Height Harmony
File Size: | 15.6 KB |
---|---|
Views Total: | 529 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/height-harmony-min.js"></script>
2. Apply the heightHarmony function to the target elements and done.
<div class="block-one"> <div class="block-two">Content 1</div> <div class="block-three">Content 1</div> </div> <div class="block-one"> <div class="block-two">Content 2</div> <div class="block-three">Content 2</div> </div> <div class="block-one"> <div class="block-two">Content 3</div> <div class="block-three">Content 3</div> </div> ...
$(document).ready(function(){ heightHarmony('.block-one'); heightHarmony('.block-two'); heightHarmony('.block-three'); // ... });
3. Re-init the plugin on window resize. Useful for responsive web design.
$(window).resize( function(){ heightHarmony('.block-one'); heightHarmony('.block-two'); 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.