# magic-height

> magic auto height for elements

Latest version **1.0.1** (published 2018-01-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install magic-height
pnpm add magic-height
yarn add magic-height
bun add magic-height
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-01-26 |
| First published | 2017-07-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Azovcev Artem |
| Maintainers | kyrare |

## Links

- npm: https://www.npmjs.com/package/magic-height
- Homepage: https://kyrare.github.io/magic-height/
- npm.io page: https://npm.io/package/magic-height

## Recent versions

- 1.0.1 (latest) — 2018-01-26
- 1.0.0 — 2017-07-05

## README

# jQuery MagicHeight Plugin

## Getting Started

#### 1.1. Installation with Package Managers

```shell
bower install magic-height
```

```shell
npm install magic-height
```

#### 1.2. The Basics
Include the jQuery library and plugin:

```html
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="dist/jquery.magic-height.min.js"></script>
```

Html markup:

```html
<div class="container js-demo-container">
  <div class="row">
    <div class="col-xs-12 js-demo-item">your content or markup</div>
    <div class="col-xs-12 js-demo-item">your content or markup</div>
    <div class="col-xs-12 js-demo-item">your content or markup</div>
    <div class="col-xs-12 js-demo-item">your content or markup</div>
    <div class="col-xs-12 js-demo-item">your content or markup</div>
  </div>
</div>
```
Start plugin:

```js
$(function () {
    $('.js-demo-container').magicHeight({
      itemClass: '.js-demo-item'
    });
});
```

## Options

### itemClass
Item class value  
**Default**: `'.item'`  
**Type**: `string`

### line
Elements count in line  
**Default**: `'auto'`  
**Type**: `string` | `integer`

### resize
Recalculate height of elements while loading a window  
**Default**: `true`  
**Type**: `boolean`

### load
Recalculate height of elements while changing window size  
**Default**: `true`  
**Type**: `boolean`

## Demo

https://kyrare.github.io/magic-height/

---
_Source: https://npm.io/package/magic-height · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._