Skip to content

Commit df8cc98

Browse files
MottieMottie
committed
initial commit
0 parents  commit df8cc98

File tree

6 files changed

+462
-0
lines changed

6 files changed

+462
-0
lines changed

‎README.markdown

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
##Features
2+
3+
* Equalize column heights across multiple rows
4+
* Resize column heights when the page is resized. Can be disabled for fixed width layouts.
5+
* Choose between height (default), outer height or inner height.
6+
* Set a minimum or maximum height of a column, with an css class added when content overflows for additional styling
7+
8+
##Setup
9+
10+
###Header
11+
12+
```html
13+
<!-- Required CSS styling, but do whatever you want with the overflow and other styling -->
14+
<style>
15+
.overflowed { overflow: auto; }
16+
</style>
17+
18+
<!-- Required script -->
19+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
20+
<script src="js/jquery.equalizer.js"></script>
21+
<script>
22+
$(function() {
23+
$('.wrapper > div').equalizer();
24+
});
25+
</script>
26+
27+
```
28+
29+
###Example HTML
30+
```html
31+
<div class="wrapper">
32+
<div>Block 1</div>
33+
<div>Block 2</div>
34+
<div>Block 3</div>
35+
<div>Block 4</div>
36+
<div>Block 5</div>
37+
<div>Block 6</div>
38+
</div>
39+
```
40+
41+
##Usage & Options (defaults)
42+
43+
```javascript
44+
$('.wrapper > div').equalizer({
45+
// height = type of height to use
46+
// "o" or "outer" = "outerHeight" - includes height + padding + border + margin
47+
// "i" or "inner" = "innerHeight" - includes height + padding + border
48+
// default = "height" - use just the height
49+
useHeight : 'height', // height measurement to use
50+
resizeable : true, // when true, heights are adjusted on window resize
51+
min : 0, // Minimum height applied to all columns
52+
max : 0, // Max height applied to all columns
53+
overflow : 'overflowed' // class applied to columns that are taller than the allowable max
54+
});
55+
```
56+
57+
##Change Log
58+
59+
###Version 1.0 (6/6/2011)
60+
61+
* Initial build on Github

‎demo/demo.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
body {
2+
background: #333;
3+
color: #ddd;
4+
}
5+
6+
a:link { color: #9fcdff; text-decoration: none; }
7+
a:hover { color: #fff; }
8+
a:visited, a:active { color: #53a5ff; }
9+
10+
#wrapper {
11+
width: 95%;
12+
margin: 0 auto;
13+
}
14+
15+
h1, h2, h3 {
16+
font-family: Verdana,Tahoma,Segoe,sans-serif;
17+
text-align: center;
18+
}
19+
20+
.content-wrap {
21+
width: 33%;
22+
display: block;
23+
float: left;
24+
margin: 10px auto;
25+
}
26+
27+
.content-wrap div {
28+
width: 20%;
29+
background: #444;
30+
display: block;
31+
float: left;
32+
font-size: 8px;
33+
margin: 0 10px 10px 0;
34+
padding: 20px;
35+
}
36+
37+
.clear {
38+
clear: both;
39+
}

‎index.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
6+
<meta charset='UTF-8'>
7+
8+
<title>Equalize Height for Multiple Rows</title>
9+
10+
<!-- Demo only -->
11+
<link href="demo/demo.css" rel="stylesheet">
12+
13+
<!-- Required CSS styling, but do whatever you want with the overflow -->
14+
<style>
15+
div.stinky { overflow: auto; background: #550; }
16+
</style>
17+
18+
<!-- Required script -->
19+
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'></script>
20+
<script src="js/jquery.equalizer.js"></script>
21+
<script>
22+
$(function() {
23+
$('.content-wrap:eq(1) > div').equalizer({ max: 165, overflow : 'stinky' });
24+
$('.content-wrap:eq(2) > div').equalizer({ min: 140 });
25+
});
26+
</script>
27+
28+
</head>
29+
30+
<body>
31+
32+
<div id="wrapper">
33+
34+
<h1><a href="https://github.com/Mottie/Equalizer">jQuery Equalizer</a></h1>
35+
<h3>Multi-row column resizer (resize this window to see it in action)</h3>
36+
37+
<!-- three identical blocks of content to demonstrate the plugin -->
38+
<div class="content-wrap">
39+
<h3>Not Equalized</h3>
40+
<div>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nunc est, facilisis in blandit sit amet, rhoncus vel lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.</div>
41+
<div>2. Vivamus eu lorem mauris. Curabitur elementum felis nec libero malesuada in varius neque ultrices. Nunc sollicitudin nunc non risus mattis at varius lorem sagittis. Ut erat quam, molestie a viverra ac, porttitor a massa. Mauris eget mollis massa. Suspendisse et erat sem. Vestibulum eleifend vulputate elit at adipiscing. Suspendisse ac lectus massa.</div>
42+
<div>3. Nulla gravida neque nec metus tempus pulvinar. Nulla tincidunt lacinia ultricies. Curabitur tristique malesuada bibendum. Phasellus congue magna sem. Morbi tristique dui non sem ullamcorper fringilla. Nullam nec feugiat nibh. Duis sodales rutrum tortor sit amet volutpat.</div>
43+
<div>4. Nunc diam mi, dignissim eu fermentum at, egestas id ligula.</div>
44+
<div>5. Fusce lacus metus, vehicula nec congue id, adipiscing ac erat. Nunc justo neque, pharetra quis interdum vel, porta eget odio. Nunc lacinia posuere dui.</div>
45+
<div>6. Quisque nec ante mi, ac tempus turpis.</div>
46+
<div>7. Quisque vel erat turpis. Fusce accumsan venenatis dapibus. Mauris viverra, felis non laoreet vestibulum, leo nibh vulputate justo, in accumsan libero magna nec metus. Ut condimentum mauris nisl. Vivamus in nunc nisl. Proin commodo, mauris a placerat pellentesque, justo nisi euismod lacus, ut porttitor dui erat sit amet mi.</div>
47+
<div>8. Nam gravida neque eget diam venenatis semper. Phasellus ultricies porttitor nisl. Nam adipiscing mollis magna et dictum. Praesent ornare tempor augue, sit amet lobortis risus dictum at. Donec ligula felis, hendrerit vel laoreet quis, ornare auctor enim.</div>
48+
<br class="clear">
49+
</div>
50+
51+
<div class="content-wrap">
52+
<h3>Max Height</h3>
53+
<div>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nunc est, facilisis in blandit sit amet, rhoncus vel lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.</div>
54+
<div>2. Vivamus eu lorem mauris. Curabitur elementum felis nec libero malesuada in varius neque ultrices. Nunc sollicitudin nunc non risus mattis at varius lorem sagittis. Ut erat quam, molestie a viverra ac, porttitor a massa. Mauris eget mollis massa. Suspendisse et erat sem. Vestibulum eleifend vulputate elit at adipiscing. Suspendisse ac lectus massa.</div>
55+
<div>3. Nulla gravida neque nec metus tempus pulvinar. Nulla tincidunt lacinia ultricies. Curabitur tristique malesuada bibendum. Phasellus congue magna sem. Morbi tristique dui non sem ullamcorper fringilla. Nullam nec feugiat nibh. Duis sodales rutrum tortor sit amet volutpat.</div>
56+
<div>4. Nunc diam mi, dignissim eu fermentum at, egestas id ligula.</div>
57+
<div>5. Fusce lacus metus, vehicula nec congue id, adipiscing ac erat. Nunc justo neque, pharetra quis interdum vel, porta eget odio. Nunc lacinia posuere dui.</div>
58+
<div>6. Quisque nec ante mi, ac tempus turpis.</div>
59+
<div>7. Quisque vel erat turpis. Fusce accumsan venenatis dapibus. Mauris viverra, felis non laoreet vestibulum, leo nibh vulputate justo, in accumsan libero magna nec metus. Ut condimentum mauris nisl. Vivamus in nunc nisl. Proin commodo, mauris a placerat pellentesque, justo nisi euismod lacus, ut porttitor dui erat sit amet mi.</div>
60+
<div>8. Nam gravida neque eget diam venenatis semper. Phasellus ultricies porttitor nisl. Nam adipiscing mollis magna et dictum. Praesent ornare tempor augue, sit amet lobortis risus dictum at. Donec ligula felis, hendrerit vel laoreet quis, ornare auctor enim.</div>
61+
<br class="clear">
62+
</div>
63+
64+
<div class="content-wrap">
65+
<h3>Min Height</h3>
66+
<div>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nunc est, facilisis in blandit sit amet, rhoncus vel lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.</div>
67+
<div>2. Vivamus eu lorem mauris. Curabitur elementum felis nec libero malesuada in varius neque ultrices. Nunc sollicitudin nunc non risus mattis at varius lorem sagittis. Ut erat quam, molestie a viverra ac, porttitor a massa. Mauris eget mollis massa. Suspendisse et erat sem. Vestibulum eleifend vulputate elit at adipiscing. Suspendisse ac lectus massa.</div>
68+
<div>3. Nulla gravida neque nec metus tempus pulvinar. Nulla tincidunt lacinia ultricies. Curabitur tristique malesuada bibendum. Phasellus congue magna sem. Morbi tristique dui non sem ullamcorper fringilla. Nullam nec feugiat nibh. Duis sodales rutrum tortor sit amet volutpat.</div>
69+
<div>4. Nunc diam mi, dignissim eu fermentum at, egestas id ligula.</div>
70+
<div>5. Fusce lacus metus, vehicula nec congue id, adipiscing ac erat. Nunc justo neque, pharetra quis interdum vel, porta eget odio. Nunc lacinia posuere dui.</div>
71+
<div>6. Quisque nec ante mi, ac tempus turpis.</div>
72+
<div>7. Quisque vel erat turpis. Fusce accumsan venenatis dapibus. Mauris viverra, felis non laoreet vestibulum, leo nibh vulputate justo, in accumsan libero magna nec metus. Ut condimentum mauris nisl. Vivamus in nunc nisl. Proin commodo, mauris a placerat pellentesque, justo nisi euismod lacus, ut porttitor dui erat sit amet mi.</div>
73+
<div>8. Nam gravida neque eget diam venenatis semper. Phasellus ultricies porttitor nisl. Nam adipiscing mollis magna et dictum. Praesent ornare tempor augue, sit amet lobortis risus dictum at. Donec ligula felis, hendrerit vel laoreet quis, ornare auctor enim.</div>
74+
<br class="clear">
75+
</div>
76+
77+
</div>
78+
79+
</body>
80+
81+
</html>

‎js/jquery.equalizer.js

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
/*
2+
Equalizer v1.0
3+
4+
Original by Chris Coyier: http://css-tricks.com/equal-height-blocks-in-rows/
5+
from an idea by Stephen Akins: http://stephenakins.blogspot.com/2011/01/uniform-div-heights-for-liquid-css-p.html
6+
with ideas from Mike Avello: https://github.com/madmike1029/matchHeights
7+
converted into a plugin with some improvements by Rob Garrison: https://github.com/Mottie
8+
*/
9+
10+
(function($) {
11+
$.fn.equalizer = function(options) {
12+
var base = {};
13+
$('body').data('Equalizer', base);
14+
base.$el = $(this); // base.$el contains all elements
15+
base.options = $.extend({}, $.equalizerDefaults, options);
16+
17+
base.init = function(){
18+
// Setup sizes
19+
base.options.min = parseInt(base.options.min, 10) || 0;
20+
base.options.max = parseInt(base.options.max, 10) || 0;
21+
base.hasMax = (base.options.max === 0) ? false : true;
22+
base.hasMin = (base.options.min === 0) ? false : true;
23+
base.curRowTop = 0; // current row offset top position
24+
25+
// height to use
26+
base.useHeight = (/^o/.test(base.options.useHeight)) ? 'outerHeight' : /^i/.test(base.options.useHeight) ? 'innerHeight' : 'height';
27+
28+
if (base.options.resizeable) {
29+
// wrap content with a span so we can always get the exact height of the content on resize
30+
base.$el.wrapInner('<span />');
31+
32+
// throttled resize columns
33+
$(window).resize(function(){
34+
clearTimeout(base.throttle);
35+
base.throttle = setTimeout(function(){
36+
base.equalz();
37+
}, 100);
38+
});
39+
}
40+
41+
base.equalz();
42+
43+
};
44+
45+
base.equalz = function(){
46+
base.curMax = base.options.min; // current max height
47+
48+
base.$el
49+
.removeClass(base.options.overflow) // removed as it may have changed on resize
50+
.each(function(){
51+
var $this = $(this),
52+
$el = (base.options.resizeable) ? $this.find('> span') : $this;
53+
// find offset (position relative to document)
54+
base.curTop = $this.offset().top;
55+
56+
// Check for new row
57+
if (base.curRowTop !== base.curTop) {
58+
// New row, so check for max height first
59+
if (base.hasMax && base.curMax > base.options.max) {
60+
base.curMax = base.options.max;
61+
base.curRows.addClass(base.options.overflow);
62+
}
63+
// New row found, set the heights of the previous row
64+
// but ignore the row if not defined (very first element)
65+
if (base.curRows) { base.curRows.height(base.curMax); }
66+
// Set the variables for the new row
67+
base.curMax = $el[base.useHeight]();
68+
base.curMax = (base.hasMin) ? Math.max(base.options.min, base.curMax) : base.curMax;
69+
base.curRowTop = base.curTop;
70+
base.curRows = $this;
71+
} else {
72+
// Same row, continue comparing heights
73+
base.curMax = Math.max(base.curMax, $el[base.useHeight]());
74+
// Check limitations
75+
base.curMax = (base.hasMax && base.curMax > base.options.max) ?
76+
base.options.max :
77+
(base.hasMin && base.curMax < base.options.min) ? base.options.min : base.curMax;
78+
// another div on the current row, add it to the list
79+
base.curRows = base.curRows.add($this);
80+
}
81+
// catch last row
82+
if (base.curRows) {
83+
base.curRows.height(base.curMax);
84+
if (base.hasMax && base.curMax >= base.options.max) {
85+
base.curRows.addClass(base.options.overflow);
86+
}
87+
}
88+
});
89+
};
90+
base.init();
91+
return this; // maintain chainability
92+
};
93+
94+
$.equalizerDefaults = {
95+
// height = type of height to use
96+
// "o" or "outer" = "outerHeight" - includes height + padding + border + margin
97+
// "i" or "inner" = "innerHeight" - includes height + padding + border
98+
// default = "height" - use just the height
99+
useHeight : 'height', // height measurement to use
100+
resizeable: true, // when true, heights are adjusted on window resize
101+
min : 0, // Minimum height applied to all columns
102+
max : 0, // Max height applied to all columns
103+
overflow : 'overflowed' // class applied to columns that are taller than the allowable max
104+
};
105+
106+
})(jQuery);

‎js/jquery.equalizer.min.js

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)