2.0.0 • Published 7 years ago
eqcol v2.0.0
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