Updated

2013-02-20 10:38:25 +01:00
parent 17c3936ab6
commit 5d14b9e2d4
1919 changed files with 559755 additions and 2588 deletions
--- a/master/examples/abs.html
+++ b/master/examples/abs.html
@@ -0,0 +1,102 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+	<head>
+		<title>supplementary dojo.position() tests</title>
+		<style type="text/css">
+			@import "../../resources/dojo.css";
+		</style>
+		<script type="text/javascript" 
+			src="../../dojo.js" 
+			djConfig="isDebug: false"></script>
+		<script type="text/javascript">
+			function onButtonClick(){
+				/* position a red square over pressed button */
+				var pos = dojo.position(this, true);
+				var marker = document.createElement('div');
+				document.body.appendChild(marker);
+				marker.className = "marker";
+				marker.style.position="absolute";
+				marker.style.top = pos.y+"px";
+				marker.style.left = pos.x+"px";
+				console.log(marker);
+				return false;
+			}
+				
+			dojo.addOnLoad(function(){
+				dojo.query("body")[0].scrollTop = 50;
+				dojo.query("div").forEach("item.scrollTop = 50;");
+				dojo.query("button").attr("onclick", onButtonClick);
+				
+				/***
+					benchmark code
+				var buttons = dojo.query("button");
+				var start = new Date();
+				for(var i=0; i<100; i++){
+					for(var j=0; j<buttons.length; j++) dojo.position(buttons[j]);
+				}
+				alert("benchmark: "  + (new Date() - start));
+				****/
+			});
+		</script>
+		<style type="text/css">
+			html {
+				padding: 3px;
+				margin: 3px;
+				border: 7px solid yellow;
+			}
+			body {
+				padding: 10px;
+				margin: 20px;
+				border: 9px solid blue;
+			}
+
+			.marker {
+				/* little red square that goes on top of button (assuming _abs() is working) */
+				position: absolute;
+				overflow: hidden;
+				width: 10px;
+				height: 10px;
+				border: none;
+				margin: 0px;
+				padding: 0px;
+				background-color: red;
+			}
+
+			button {
+				position: absolute;
+			}
+			
+			div {
+				position: absolute;
+				border: 17px solid gray;
+				padding: 37px;
+				margin: 29px;
+				overflow: auto;
+			}
+
+		</style>
+	</head>
+	<body>
+		<h1>supplementary dojo.position() tests</h1>
+		<button style="top: 100px; left: 200px;">click</button>
+		<button style="top: 900px; left: 200px;">click</button>
+		<div id="outer" style="position: absolute; top: 300px; left: 100px; height: 400px; width: 600px;">
+			<button style="top: 50px; left: 200px;">click2</button>
+			<div id="middle" style="position: absolute; top: 100px; left: 100px; height: 400px; width: 400px; border-width:13px 11px 23px 7px;">
+				<div id="staticDiv" style="position: static; margin-top: 20px;">
+					<button style="position: static;">click3</button>
+					<br><br><br><br><br>
+					<button style="top: 50px; left: 200px;">click4</button>
+				</div>					
+				<div id="inner" style="position: absolute; top: 150px; left: 100px; height: 470px; width: 200px;">
+					<button style="position: static;">click5</button>
+					<button style="top: 500px; left: 100px;">click6</button>
+				</div>
+				<button style="position: static;">click7</button>
+				<button style="position: relative; top: 10px; left: 10px;" id="click8">click8</button>
+				<button style="top: 300px; left: 200px;">click9</button>
+			</div>
+		</div>
+	</body>
+</html>
+