jQuery Auto Height

A must have for responsive websites, this module integrates the jQuery AutoHeight plugin by monocult. It dynamically adjust column heights such that height of all columns in a Row is equal to that of its tallest column.

Check out this DEMO

Requirements

• Libraries API module
• jQuery Update module (Drupal 7 only)
• jQuery AutoHeight plugin

Installation (Drupal 7)

1. Download jQuery Auto Height module archive
2. Extract and place it in the 'modules' directory i.e. sites/all/modules/auto_height
3. Create a 'libraries' directory, if not already there i.e. sites/all/libraries
4. Create a 'autoheight' directory inside it i.e. sites/all/libraries/autoheight
5. Download 'jQuery AutoHeight' plugin - https://raw.githubusercontent.com/monocult/jquery-autoheight/master/jque...
6. Place it in the 'autoheight' directory i.e. sites/all/libraries/autoheight/jquery.autoheight.js
7. Install the module

Installation (Drupal 8)

1. Download jQuery Auto Height module archive
2. Extract and place it in the root 'modules' directory i.e. /modules/auto_height
3. Create a 'libraries' directory in the root, if not already there i.e. /libraries
4. Create a 'autoheight' directory inside it i.e. /libraries/autoheight
5. Download 'jQuery AutoHeight' plugin - https://raw.githubusercontent.com/monocult/jquery-autoheight/master/jque...
6. Place it in the 'autoheight' directory i.e. /libraries/autoheight/jquery.autoheight.js
7. Install the module

How does it Work?

1. Just assign same class to all columns in a Row as below.

<div id="Row1">
  <div class="box1">There are many patterns..</div>
  <div class="box1">Lorem Ipsum is simply dummy text of the printing and typesetting..</div>
</div>

<div id="Row2">
  <div class="box2">The standard chunk of Lorem Ipsum..</div>
  <div class="box2">Cicero are also reproduced in their exact original form, accompanied by English versions..</div>
  <div class="box2">All the Lorem Ipsum generators on the Internet tend to..</div>
  <div class="box2">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic..</div>
</div>

2. Now, go to the module's configuration page: /admin/config/media/auto_height

3. Here, add the respective jQuery class selectors from STEP 1 (each one in a new line).

.box1
.box2

4. Save configuration. That's it!

jQuery class selectors

The default jQuery class selector is set to ".block", so applies to all blocks, once you enable this module.

You can specify any valid jQuery class selectors on the module's configuration page: /admin/config/media/auto_height

Developed & maintained by: Binu Varghese

For professional support and development services, contact us @ myndsets.