eqcol

Equal effing columns

Install

Browserify

$ npm install --save eqcol

Bower

$ bower install --save eqcol

<script src="bower_components/eqcol/dist/eqcol.min.js"></script>

Usage

Basic usage

<div class="row" data-eqcol>
	<div class="col-md-4" data-eqcol-watch>
		...
	</div>
	<div class="col-md-4" data-eqcol-watch>
		...
	</div>
	<div class="col-md-4" data-eqcol-watch>
		...
	</div>
</div>

import eqcol from 'eqcol';

const row = document.querySelector('.row');
eqcol(row, {
	// options...
});

Nesting

<div class="row" data-eqcol="foo">
	<div class="col-md-4" data-eqcol-watch="foo">
		...
	</div>
	<div class="col-md-4" data-eqcol-watch="foo">
		<div class="row" data-eqcol="bar">
			<div class="col-sm-6" data-eqcol-watch="bar">
				...
			</div>
			<div class="col-sm-6" data-eqcol-watch="bar">
				...
			</div>
		</div>
	</div>
	<div class="col-md-4" data-eqcol-watch="foo">
		...
	</div>
</div>

import eqcol from 'eqcol';

const rows = document.querySelectorAll('.row');
eqcol(rows, {
	// options...
});

API

eqcol(element [, options])

Initializes and equalizes the specified element(s). Returns an array of Eqcol objects.

element

Type: string || Element || NodeList

The container of the element(s) to be equalized. For instance, the parent row of the targeted columns.

options

Type: object

Optionally pass an object with the any of the following values.

| Name | Type | Default | Description | |:-----------|:--------|:-----------------|:-----------------------------------------------------------| | byRow | boolean | true | Matches each rows' child elements height only | | minHeight | integer | 0 | The minimum height of each column | | useTallest | boolean | true | Whether to use the tallest column as height of all columns | | groupAttr | string | data-eqcol | Passed a unique ID of each container | | watchAttr | string | data-eqcol-watch | Passed the value of its matching unique parent ID |

Methods

eqcol(element, 'equalize')

Call the equalize function directly.

eqcol(element, 'destroy')

Reset all of the columns back to auto height.

Events

There are two events that are exposed.

| Name | Description | |:--------|:---------------------------------------------| | equal | Fired right before the columns are equalized | | equaled | Fired after the columns are equalized |

const rows = eqcol('.row', options);

rows.forEach(row => {
	row.addEventListener('equaled', () => {
		// do stuff after equalize has finished
	});
});

License

MIT © Alex Cross