jQuery Plugin For Responsive Equal Height Containers

Equal Heights Responsive is a jQuery plugin that sets all the Html containers to have the same height, depending on the tallest one.

How to use it:

1. Load the jQuery javascript library and jQuery Equal Heights Responsive plugin in the html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script type="text/javascript" src="js/equal-heights-responsive.js"></script>

2. Create the html containers with the same CSS class.

<div class="block">
Container 1
</div>

<div class="block">
Container 2
</div>

<div class="block">
Container 3
</div>

3. Call the plugin and you're done.

<script type="text/javascript">
$(document).ready(function() {
$('.block').equalHeights();
});
</script>

4. Available options.

<script type="text/javascript">
$(document).ready(function() {
$('.block').equalHeights({
//resize elements upon window resize
responsive:   false,
//animate the resize
animate:      false,
//animate speed
animateSpeed: 200
});
});
</script>

---

This awesome jQuery plugin is developed by johnnyfaldo. For more Advanced Usages, please check the demo page or visit the official website.