-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathsame_height.html
87 lines (70 loc) · 1.68 KB
/
same_height.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
<!DOCTYPE html>
<title>jquery.sameheight demo</title>
<style>
div, p {
overflow: auto;
margin:2px;
padding:2px;
}
#nav, #content, #someParagraphs {
width:500px;
clear:both;
}
.sh_nav {
float:left;
width:30%;
border:1px solid #00c;
border-radius:7px;
}
.sh_content {
float:left;
width:45%;
border:1px solid #c00;
border-radius:10px;
}
#someParagraphs p {
float:left;
width: 20%;
border:1px solid #0c0;
}
</style>
<div id="nav">
<div class="sameheight sh_nav">Some content</div>
<div class="sameheight sh_nav">
Some more content
Some more content
Some more content
Some more content
Some more content
Some more content
</div>
<div class="sameheight sh_nav">Some similar content</div>
</div>
<div id="content">
<div class="sameheight sh_content">
Other content
Other content
Other content
Other content
</div>
<div class="sameheight sh_content">Other content</div>
</div>
<div id="someParagraphs">
<p>A paragraph
<p>
A much, much longer paragraph that goes on and on and on and on and on and
on and on and on and on and on and on and on and on and on and on and on...
<p>A short paragraph again
<p>
Some kind of unexpected medium-sized paragraph that doesn't go on so long
as the second one.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.sameheight.js"></script>
<script>
$(function() {
$.sameHeight();
// I'll set them to the same height, then turn them blue to show that jQuery chaining still works.
$('#someParagraphs p').sameHeight().css({color: 'blue'});
});
</script>