Author: | iansvo |
---|---|
Views Total: | 934 views |
Official Page: | Go to website |
Last Update: | April 27, 2018 |
License: | MIT |
Preview:

Description:
Just another JavaScript plugin that makes all the columns have the same height depending on the tallest one. Works perfectly with window resize event.
How to use it:
Insert the JavaScript file ‘equalizer.js’ into the document.
<script src="equalizer.js"></script>
Initialize the equalizer.js library on document ready.
window.addEventListener('load', function() { Equalizer.init(); });
Insert your own columns to rows as follows:
<div class="demo" data-equalizer-row="demo"> <div data-equalizer="demo"> Column 1 </div> <div data-equalizer="demo"> Column 1 </div> <div data-equalizer="demo"> Column 3 </div> </div>
That’s it. You can also enable/disable the equal height functionality on specific devices:
<div class="demo" data-equalizer-row="demo" data-equalizer-on="medium,xlarge"> <div data-equalizer="demo"> Column 1 </div> <div data-equalizer="demo"> Column 1 </div> <div data-equalizer="demo"> Column 3 </div> </div>
The default breakpoints.
Equalizer.init({ breakpoints: { small: 480, medium: 768, large: 1024, xlarge: 1200 } });