<html>
<head>
<title>supplementary dojo.position() tests</title>
<style type="text/css">
@import "../../resources/dojo.css";
</style>
<script type="text/javascript"
src="../../dojo.js"
data-dojo-config="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>