jQuery Plugin To Make Equal Height Columns - jcolumn

File Size: 12.9 KB
Views Total: 6120
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Make Equal Height Columns - jcolumn

jcolumn is an ultra-light jQuery plugin for making a group of columns height equal to the tallest one that works on window resize event.

How to use it:

1. Include the jcolumn.js script after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jColumn.js"></script>

2. Add a group of block elements into a container.

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

3. Initialize the plugin by calling the function on the columns.


4. Possible plugin options.

// The delayed time after the resize happens
delay: 500,

// Every document width smaller than maxWidth will not use jcolumn
maxWidth: 767,

// A callaback function which gets triggered after resize
callback: null,

// Disable resize event.
resize: true

Change log:


  • v1.0.0


  • minor fixes


  • minor fixes


  • noop function implemented


  • prevent resize via option

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