| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <title>supplementary dojo.position() tests</title> |
|---|
| 5 | <style type="text/css"> |
|---|
| 6 | @import "../../resources/dojo.css"; |
|---|
| 7 | </style> |
|---|
| 8 | <script type="text/javascript" |
|---|
| 9 | src="../../dojo.js" |
|---|
| 10 | data-dojo-config="isDebug: false"></script> |
|---|
| 11 | <script type="text/javascript"> |
|---|
| 12 | function onButtonClick(){ |
|---|
| 13 | /* position a red square over pressed button */ |
|---|
| 14 | var pos = dojo.position(this, true); |
|---|
| 15 | var marker = document.createElement('div'); |
|---|
| 16 | document.body.appendChild(marker); |
|---|
| 17 | marker.className = "marker"; |
|---|
| 18 | marker.style.position="absolute"; |
|---|
| 19 | marker.style.top = pos.y+"px"; |
|---|
| 20 | marker.style.left = pos.x+"px"; |
|---|
| 21 | console.log(marker); |
|---|
| 22 | return false; |
|---|
| 23 | } |
|---|
| 24 | |
|---|
| 25 | dojo.addOnLoad(function(){ |
|---|
| 26 | dojo.query("body")[0].scrollTop = 50; |
|---|
| 27 | dojo.query("div").forEach("item.scrollTop = 50;"); |
|---|
| 28 | dojo.query("button").attr("onclick", onButtonClick); |
|---|
| 29 | |
|---|
| 30 | /*** |
|---|
| 31 | benchmark code |
|---|
| 32 | var buttons = dojo.query("button"); |
|---|
| 33 | var start = new Date(); |
|---|
| 34 | for(var i=0; i<100; i++){ |
|---|
| 35 | for(var j=0; j<buttons.length; j++) dojo.position(buttons[j]); |
|---|
| 36 | } |
|---|
| 37 | alert("benchmark: " + (new Date() - start)); |
|---|
| 38 | ****/ |
|---|
| 39 | }); |
|---|
| 40 | </script> |
|---|
| 41 | <style type="text/css"> |
|---|
| 42 | html { |
|---|
| 43 | padding: 3px; |
|---|
| 44 | margin: 3px; |
|---|
| 45 | border: 7px solid yellow; |
|---|
| 46 | } |
|---|
| 47 | body { |
|---|
| 48 | padding: 10px; |
|---|
| 49 | margin: 20px; |
|---|
| 50 | border: 9px solid blue; |
|---|
| 51 | } |
|---|
| 52 | |
|---|
| 53 | .marker { |
|---|
| 54 | /* little red square that goes on top of button (assuming _abs() is working) */ |
|---|
| 55 | position: absolute; |
|---|
| 56 | overflow: hidden; |
|---|
| 57 | width: 10px; |
|---|
| 58 | height: 10px; |
|---|
| 59 | border: none; |
|---|
| 60 | margin: 0px; |
|---|
| 61 | padding: 0px; |
|---|
| 62 | background-color: red; |
|---|
| 63 | } |
|---|
| 64 | |
|---|
| 65 | button { |
|---|
| 66 | position: absolute; |
|---|
| 67 | } |
|---|
| 68 | |
|---|
| 69 | div { |
|---|
| 70 | position: absolute; |
|---|
| 71 | border: 17px solid gray; |
|---|
| 72 | padding: 37px; |
|---|
| 73 | margin: 29px; |
|---|
| 74 | overflow: auto; |
|---|
| 75 | } |
|---|
| 76 | |
|---|
| 77 | </style> |
|---|
| 78 | </head> |
|---|
| 79 | <body> |
|---|
| 80 | <h1>supplementary dojo.position() tests</h1> |
|---|
| 81 | <button style="top: 100px; left: 200px;">click</button> |
|---|
| 82 | <button style="top: 900px; left: 200px;">click</button> |
|---|
| 83 | <div id="outer" style="position: absolute; top: 300px; left: 100px; height: 400px; width: 600px;"> |
|---|
| 84 | <button style="top: 50px; left: 200px;">click2</button> |
|---|
| 85 | <div id="middle" style="position: absolute; top: 100px; left: 100px; height: 400px; width: 400px; border-width:13px 11px 23px 7px;"> |
|---|
| 86 | <div id="staticDiv" style="position: static; margin-top: 20px;"> |
|---|
| 87 | <button style="position: static;">click3</button> |
|---|
| 88 | <br><br><br><br><br> |
|---|
| 89 | <button style="top: 50px; left: 200px;">click4</button> |
|---|
| 90 | </div> |
|---|
| 91 | <div id="inner" style="position: absolute; top: 150px; left: 100px; height: 470px; width: 200px;"> |
|---|
| 92 | <button style="position: static;">click5</button> |
|---|
| 93 | <button style="top: 500px; left: 100px;">click6</button> |
|---|
| 94 | </div> |
|---|
| 95 | <button style="position: static;">click7</button> |
|---|
| 96 | <button style="position: relative; top: 10px; left: 10px;" id="click8">click8</button> |
|---|
| 97 | <button style="top: 300px; left: 200px;">click9</button> |
|---|
| 98 | </div> |
|---|
| 99 | </div> |
|---|
| 100 | </body> |
|---|
| 101 | </html> |
|---|
| 102 | |
|---|
