https://github.com/awcross/eqcol

Equal effing columns. For making all the beautiful, equal height columns that your heart desires.
https://github.com/awcross/eqcol

Last synced: about 11 hours ago
JSON representation

Equal effing columns. For making all the beautiful, equal height columns that your heart desires.

• Host: GitHub
• URL: https://github.com/awcross/eqcol
• Owner: awcross
• License: mit
• Created: 2016-09-22T21:45:58.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2016-12-19T00:23:02.000Z (almost 8 years ago)
• Last Synced: 2024-11-15T05:16:24.184Z (5 days ago)
• Language: JavaScript
• Homepage:
• Size: 24.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# eqcol

> Equal effing columns

## Install

Browserify

```

$ npm install --save eqcol

```

Bower

```

$ bower install --save eqcol

```

```html

```

## Usage

#### Basic usage

```html



	


		...

	

	


		...

	

	


		...

	



```


```js

import eqcol from 'eqcol';

const row = document.querySelector('.row');

eqcol(row, {

	// options...

});

```

#### Nesting

```html



	


		...

	

	


		


			


				...

			

			


				...

			

		

	

	


		...

	



```


```js

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        |

```js

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

rows.forEach(row => {

	row.addEventListener('equaled', () => {

		// do stuff after equalize has finished

	});

});

```

## License

MIT © [Alex Cross](https://alexcross.io)