An es6 class to equalize the heights of HTML elements.
npm install @meteora-digital/equalizerEqualizer is an es6 Class which can be used to easily match the height of multiple elements using names to isolate matching groups.
##### Note: version 1.0.0 has breaking changes. Please update your code, or lock your version to 0.1.9 to avoid errors
``bash`
yarn add @meteora-digital/equalizer
npm i @meteora-digital/equalizer
`html`
`html`
`html`
`es6
import Equalizer from '@meteora-digital/equalizer';
document.addEventListener('DOMContentLoaded', () => {
const equalizers = document.querySelectorAll('[data-equalize]');
for (let index = 0; index < equalizers.length; index++) {
const container = equalizers[index];
new Equalizer({
container,
identifiers: container.getAttribute('data-equalize'),
rows: true,
});
}
});
`
When you create a new Equalizer, you need to pass 3 arguments
| Argument | Description |
|----------|-------------|
| container | The container is the element that is holding the items we want to resize |
| identifiers | The identifiers is a string of comma separated values that are used to match the elements we want to resize. The identifiers can be a selector, or a comma separated list of selectors. The container will be searched for child elements that have a matching identifier within a data-equalize-watch attribute. |
| rows | The rows is a boolean that determines whether we want to resize the elements in rows or not. If not all elements will be the same height regardless of their position on the page. |
| throttle | The throttle is a number that determines how often the equalizer will check for changes per update(). The default is 0. |
| debounce | The debounce is a number that determines how long the equalizer will wait after the last resize event before updating. The default is 100. |
| mutations | Settings that will be injected into the MutationObserver. The default is { childList: true, subtree: false } |
`es6
You can call an on method on the Equalizer instance to listen for events.
`es6``
equalizer.on('resize', () => {
console.log('resize');
});
| Event | Description |
|-------|-------------|
| resize | This event is fired when the Equalizer is resized. |
| beforeResize | This event is fired before the Equalizer is resized |
| update | This event is fired when the Equalizer is updated. |
| beforeUpdate | This event is fired before the Equalizer is updated. |
#