https://github.com/status201/jquery-equalheights

Equal heights jQuery Plugin
https://github.com/status201/jquery-equalheights

javascript jquery jquery-plugin vertical-align

Last synced: 16 days ago
JSON representation

Equal heights jQuery Plugin

• Host: GitHub
• URL: https://github.com/status201/jquery-equalheights
• Owner: status201
• License: mit
• Created: 2015-10-14T11:07:52.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2021-08-16T08:24:47.000Z (over 3 years ago)
• Last Synced: 2024-12-19T03:04:37.765Z (about 1 month ago)
• Topics: javascript, jquery, jquery-plugin, vertical-align
• Language: JavaScript
• Homepage:
• Size: 15.6 KB
• Stars: 5
• Watchers: 1
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
# jquery-equalheights

Equal heights jQuery Plugin by Gijs Oliemans, Status201 [Web Development](http://status201.nl)

## What does it do?

Little jQuery plugin to "vertically align elements" by stretching their height to match the tallest.

Only elements that live exactly at the same height in the document will be maximised to the same height.

This way 2 rows can vertically align nicely while having different heights.

## Install

Download either the [production version](https://github.com/status201/jquery-equalheights/blob/master/jquery.equalheights.min.js) or the [development version](https://github.com/status201/jquery-equalheights/blob/master/jquery.equalheights.js) of jquery-equalheights.

In your web page:

```html

$( document ).ready(function() {

    $('.elements-with-different-heights').equalHeights();

});

```

## Bower

To install jquery-equalheights via Bower:

```

bower install jquery-equal-heights

```

## Options

| Option        | Possible values | Default |

| :------------ |:---------------:| -------:|

| onLoad        | true / false    | true    |

| onResize      | true / false    | true    |

## Examples

```javascript

$( document ).ready(function() {

    // make all list items with class category the same height

    $('li.category').equalHeights();

  

    // make different elements the same height

    $('p.intro, img.thumbnail').equalHeights();

  

    // only resize once now (not on window.resize and window.load) 

    $('.nav button').equalHeights({

        onResize: false,

        onLoad: false

    });

});

```

## More info

More info at: http://dev201.nl/equal-height-jquery-plugin/