jQuery Plugin For Responsive Equal Height Containers
File Size: | 180 KB |
---|---|
Views Total: | 1162 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.