How To Make Equal Height Columns – jColumn jQuery Plugin

by Posted on

How To Make Equal Height Columns – jColumn jQuery Plugin: jColumn is a lightweight jQuery plugin to make selected html elements the same height. it automatically detect tallest height column and resize all the column on same height that works on window resize event. So that you design not look ugly as this issue we generally face when we create multiple div columns on page. This lightweight plugin fix this issue like magic you don’t worry about column height it automatically resize all column height and make them same sizes as tallest one.


Make Equal Height Columns

Libraries

The plugin library dependent on jQuery core library include jQuery library after that add jcolumn.jquery.min.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jcolumn.jquery.min.js"></script>

HTML

Here is the list of div column into a container which need to make same height.

<div class="row">
  <div class="col">
    <p> ... </p>
  </div>
  <div class="col">
    <p> ... </p>
  </div>
  <div class="col">
    <p> ... </p>
  </div>
</div>


JS

Now Initialize the plugin by calling the following function on the div element.

$(function() {   
 $('.col').jcolumn();
});

You can also use following options to set some more properties on columns.

$(function() {   
 $('.col').jcolumn({
  delay: 500,
  maxWidth: 767,
  callback: null,
  resize: true
 });
});

See live demo and download source code.

DEMO | DOWNLOAD

Published by admin