How To Make Equal Height Columns – jColumn jQuery Plugin

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

One Reply to “How To Make Equal Height Columns – jColumn jQuery Plugin”

  1. Hello Sir, sir i have a blog website techshub.in. and have 2-3 posts only. i want to know that if i post the blogs on weekly basis . while i get money from adsense. help me to know that how much daily visitors required to earn 20$ per day.??

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.