jColumn

jColumn is a lightweight JavaScript library to make selected html elements the same height. It can be used as a standalone JavaScript library or a jQuery plugin. Size: 861 Bytes

Without jColumn

With jColumn

Install

Bower

bower install jcolumn

npm

npm install jcolumn

The oldschool way

JavaScript

<script src="dist/jcolumn.min.js" type="text/javascript" charset="utf-8"></script>

jQuery

Include the jcolumn.jquery.min.js script directly after jQuery:

<script src="dist/jcolumn.jquery.min.js" type="text/javascript" charset="utf-8"></script>

Usage

JavaScript

Just create an instance of jColumn and invoke the method jcolumn. The method takes a class name (without a point) as parameter.

var col = new jColumn();
col.jcolumn('col');

Options

Option	Default	Type	Description
delay	500	number	(optional) The delayed time after the resize happens
maxWidth	767	number	(optional) Every document width smaller than maxWidth will not use jcolumn
resize	true	boolean	(optional) Disable resize event with false
callback	null	function	(optional) A callback function which gets triggered after resize

var col = new jColumn({
    delay: 500,
    maxWidth: 767,
    callback: function (height) {
        console.log('New max height is: ' + height);
    }
});
col.jcolumn('col');

jQuery

Initialize the plugin by calling the jcolumn function on a class of columns.

$('.col').jcolumn();

Options

Option	Default	Type	Description
delay	500	number	(optional) The delayed time after the resize happens
maxWidth	767	number	(optional) Every document width smaller than maxWidth will not use jcolumn
resize	true	boolean	(optional) Disable resize event with false
callback	null	function	(optional) A callback function which gets triggered after resize

$('.col').jcolumn({
    delay: 500,
    maxWidth: 767,
    callback: function (height) {
        console.log('New max height is: ' + height);
    }
});

How to build your own version

If you would like to build your own version of jColumn, the only thing you need to do is to follow the steps below.

$ cd jcolumn
$ npm install
$ grunt

Browser compatibility

• Chrome 1+
• FireFox 6+
• Safari 4+
• Opera 10+
• Internet Explorer (Sry I do not have a Windows Machine)

Author

Oliver Jessner @oliverj_net

Copyright © 2015- 2016