Auto Sync the Heights Of Matched Elements - Height Harmony

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.