Create Responsive Equal Height Columns with jQuery - conformity

Create Responsive Equal Height Columns with jQuery - conformity
File Size: 9.79 KB
Views Total: 1179
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

An extra lightweight jQuery plugin for making all columns equal in height per row that works perfectly with responsive/fluid web layout. The major difference between conformity and the other equal height solution is that the plugin equalizes the height of elements in a row rather than all elements in a group.

See also:

How to use it:

1. Insert a set of Html elements into a container as follows.

<div class="widgets">

  <div class="widget">
    ...
  </div>

  <div class="widget">
    ...
  </div>

  <div class="widget">
    ...
  </div>

  ...

</div>

2. Load the JQuery library and the JQuery conformity.js script at the end of your document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="dist/conformity.js"></script>

3. Call the plugin on the children elements and done.

$(document).ready(function () {

  // Initialize the plugin
  $('.widget').conformity();

  // re-initialize the plugin on window resize
  $(window).on("resize", function() {
    $('.widget').conformity();
  });

});

4. Add your own CSS styles to the elements.

.widgets {
  ...
}

.widget {
  ...
}

.widget:nth-child(even) {
  ...
}

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