root/public/javascripts/scriptaculous/test/functional/position_clone_test.html @ 5

Revision 1, 4.9 kB (checked in by falcon, 17 years ago)

Version one -> initial work from the laptop.
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4  <head>
5    <title>prototype.js Position.clone functional test</title>
6    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
7    <script src="../../lib/prototype.js" type="text/javascript"></script>
8    <script src="../../src/scriptaculous.js" type="text/javascript"></script>
9    <style type="text/css">
10      .margins   { margin:20px; }
11      .nomargins { margin:0; }
12    </style>
13  </head>
14  <body>
15
16
17  <div id="container" style="position:relative; top:10px; width:300px; height:100px; overflow: auto;">
18
19    <div id="container2" style="position:relative; top:10px; width:400px; height:150px; overflow: auto;">
20
21    <div id="test1" style="border:1px solid black; position:absolute; left: 100px; top: 10px; width:100px; height:200px;">
22       abs
23    </div>
24
25    <div id="test2" style="border:1px solid black; position:relative; left: 50px; top: 0px;">
26       rel
27    </div>
28
29    <div id="test3" style="border:1px solid black; position:static;">
30       static
31    </div>
32
33  </div>
34
35  </div>
36
37  <div id="c3" style="position:absolute;top:140px;left:55px;width:100px;height:20px;">
38    abs-body child
39  </div>
40
41  <p id="p1" style="background-color:#eee;">
42    unpositioned p
43  </p>
44
45    <script type="text/javascript" language="javascript">
46    // <![CDATA[
47    function d(el, marker) {
48      $('debug').innerHTML = 
49        'orig:  ' + Object.inspect(Position.page($(el))) + ', ' +
50        'clone: ' + Object.inspect(Position.page($(marker)));
51    }
52    function testA(el) {
53      Position.clone(el, 'marker');
54      d(el, 'marker');
55    }
56    function testB(el) {
57      Element.hide('marker2');
58      Position.clone(el, 'marker2');
59      Element.show('marker2');
60      d(el, 'marker2');
61    }
62    function testC(el) {
63      Position.clone(el, 'marker3');
64      d(el, 'marker3');
65    }
66    function testD(el) {
67      Position.clone(el, 'marker4');
68      d(el, 'marker4');
69    }
70    // ]]>
71    </script>
72
73    <div id="actions" style="position:absolute;top:400px;">
74      <a href="#" onclick="Element.toggle('big'); return false;">Toggle page scrolling</a> |
75      Page margings: <a href="#" onclick="document.body.className = 'margins'">on</a> |
76      <a href="#" onclick="document.body.className = 'nomargins'">off</a>
77      <br/><br/>
78      Absolute marker in position:relative container DIV:<br/>
79      <a href="#" onclick="testA('test1'); return false;">Mark abs</a> |
80      <a href="#" onclick="testA('test2'); return false;">Mark rel</a> |
81      <a href="#" onclick="testA('test3'); return false;">Mark static</a> |
82      <a href="#" onclick="testA('c3'); return false;">Mark abs-body child</a> |
83      <a href="#" onclick="testA('p1'); return false;">Mark p</a>
84      <br/><br/>
85      Hidden marker (display:none), in position:relative container DIV switched on when clone is finished:<br/>
86      <a href="#" onclick="testB('test1'); return false;">Mark abs</a> |
87      <a href="#" onclick="testB('test2'); return false;">Mark rel</a> |
88      <a href="#" onclick="testB('test3'); return false;">Mark static</a> |
89      <a href="#" onclick="testB('c3'); return false;">Mark abs-body child</a> |
90      <a href="#" onclick="testB('p1'); return false;">Mark p</a>
91      <br/><br/>
92      Absolute marker, child of BODY:<br/>
93      <a href="#" onclick="testC('test1'); return false;">Mark abs</a> |
94      <a href="#" onclick="testC('test2'); return false;">Mark rel</a> |
95      <a href="#" onclick="testC('test3'); return false;">Mark static</a> |
96      <a href="#" onclick="testC('c3'); return false;">Mark abs-body child</a> |
97      <a href="#" onclick="testC('p1'); return false;">Mark p</a>
98      <br/><br/>
99      Fixed marker, child of BODY:<br/>
100      <a href="#" onclick="testD('test1'); return false;">Mark abs</a> |
101      <a href="#" onclick="testD('test2'); return false;">Mark rel</a> |
102      <a href="#" onclick="testD('test3'); return false;">Mark static</a> |
103      <a href="#" onclick="testD('c3'); return false;">Mark abs-body child</a> |
104      <a href="#" onclick="testD('p1'); return false;">Mark p</a> |
105      <div id="debug"></div>
106   </div>
107
108   <div id="marker-container" style="position:relative;left:400px;top:20px;width:100px;height:100px;">
109     <div id="blah" style="top:20px;">
110     <div id="marker" style="position:absolute;background-color:#f00;opacity:0.5;z-index:10000;width:10px;height:10px;">!</div>
111     </div>
112     <div id="marker2" style="display:none;position:absolute;background-color:#0f0;opacity:0.5;z-index:10000;width:10px;height:10px;">!</div>
113  </div>
114 
115 
116
117  <div id="marker3" style="position:absolute;background-color:#00f;opacity:0.5;z-index:10000;width:10px;height:10px;">!</div>
118 
119  <div id="marker4" style="position:fixed;background-color:#08f;opacity:0.5;z-index:10000;width:10px;height:10px;">!</div>
120
121  <div id="big" style="display:none;height:10000px;"> </div>
122
123  </body>
124</html>
Note: See TracBrowser for help on using the browser.