Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
INTRODUCTION
------------
This module integrates the 'jQuery AutoHeight' plugin by monocult - https://github.com/monocult. It dynamically adjust column heights, matching the biggest column in each Row.
FEATURES
--------
'jQuery AutoHeight' plugin is:
- Lightweight
- Responsive
- Customizable
REQUIREMENTS
------------
Libraries API module - https://www.drupal.org/project/libraries
'jQuery AutoHeight' plugin - https://raw.githubusercontent.com/monocult/jquery-autoheight/master/jquery.autoheight.js
INSTALLATION
------------
1. Download 'jQuery Auto Height' module archive - https://www.drupal.org/project/auto_height
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/jquery.autoheight.js
6. Place it in the /libraries/autoheight directory i.e. /libraries/autoheight/jquery.autoheight.js
7. Now, enable 'jQuery Auto Height' module
USAGE
-----
Lets try to understand its usage with an example.
Here, there are 2 rows having 2 and 4 columns respectively. Varying content will make these columns to have different heights in each row.
<div id="Row1">
<div>There are many patterns..</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting..</div>
</div>
<div id="Row2">
<div>The standard chunk of Lorem Ipsum..</div>
<div>Cicero are also reproduced in their exact original form, accompanied by English versions..</div>
<div>All the Lorem Ipsum generators on the Internet tend to..</div>
<div>The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic..</div>
</div>
This is where 'jQuery Auto Height' module comes into the picture.
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).
e.g.,
.box1
.box2
4. Save configuration. That's it!
'jQuery Auto Height' module will now dynamically adjust column heights, matching the biggest column in each Row.
MAINTAINERS
-----------
Current maintainer:
* Binu Varghese - https://www.drupal.org/u/binu-varghese
DEMO
-----
https://rawgit.com/monocult/jquery-autoheight/master/demo.html