Responsive Equal Height Plugin With Pure JavaScript – right-height

Preview:

Description:

right-height is a lightweight (4kb) and standalone JavaScript library to easily equalize the heights of any group of elements. Supports nested elements.

How to use it:

To use the right-height, simply include the JavaScript file ‘right-height.js’ at the bottom of the webpage.

<script src="dist/js/right-height.js"></script>

Add the ‘data-right-height-content’ attribute to the elements as follows:

<div class="content" data-right-height-content>
  <p>Content 1</p>
</div>
<div class="content" data-right-height-content>
  <p>Content 2</p>
</div>
<div class="content" data-right-height-content>
  <p>Content 3</p>
</div>
...

Initialize the library and we’re done.

rightHeight.init();

You can define settings by passing an object to the ‘init’ function:

rightHeight.init({
  selector: '[data-right-height]',
  selectorContent: '[data-right-height-content]',
  before: function () {},
  after: function () {}
});