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.