-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
228 lines (221 loc) · 12.9 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
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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DocType html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="cleartype" content="on">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="keywords" content="jQuery.equalize equalize column heights jQuery plugin css javascript eustasy Labs">
<meta name="description" content="jQuery.equalize is a small jQuery Plugin to equalize the height of columns with a class within a containing group.">
<title>jQuery.equalize · eustasy Labs</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/gh/eustasy/Colors.css@1/colors.min.css,gh/necolas/normalize.css@8/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Lusitana|Source+Code+Pro" data-noprefix>
<link rel="stylesheet" href="https://labs.eustasy.org/assets/css/grid.min.css">
<link rel="stylesheet" href="https://labs.eustasy.org/assets/css/labs.css">
<link rel="stylesheet" href="responsive.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-45667989-11', 'eustasy.org');
ga('send', 'pageview');
</script>
</head>
<body>
<a href="https://github.com/eustasy/jQuery.equalize" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path class="octo-arm" fill="currentColor" style="transform-origin: 130px 106px;" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"></path>
<path class="octo-body" fill="currentColor" d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"></path>
</svg>
</a>
<header>
<h1>jQuery.equalize</h1>
<p class="sub-title">by <a href="https://labs.eustasy.org/">eustasy Labs</a></p>
</header>
<hr class="section-breaker">
<section class="whole grid">
<div class="whole smablet-half">
<p class="text-left">jQuery.equalize is a small jQuery plugin to equalize the height of elements with the equalize class within groups, or the entire page. It is open-sourced by eustasy under the MIT License, and the minified version is less than 1 KB in size. That's small enough to inline into each page you want it on, or add it in to any existing script files. You might want to take a look at the <a href="jquery.equalize.js">unminified version</a> if you want to understand what it is doing.</p>
<p class="text-right bold">It looks something like this:</p>
<p>
<a class="button rounded display-inline-block background-white color-belize-hole" href="https://www.jsdelivr.com/package/gh/eustasy/jQuery.equalize">CDN Delivery</a>
<a class="button rounded display-inline-block background-white color-belize-hole" href="https://github.com/eustasy/jQuery.equalize">GitHub</a>
</p>
<h6>v.1.8 · Zip · 6 KB</h6>
</div>
<div class="whole smablet-half">
<textarea class="code rounded" rows="6">function equalize(g,e){'use strict';g=g||'.group';e=e||'.equalize';$(g).each(function(){var h=0;$(e,this).css('height','auto');$(e,this).each(function(){if($(this).innerHeight()>h){h=$(this).innerHeight()}});$(e,this).innerHeight(h)})}</textarea>
</div>
</section>
<hr class="section-breaker">
<section class="whole grid">
<div class="whole smablet-third jquery-equalize-box">
<h2>This Bit</h2>
<h3>is unequalized</h3>
<p>I can add loads of content here and make loads of whitespace to the right.</p>
<p class="faded">Color theory encompasses a multitude of definitions, concepts and design applications - enough to fill several encyclopedias. However, there are three basic categories of color theory that are logical and useful : The color wheel, color harmony, and the context of how colors are used.</p>
<p class="faded">Color theories create a logical structure for color. For example, if we have an assortment of fruits and vegetables, we can organize them by color and place them on a circle that shows the colors in relation to each other.</p>
</div>
<div class="whole smablet-third jquery-equalize-box">
<h3>See how</h3>
<h4>messy this looks?</h4>
</div>
<div class="whole smablet-third jquery-equalize-box">
<h4>almost like</h4>
<p>I was trying to give a designer a headache of magnificent proportions.</p>
<p class="faded">The kind that makes you hallucinate about riding a donkey at the beach, and the maw of a gigantic scorpion surfacing through the sand towards you, moving past to terrorise Blackpool.</p>
<p class="faded">Oh, wait, that was a Primeval episode.</p>
</div>
</section>
<hr class="section-breaker">
<section class="whole grid group">
<div class="whole smablet-third jquery-equalize-box equalize">
<h3>These columns are equalized</h3>
<p>Everything looks neater and easier to understand.</p>
<p class="faded">Color theory encompasses a multitude of definitions, concepts and design applications - enough to fill several encyclopedias. However, there are three basic categories of color theory that are logical and useful : The color wheel, color harmony, and the context of how colors are used.</p>
<p class="faded">Color theories create a logical structure for color. For example, if we have an assortment of fruits and vegetables, we can organize them by color and place them on a circle that shows the colors in relation to each other.</p>
</div>
<div class="whole smablet-third jquery-equalize-box equalize">
<h3>See how</h3>
<h4>much better this looks?</h4>
<p>All of this was achieved by adding the equalize class within a group class.</p>
</div>
<div class="whole smablet-third jquery-equalize-box equalize">
<h3>Designers Everywhere</h3>
<p>Will rejoice as things are pixel perfect.</p>
<p class="faded">The kind that makes you hallucinate about riding a donkey at the beach, and the maw of a gigantic scorpion surfacing through the sand towards you, moving past to terrorism Blackpool.</p>
<p class="faded">Oh, wait, that was a Primeval episode.</p>
</div>
</section>
<h4><span class="color-accent">Tip:</span> Try re-sizing the window!</h4>
<hr class="section-breaker">
<section class="whole grid">
<div class="whole smablet-half">
<h2>The Syntax</h2>
<p class="text-left">The syntax of jQuery.equalize is ridiculously simple, it uses the group class that is already utilized in many bootstraps, templates and boilerplates, and the equalize class to detect what elements it should be targeting. Don't forget to include a nice, recent version of jQuery and your copy of jQuery.equalize, or you can load it from Git (it's not on any CDNs i know of yet).</p>
</div>
<div class="whole smablet-half">
<textarea class="code rounded"><script src="jquery.min.js"></script>
<script src="jquery.equalize.min.js></script>
<script>$(function(){equalize()});window.onresize=function(){equalize()}</script>
<div class="group">
<div class="equalize"></div>
<div class="equalize"></div>
<div class="equalize"></div>
</div></textarea>
</div>
</section>
<hr class="section-breaker">
<section class="whole grid">
<div class="whole smablet-half">
<h3>Nested Items</h3>
<p class="text-left">The equalized divs don't need to be directly below the group div, in fact, they don't even need to be divs. Anything that can have the height set via CSS will work fine. Note that it doesn't take padding into account, so that's up to you to handle how you will, either keeping them all the same or adding a div specifically for padding.</p>
</div>
<div class="whole smablet-half">
<textarea class="code rounded"><div class="whole grid group">
<div class="whole smablet-third equalize">
Div elements…
</div>
<div class="whole smablet-third">
<h2 class="equalize">Headers</h2>
</div>
<div class="whole smablet-third">
<span class="equalize">Inline elements</span>
</div>
</div></textarea>
</div>
</section>
<hr class="section-breaker">
<section class="whole grid">
<div class="whole smablet-half">
<h3>What Not To Do, Sort Of</h3>
<p class="text-left">Here, there is a group within another group. This is actually okay, so long as you don't mind the equalized divs inside the second group expanding to match the first group, which they are technically a part of too.</p>
</div>
<div class="whole smablet-half">
<textarea class="code rounded"><div class="whole grid group">
<div class="whole smablet-third">
<div class="box equalize"></div>
</div>
<div class="whole smablet-third">
<div class="box equalize"></div>
</div>
<div class="whole smablet-third">
<div class="whole grid group">
<div class="whole smablet-half">
<div class="box equalize"></div>
</div>
<div class="whole smablet-half">
<div class="box equalize"></div>
</div>
</div>
</div>
</div></textarea>
</div>
</section>
<hr class="section-breaker">
<section class="whole grid">
<div class="whole smablet-half">
<h2>Custom Classes</h2>
<p class="text-left">Custom group and equalize classes can be passed quickly and simply without modifying the source files and breaking your upgradability.</p>
</div>
<div class="whole smablet-half">
<textarea class="code rounded"><script src="jquery.min.js"></script>
<script src="jquery.equalize.min.js></script>
<script>
$(function(){
equalize('.some-strange-group','.equalize-me');
});
window.onresize=function(){
equalize('.some-strange-group','.equalize-me');
};
</script>
<div class="some-strange-group">
<div class="equalize-me"></div>
<div class="equalize-me"></div>
<div class="equalize-me"></div>
</div></textarea>
</div>
</section>
<hr class="section-breaker">
<section class="whole grid">
<div class="whole smablet-half">
<h2>Responsive CSS</h2>
<p class="text-left">This example shows a small snippet of CSS designed to force height back to automatic when the screen width is smaller than a set amount. This stops large empty spaces appearing on mobile devices. You can modify the width and any other variables to suit your needs.</p>
</div>
<div class="whole smablet-half">
<h2> </h2>
<textarea class="code rounded">@media only screen and (max-width:799px) {
.equalize { height: auto !important; }
}</textarea>
</div>
</section>
<hr class="section-breaker">
<section class="whole grid">
<h2>jQuery.equalize</h2>
<p>
<a class="button rounded display-inline-block background-white color-belize-hole" href="https://www.jsdelivr.com/package/gh/eustasy/jQuery.equalize">CDN Delivery</a>
<a class="button rounded display-inline-block background-white color-belize-hole" href="https://github.com/eustasy/jQuery.equalize">GitHub</a>
</p>
<h6>v.1.8 · Zip · 6 KB</h6>
</section>
<hr class="section-breaker">
<footer>
<p>
<a href="https://github.com/eustasy/jQuery.equalize/blob/master/LICENSE.md">MIT License</a> ·
<a href="https://github.com/eustasy/jQuery.equalize">GitHub</a> ·
<a href="https://github.com/eustasy/jQuery.equalize/releases">Releases</a>
</p>
</footer>
<script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jackmoore/autosize@4/dist/autosize.min.js"></script>
<script>$(function(){autosize($('textarea'));});</script>
<script>$('textarea').one('click',function(){$(this).select();});</script>
<script>$('textarea').dblclick(function(){$(this).select();});</script>
<script src="jquery.equalize.js"></script>
<script>$(function(){equalize()});window.onresize=function(){equalize()}</script>
</body>
</html>