forked from CSS-Tricks/Equalizer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
87 lines (75 loc) · 7.34 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Equalize Heights in Multiple Rows</title>
<!-- Demo only -->
<link href="demo/demo.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Redressed&v2" rel="stylesheet" type="text/css">
<!-- Required CSS styling, but do whatever you want with the overflow;
changed to "stinky" for this demo only, default class name is "overflowed" -->
<style>
div.stinky { overflow: auto; background: #550; }
</style>
<!-- Required script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/jquery.equalizer.js"></script>
<script>
$(function() {
$('.content-wrap:eq(1)').equalizer({ columns : '> div', max: 165, overflow : 'stinky' });
$('.content-wrap:eq(2)').equalizer({ min: 140 });
});
</script>
</head>
<body>
<div id="wrapper">
<div id="nav">
<a class="current" href="index.html">Main Demo</a>
<a href="adaptive.html">Adaptive Demo</a>
<a class="play" href="http://jsfiddle.net/Mottie/cuuqL/">Playground</a>
<a class="git" href="https://github.com/css-tricks/Equalizer/wiki">Documentation</a>
<a class="git" href="https://github.com/css-tricks/Equalizer/zipball/master">Download</a>
<a class="issue" href="https://github.com/css-tricks/Equalizer/issues">Issues</a>
</div>
<h1><a href="https://github.com/css-tricks/Equalizer">jQuery Equalizer</a></h1>
<h3>Multi-row column resizer<br><small>(resize this window to see it in action)</small></h3>
<!-- three identical blocks of content to demonstrate the plugin -->
<div class="content-wrap">
<h3>Not Equalized</h3>
<div><h1>Header</h1>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>
<div><h1>Header</h1>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>
<div><h1>Header</h1>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>
<div><h1>Header</h1>4. Nunc diam mi, dignissim eu fermentum at, egestas id ligula.</div>
<div><h1>Header</h1>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>
<div><h1>Header</h1>6. Quisque nec ante mi, ac tempus turpis.</div>
<div><h1>Header</h1>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>
<div><h1>Header</h1>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>
<br class="clear">
</div>
<div class="content-wrap">
<h3>Max Height</h3>
<div><h1>Header</h1>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>
<div><h1>Header</h1>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>
<div><h1>Header</h1>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>
<div><h1>Header</h1>4. Nunc diam mi, dignissim eu fermentum at, egestas id ligula.</div>
<div><h1>Header</h1>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>
<div><h1>Header</h1>6. Quisque nec ante mi, ac tempus turpis.</div>
<div><h1>Header</h1>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>
<div><h1>Header</h1>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>
<br class="clear">
</div>
<div class="content-wrap">
<h3>Min Height</h3>
<div><h1>Header</h1>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>
<div><h1>Header</h1>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>
<div><h1>Header</h1>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>
<div><h1>Header</h1>4. Nunc diam mi, dignissim eu fermentum at, egestas id ligula.</div>
<div><h1>Header</h1>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>
<div><h1>Header</h1>6. Quisque nec ante mi, ac tempus turpis.</div>
<div><h1>Header</h1>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>
<div><h1>Header</h1>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>
<br class="clear">
</div>
</div>
</body>
</html>