forked from tsvensen/equalize.js
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
132 lines (100 loc) · 5.24 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>equalize.js</title>
<link href="css/style.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Lato:700italic,900italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<h1>equalize.js</h1>
<h3>The jQuery plugin for equalizing the height <span>or width</span> of elements</h3>
<div id="author"><iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1347008535.html#_=1347293944835&id=twitter-widget-0&lang=en&screen_name=tsvensen&show_count=false&show_screen_name=true&size=l" class="twitter-follow-button" style="width: 169px; height: 28px;" title="Twitter Follow Button" data-twttr-rendered="true"></iframe> <span>Created by <a href="http://timsvensen.com" target="_blank">Tim Svensen</a></span></div>
<a href="https://github.com/tsvensen/equalize.js/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<h2>Download</h2>
<p>Equalize.js <a href="https://github.com/tsvensen/equalize.js/" target="_blank">on github</a>. Download it <a href="https://github.com/tsvensen/equalize.js/zipball/master/" target="_blank">here</a>.</p>
<h2>How to Use</h2>
<p>Call the plugin on the parent of the elements to equalize their height.</p>
<pre>$('#height-example').equalize();</pre>
<p>Equalize will accept any of the <a target="_blank" href="http://api.jquery.com/category/dimensions/">jQuery Dimension</a> methods: height, outerHeight, innerHeight, width, outerWidth, innerWidth.</p>
<pre>$('.parent').equalize('height'); // default, same as above
$('.parent').equalize('outerHeight');
$('.parent').equalize('innerHeight');
$('.parent').equalize('width');
$('.parent').equalize('outerWidth');
$('.parent').equalize('innerWidth');</pre>
<h2>Advanced Usage</h2>
<p>Equalize will now accept a settings object to get the "minimum max dimension". By setting reset to true the height/width will be removed before determining the max. See the <a href="#run-advanced">advanced example</a> below.</p>
<pre>$('.parent').equalize({reset: true}); // default to height
$('.parent').equalize({equalize: 'width', reset: true});</pre>
<p>This advanced usage is for dynamic instances where equalize is ran after elements are added or removed to maintain minimum max height or width.</p>
<p>Equalize the .parent's child element. See @larsbo's <a href="http://jsfiddle.net/4QTNP/3/">example</a>.</p>
<pre>$('.parent').equalize({children: 'p'}); // equalize height of paragraphs within .parent</pre>
<h2>Height Example <a id="run-height" href="#height-example">run »</a></h2>
<pre>$('#height-example').equalize(); // defaults to height</pre>
<div id="height-example" class="example">
<div>equalize</div>
<div>equalize content height</div>
<div>equalize</div>
<div>equalize</div>
<div>equalize</div>
<div>equalize content</div>
<div>equalize</div>
<div>equalize</div>
<div>equalize content height</div>
<div>equalize</div>
</div>
<h2>Width Example <a id="run-width" href="#width-example">run »</a></h2>
<pre>$('#width-example').equalize('width');</pre>
<div id="width-example" class="example">
<div>Example</div>
<div>equalizing</div>
<div>the</div>
<div>width</div>
</div>
<h2>Advanced Example <a id="run-advanced" href="#advanced-example">run »</a></h2>
<pre>$('#height-example').equalize({reset: true});</pre>
<p>Below the tallest div has a height of 200px, this will be removed before determining the max height, otherwise all elements would have a height of 200px.</p>
<div id="advanced-example" class="example">
<div>equalize</div>
<div>equalize content height</div>
<div style="height:200px;">equalize</div>
<div>equalize</div>
<div>equalize</div>
<div>equalize content</div>
<div>equalize</div>
<div>equalize</div>
<div>equalize content height</div>
<div>equalize</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.8.1.min.js"><\/script>')</script> </script>
<script src="js/equalize.js" type="text/javascript"></script>
<script>
$(document).on('click', 'h2 a', function(e) {
e.preventDefault();
if (this.id === 'run-advanced') {
// reset all the heights to get the minimum max height
$('#advanced-example').equalize({reset: true});
} else if (this.id === 'run-height') {
$('#height-example').equalize(); // defaults to height
} else {
$('#width-example').equalize('width');
}
$(this).replaceWith('<span>ran</span>');
});
</script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34991331-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>