jquerypp/event/resize/resize.html at master · NodeJSDevelopment/jquerypp · 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
44
45
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>selection</title>
        <style type='text/css'>
            body {font-family: verdana}
            .error {border: solid 1px red;}
            .error_text { color: red; font-size: 10px;}
            td {padding: 3px;}
			.resizable {border: solid 1px red;

			}
        </style>
	</head>
	<body>
		<h1>Click an element to see who gets resized as a result.  Elements with red borders are
		resizable.</h1>
		<ul class='resizable'>
			<li>Hello World</li>
			<li><p>Hello World2</p>
				<ul>
					<li class='resizable'>Another Item</li>
				</ul>
			</li>
			<li>JavaScriptMVC is just WAY smart</li>
		</ul>
		<script type='text/javascript' src='../../node_modules/steal/steal.js' main='@empty'></script>
		</script>
		<script type='text/javascript'>
			steal('jquerypp/event/resize', function(){
				$('.resizable').bind('resize', function(){
					var self = $(this);
					self.css("border-color","blue");
					setTimeout(function(){
						self.css("border-color","red");
					},1000);
				});
				$(window).click(function(ev){
					$(ev.target).trigger("resize")
				})
			});
		</script>
	</body>
</html>