JavaScript DHTML/Scriptaculous/Clone
prototype.js Position.clone functional test
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <title>prototype.js Position.clone functional test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <style type="text/css"> .margins { margin:20px; } .nomargins { margin:0; } </style> </head> <body>
abs
rel
static
abs-body child
unpositioned p
<script type="text/javascript" language="javascript"> function d(el, marker) { $("debug").innerHTML = "orig: " + Object.inspect(Position.page($(el))) + ", " + "clone: " + Object.inspect(Position.page($(marker))); } function testA(el) { Position.clone(el, "marker"); d(el, "marker"); } function testB(el) { Element.hide("marker2"); Position.clone(el, "marker2"); Element.show("marker2"); d(el, "marker2"); } function testC(el) { Position.clone(el, "marker3"); d(el, "marker3"); } function testD(el) { Position.clone(el, "marker4"); d(el, "marker4"); } </script>
<a href="#" onclick="Element.toggle("big"); return false;">Toggle page scrolling</a> | Page margings: <a href="#" onclick="document.body.className = "margins"">on</a> | <a href="#" onclick="document.body.className = "nomargins"">off</a>
Absolute marker in position:relative container DIV:
<a href="#" onclick="testA("test1"); return false;">Mark abs</a> | <a href="#" onclick="testA("test2"); return false;">Mark rel</a> | <a href="#" onclick="testA("test3"); return false;">Mark static</a> | <a href="#" onclick="testA("c3"); return false;">Mark abs-body child</a> | <a href="#" onclick="testA("p1"); return false;">Mark p</a>
Hidden marker (display:none), in position:relative container DIV switched on when clone is finished:
<a href="#" onclick="testB("test1"); return false;">Mark abs</a> | <a href="#" onclick="testB("test2"); return false;">Mark rel</a> | <a href="#" onclick="testB("test3"); return false;">Mark static</a> | <a href="#" onclick="testB("c3"); return false;">Mark abs-body child</a> | <a href="#" onclick="testB("p1"); return false;">Mark p</a>
Absolute marker, child of BODY:
<a href="#" onclick="testC("test1"); return false;">Mark abs</a> | <a href="#" onclick="testC("test2"); return false;">Mark rel</a> | <a href="#" onclick="testC("test3"); return false;">Mark static</a> | <a href="#" onclick="testC("c3"); return false;">Mark abs-body child</a> | <a href="#" onclick="testC("p1"); return false;">Mark p</a>
Fixed marker, child of BODY:
<a href="#" onclick="testD("test1"); return false;">Mark abs</a> | <a href="#" onclick="testD("test2"); return false;">Mark rel</a> | <a href="#" onclick="testD("test3"); return false;">Mark static</a> | <a href="#" onclick="testD("c3"); return false;">Mark abs-body child</a> | <a href="#" onclick="testD("p1"); return false;">Mark p</a> |
!
!
!
</body>
</html>
</source>