-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathexample.html
66 lines (48 loc) · 3.91 KB
/
example.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
<!DOCTYPE html><html lang="en"><head><title>NewHeights jQuery Plugin Examples</title><!-- Include jQuery--><script src="http://code.jquery.com/jquery.js"></script><!-- Include the NewHeights plugin--><script src="jquery.newheights.js"></script><!-- script(src='https://raw.github.com/MichaelJCole/newheights/master/jquery.newheights.js')--><!-- Use the plugin--><script type="text/javascript">$(document).ready(function () {
// number or default: Update every 500ms
$('#default span').newHeights(500);
// $('#default li').newHeights(); // same
// resize: Update 100ms after browser resize is complete
$('#resize span').newHeights('resize');
// once: Update just once. On documentReady. Refresh to resize.
$('#once span').newHeights('once');
})
</script><!-- Style the examples--><style type="text/css">.example {
margin: 1%;
background: #aaaaaa;
}
span {
display: inline-block;
vertical-align: top;
margin: 1%;
width: 29%;
padding: 1%;
background: #dddddd;
}
</style><!-- Style this document--><style type="text/css">body { font-family: Verdana; font-size: 13px; background: #eee; }
h1, h2, h3 { font-size: 22px; color: #464646; }
h2 { font-size: 18px; }
h3 { font-size: 14px; }
a { color: #C2575B; text-decoration: none; }
a:hover { color: #F76F76; }
</style></head><body><h1>NewHeights jQuery Plugin</h1>
<p>jQuery plugin, for responsive pages, to set tags to same height. Happens during/after browser resize.</p>
<h2>Usage:</h2>
<pre><code>$(selector).newHeights(refresh = 500)
selector = any jQuery selector or elements you want to be the same height
refresh = number (ms) for timer to continually resize - looks better
OR 'resize' only after browser resize
OR 'once' to resize only once</code></pre>
<h2>What it does:</h2>
<pre><code>1) Selects set of all elements that match `selector`
2) Calculates max_height of all elements in set
3) Sets height of all elements in set to max_height
4) Refreshes based on `refresh` parameter.</code></pre>
<h2>Example syntax:</h2>
<p>Coffeescript:</p>
<pre><code># Set all h3's in list to same height. Refresh every 500ms
$('#home .fancyBoxes .list .item h3').newHeights()</code></pre>
<p>Javascript:</p>
<pre><code>// Set all .preface tags in list to same height on browser resize
$('#home .fancyBoxes .list .item .preface').newHeights('resize')</code></pre>
<p>See below or <a href="http://htmlpreview.github.io/?https://github.com/MichaelJCole/newheights/blob/master/example.html">example.html</a> for examples.</p><h2>Inline examples:</h2><p>Resize your browser to see the plugin resize the examples below. <a href="https://github.com/MichaelJCole/newheights/blob/master/example.html">View source</a> to see the code and examples.</p><h3>$('#default span').newHeights(500): Update every 500ms</h3><div id="default" class="example"><span>Long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis nibh lacus, et convallis sem blandit commodo.</span><span>Medium Content. Lorem ipsum dolor sit amet.</span><span>Short content.</span></div><h3>$('#resize span').newHeights('resize'): Update after browser resize is complete</h3><div id="resize" class="example"><span>Long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis nibh lacus, et convallis sem blandit commodo.</span><span>Medium Content. Lorem ipsum dolor sit amet.</span><span>Short content.</span></div><h3>$('#once span').newHeights('once'): Update just once.</h3><p>Refresh to resize on ready() or <input type="button" value="click here" onclick="$('#once span').newHeights('once');"></p><div id="once" class="example"><span>Long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis nibh lacus, et convallis sem blandit commodo.</span><span>Medium Content. Lorem ipsum dolor sit amet.</span><span>Short content.</span></div></body></html>