Give all elements in a group of elements at least the height of the tallest element of the group
Switch branches/tags
Nothing to show
Clone or download
Latest commit a710f0d Nov 19, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist add ability to pass mini configuration to eqheights Nov 19, 2015
.gitignore add node_modules to gitignore Sep 23, 2015
README.md add more examples to readme Nov 19, 2015
eqheights.js add ability to pass mini configuration to eqheights Nov 19, 2015
package.json 1.2.0 Nov 19, 2015

README.md

eqheights

Give all elements in a group of elements at least the height of the tallest element of the group.

Install

Find eqheights on npm

npm i eqheights

Usage Examples

Simplest, one off:

import eqheights from 'eqheights';

// using a selector string
eqheights('.grid-items');

// or using a NodeList
const elements = document.querySelectorAll('.list-items');

eqheights(elements);

Responsive:

import eqheights from 'eqheights';

const gridEqualizer = eqheights('.grid-items');
window.addEventListener('resize', gridEqualizer.recalc);

Togglable:

import eqheights from 'eqheights';

// autorun = false because we
// want to initialize only,
// not run eqheights yet
const {recalc, clear} = eqheights('.grid-items', {autorun: false});

const container = document.getElementById('grid');
document
  .getElementById('toggle')
  .addEventListener('click', () => {
    Array.prototype.indexOf(container.classList, 'active') < 0
      ? recalc()
      : clear();

    container.classList.toggle('active');
  });

Togglable and Responsive:

See this codepen: http://codepen.io/Maximilianos/pen/OyBYvv?editors=001

License

MIT © Max GJ Panas