@qooxdoo/framework
Version:
The JS Framework for Coders
100 lines (86 loc) • 4.98 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../helper.js"></script>
<style>
#moveable{ font-size: 0px; line-height: 0px; position: absolute; top: 110px; left: 250px; width: 30px; height: 30px; border: 6px dashed red; }
#static { position: static; margin: 5px; border: 2px solid #000; padding: 3px; width: 200px; height: 200px; background-color: #822; }
#staticChild1 { position: static; margin: 5px; border: 2px solid #000; padding: 3px; width: 150px; height: 150px; background-color: #092; }
#staticChild2 { position: static; margin: 5px; border: 2px solid #000; padding: 3px; width: 100px; height: 100px; background-color: #980; }
#relative { position: relative; top: 5px; left: 5px; margin: 5px; border: 2px solid #000; padding: 3px; width: 200px; height: 200px; background-color: #822; }
#relativeChild1 { position: relative; top: 5px; left: 5px; margin: 5px; border: 2px solid #000; padding: 3px; width: 150px; height: 150px; background-color: #092; }
#relativeChild2 { position: relative; top: -5px; left: -5px; margin: 5px; border: 2px solid #000; padding: 3px; width: 100px; height: 100px; background-color: #980; }
#absolute { position: absolute; top: 200px; right: 10px; margin: 5px; border: 2px solid #000; padding: 3px; width: 200px; height: 200px; background-color: #822; }
#absoluteChild1 { position: absolute; top: -100px; right: -10px; margin: 5px; border: 2px solid #000; padding: 3px; width: 150px; height: 150px; background-color: #092; }
#absoluteChild2 { position: absolute; top: 100px; right: 10px; margin: 5px; border: 2px solid #000; padding: 3px; width: 100px; height: 100px; background-color: #980; }
#absolute2 { position: absolute; top: 300px; left: 400px; margin: 5px; border: 2px solid #000; padding: 3px; width: 100px; height: 100px; background-color: #822; }
#relative2 { position: relative; top: 50px; left: 50px; margin: 5px; border: 2px solid #000; padding: 3px; width: 300px; height: 300px; background-color: #092; }
#static2 { overflow: hidden; position: static; margin: 5px; border: 2px solid #000; padding: 3px; width: 250px; height: 250px; background-color: #980; }
#relative3 { overflow: auto; position: relative; top: 10px; left: 10px; margin: 5px; border: 2px solid #000; padding: 3px; width: 200px; height: 200px; background-color: #822; }
#absolute3 { position: absolute; top: 30px; right: -90px; margin: 5px; border: 2px solid #000; padding: 3px; width: 200px; height: 200px; background-color: #092; }
#static3 { position: static; margin: 10px; border: 2px solid #000; padding: 3px; width: 250px; height: 250px; background-color: #980; }
#inline { display: inline; border: 2px solid #000; }
body {margin-top: 30px; margin-left: 20px;}
</style>
</head>
<body>
<p>
Select a div to move the grey box too. (Quirks-Mode)
<select id="mode">
<option value="margin">margin</option>
<option value="box" selected="selected">box</option>
<option value="border">border</option>
<option value="scroll">scroll</option>
<option value="padding">padding</option>
</select>
<a href="javascript:demobrowser.demo.bom.Location.randomize()">Randomize</a>
</p>
<ul id="list">
<li><a href="#static">Move to static 1</a></li>
<li><a href="#staticChild1">Move to static child 1</a></li>
<li><a href="#staticChild2">Move to static child 2</a></li>
<li><a href="#relative">Move to relative 1</a></li>
<li><a href="#relativeChild1">Move to relative child 1</a></li>
<li><a href="#relativeChild2">Move to relative child 2</a></li>
<li><a href="#absolute">Move to absolute 1</a></li>
<li><a href="#absoluteChild1">Move to absolute child 1</a></li>
<li><a href="#absoluteChild2">Move to absolute child 2</a></li>
<li><a href="#absolute2">Move to absolute 2</a></li>
<li><a href="#relative2">Move to relative 2</a></li>
<li><a href="#static2">Move to static 2</a></li>
<li><a href="#relative3">Move to relative 3</a></li>
<li><a href="#absolute3">Move to absolute 3</a></li>
<li><a href="#static3">Move to static 3</a></li>
<li><a href="#inline">Move to inline 1</a></li>
</ul>
<div id="static"> Static 1
<div id="staticChild1"> Static Child 1
<div id="staticChild2"> Static Child 2</div>
</div>
</div>
<div id="relative"> Relative 1
<div id="relativeChild1"> Relative Child 1
<div id="relativeChild2"> Relative Child 2</div>
</div>
</div>
<div id="absolute"> Absolute 1
<div id="absoluteChild1"> Absolute Child 1
<div id="absoluteChild2"> Absolute Child 2</div>
</div>
</div>
<div id="absolute2"> Absolute 2
<div id="relative2"> Relative 2
<div id="static2"> Static 2
<div id="relative3"> Relative 3
<div id="absolute3"> Absolute 3
<div id="static3"> Static 3
<div id="inline">Inline 1</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="moveable"></div>
</body>
</html>