Module Description
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)
* Download jQuery Auto Height module archive
* Extract and place it in the 'modules' directory i.e. sites/all/modules/auto_height
* Create a 'libraries' directory, if not already there i.e. sites/all/libraries
* Create a 'autoheight' directory inside it i.e. sites/all/libraries/autoheight
* Download 'jQuery AutoHeight' plugin - https://raw.githubusercontent.com/monocult/jquery-autoheight/master/jque...
* Place it in the 'autoheight' directory i.e. sites/all/libraries/autoheight/jquery.autoheight.js
* Install the module
Installation (Drupal 8)
* Download jQuery Auto Height module archive
* Extract and place it in the root 'modules' directory i.e. /modules/auto_height
* Create a 'libraries' directory in the root, if not already there i.e. /libraries
* Create a 'autoheight' directory inside it i.e. /libraries/autoheight
* Download 'jQuery AutoHeight' plugin - https://raw.githubusercontent.com/monocult/jquery-autoheight/master/jque...
* Place it in the 'autoheight' directory i.e. /libraries/autoheight/jquery.autoheight.js
* 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.
Check out this DEMO
Requirements
* Libraries API module
* jQuery Update module (Drupal 7 only)
* jQuery AutoHeight plugin
Installation (Drupal 7)
* Download jQuery Auto Height module archive
* Extract and place it in the 'modules' directory i.e. sites/all/modules/auto_height
* Create a 'libraries' directory, if not already there i.e. sites/all/libraries
* Create a 'autoheight' directory inside it i.e. sites/all/libraries/autoheight
* Download 'jQuery AutoHeight' plugin - https://raw.githubusercontent.com/monocult/jquery-autoheight/master/jque...
* Place it in the 'autoheight' directory i.e. sites/all/libraries/autoheight/jquery.autoheight.js
* Install the module
Installation (Drupal 8)
* Download jQuery Auto Height module archive
* Extract and place it in the root 'modules' directory i.e. /modules/auto_height
* Create a 'libraries' directory in the root, if not already there i.e. /libraries
* Create a 'autoheight' directory inside it i.e. /libraries/autoheight
* Download 'jQuery AutoHeight' plugin - https://raw.githubusercontent.com/monocult/jquery-autoheight/master/jque...
* Place it in the 'autoheight' directory i.e. /libraries/autoheight/jquery.autoheight.js
* 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.
Module Link
Project Usage
853
Security Covered
Covered By Security Advisory
Version Available
DEV
Module Summary
This module dynamically adjusts column heights in a row to ensure they are all equal to the height of the tallest column, making it essential for responsive websites.
Data Name
auto_height
OPENAI CHATBOT
OPENAI CHATBOT
