syncHeight/index-sync-siblings-only.html at master · ginader/syncHeight · GitHub

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>test</title>
	<style>
	* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
	p{
		outline:1px solid red;
	}
	.parent{
		outline:1px solid teal;
		display: inline-block;
		width: 49%;
		vertical-align: top;
	}
	</style>
	<script src="jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="jquery.syncheight.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
	$(window).on('load resize', function(){
		$('.parent').each( function() {
			$(this).children('p').syncHeight({ 'updateOnResize': true});
		});
	});
	</script>
</head>

<body>
	<div class="parent">
		<p>blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla blabla bla blabla bla</p>
		<p>blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla </p>
	</div>
	<div class="parent">
		<p>blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla blablabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla </p>
		<p>blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla bla </p>
	</div>

</body>
</html>