Equal Height Columns In JavaScript – equalizer.js

Category: Javascript , Layout | April 27, 2018
Author: iansvo
Views Total: 1,235
Official Page: Go to website
Last Update: April 27, 2018
License: MIT

Preview:

Equal Height Columns In JavaScript – equalizer.js

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
  }
});

You Might Be Interested In:


Leave a Reply