-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
171 lines (129 loc) · 12 KB
/
demo.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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<html>
<head>
<!-- minimal Foundation CSS Grid -->
<link href="css/common.css" rel="stylesheet">
<link href="css/blockgrid.css" rel="stylesheet">
<style>
img {max-width: 100%;margin: 0 auto;display: block;padding: 5px;}
[data-equalizer-watch] {display: block;}
.content-wrap div{margin:0.5rem 0;}
.content-wrap span{background: #444;color:white;font-size: 8px;padding: 0.5rem;}
</style>
<!-- include this style tag to prevent a useless first browser restyle -->
<style id="equalizerCSS"></style>
</head>
<body>
<div id="content">
<div id="one" class="row small-up-2 large-up-4 content-wrap" data-equalizer>
<div class="col">
<span data-equalizer-watch><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.</span>
</div>
<div class="col">
<span data-equalizer-watch><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.</span>
</div>
<div class="col">
<span data-equalizer-watch><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.</span>
</div>
<div class="col">
<span data-equalizer-watch><h1>Header</h1>4. Nunc diam mi, dignissim eu fermentum at, egestas id ligula.</span>
</div>
<div class="col">
<span data-equalizer-watch><h1>Header</h1><img data-src="http://placehold.it/180x180"/> Fusce lacus metus, vehicula nec congue id, adipiscing ac erat. Nunc justo neque, pharetra quis interdum vel, porta eget odio. Nunc lacinia posuere dui.</span>
</div>
<div class="col">
<span data-equalizer-watch><h1>Header</h1>6. Quisque nec ante mi, ac tempus turpis.</span>
</div>
<div class="col">
<span data-equalizer-watch><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.</span>
</div>
<div class="col">
<span data-equalizer-watch><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.</span>
</div>
</div>
<div>
<div id="one" class="row small-up-2 medium-up-3 large-up-3 content-wrap" data-equalizer>
<div class="col">
<span data-equalizer-watch><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.</span>
</div>
<div class="col">
<span data-equalizer-watch><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.</span>
</div>
<div class="col">
<span data-equalizer-watch><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.</span>
</div>
<div class="col">
<span data-equalizer-watch><h1>Header</h1>4. Nunc diam mi, dignissim eu fermentum at, egestas id ligula.</span>
</div>
<div class="col">
<span data-equalizer-watch><h1>Header</h1><img data-src="http://placehold.it/180x180"/> Fusce lacus metus, vehicula nec congue id, adipiscing ac erat. Nunc justo neque, pharetra quis interdum vel, porta eget odio. Nunc lacinia posuere dui.</span>
</div>
<div class="col">
<span data-equalizer-watch>3. 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.
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.</span>
</div>
</div>
<div>
<div>
<div id="two" class="row small-up-2 medium-up-3 large-up-4 content-wrap" data-equalizer>
<div class="col">
<span data-equalizer-watch><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.</span>
</div>
<div class="col">
<span data-equalizer-watch><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.
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.</span>
</div>
<div class="col">
<span data-equalizer-watch><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.</span>
</div>
<div class="col">
<span data-equalizer-watch><h1>Header</h1>4. Nunc diam mi, dignissim eu fermentum at, egestas id ligula.</span>
</div>
<div class="col">
<span data-equalizer-watch><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.</span>
</div>
<div class="col">
<span data-equalizer-watch><h1>Header</h1>6. Quisque nec ante mi, ac tempus turpis. 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.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.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.</span>
</div>
<div class="col">
<span data-equalizer-watch><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.</span>
</div>
<div class="col">
<span data-equalizer-watch><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.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="equalDiv.min.js"></script>
<script async>
(function() {
var
scheduledResizeFrame = false,
currentWidth = window.innerWidth,
lastKnownWidth = currentWidth;
function doSomething(timeStamp) {
// ...
// ...
if (currentWidth !== lastKnownWidth) {
equalDiv.equalize(currentWidth);
}
// update lastKnownWidth
lastKnownWidth = currentWidth;
scheduledResizeFrame = false;
}
function onResize() {
if (scheduledResizeFrame)
return;
scheduledResizeFrame = true;
currentWidth = window.innerWidth;
requestAnimationFrame(doSomething);
}
equalDiv.init({
styleId: 'equalizerCSS'
});
window.addEventListener('resize', onResize, false );
})();
</script>
</html>