Ruby on Rails | Screencasts | Download | Documentation | Weblog | Community | Source

Ticket #5017: scroll_test.htm

File scroll_test.htm, 5.1 kB (added by tomg@byu.net, 2 years ago)

Functional test

Line 
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title></title>
6 <script type="text/javascript" src="js/prototype.js"></script>
7 <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
8 <script type="text/javascript" src="js/dragdrop.js"></script>
9 <script type="text/javascript">
10 //<![CDATA[
11
12 Draggables.clear = function (event) {
13         while (Draggables.drags.length) {
14                 var d = Draggables.drags.pop();
15                 var e = d.element;
16                 d.stopScrolling();
17                 d.destroy();
18                 d.element = null;
19                 if (e.parentNode) {e.parentNode.removeChild(e)};
20         }
21 }
22
23 function cleanup() { //try to remove circular references
24         lis = document.getElementsByTagName("li");
25         for (i = 0; i < lis.length; i++) {
26                 if (lis[i].longListItem) {lis[i].longListItem.destroy();}
27                 else if (lis[i].container) {lis[i].container.destroy();}
28         }
29         Draggables.clear();
30 }
31
32 window.onload = function() {
33         var li = $("masterList").getElementsByTagName('LI');
34         for (var i = 0; i < li.length; i++) {
35                 //var d = new LongListItem(li[i]);
36                 //li[i].onmousedown = d.onMouseDown.bindAsEventListener(d);
37                 var d = new Draggable(li[i],
38                         {revert: true,
39                          ghosting: false,
40                          scroll: "rightContainers"
41                         });
42
43         }
44        
45         var divs = $("rightContainers").getElementsByTagName("div");
46         for (i = 0; i < divs.length; i++) {
47                 if (divs[i].className && Element.hasClassName(divs[i], "container")) {
48                         Droppables.add(divs[i].id, {hoverclass: "hover", scrollingParent: "rightContainers"});
49                 }
50         }
51         Event.observe(window, 'unload', cleanup, false);
52 }
53 //]]>
54 </script>
55 <style type="text/css">
56 html, body {
57         margin:0; padding: 0;
58         height: 100% !important;
59 }
60 body {
61         position:relative;
62         color: black;
63         background-color: white;
64         font-family: Verdana, Arial, Helvetica, sans-serif;
65         font-size: small;
66 }
67 h1 {font-size:115%;}
68 h2 {font-size: 110%;}
69 h3 {font-size: 105%;}
70 div, p, li, td {
71         font-family: Verdana, Arial, Helvetica, sans-serif;
72         font-size: small;
73 }
74 p {margin: 0 0 .7em 0; padding:0;}
75 ul {
76         position:relative;
77         list-style: none;
78         margin:0; padding:0;
79         overflow: visible;
80 }
81 li {position:relative;}
82
83 .instructions {font-style:italic;}
84 #leftDiv {
85         position: absolute;
86         top: 0; left: 0;        bottom: 0;
87         width: 30%;
88         margin: 0; padding: 7px;
89         border-right: 2px solid #bb9;
90         background-color: #eed;
91 }
92
93 #leftDiv li, #rightContainers div.container li  {
94         margin: 3px 0; padding: 3px 3em 3px 10px;
95         border: 2px solid #456;
96         background-color: #cde;
97         cursor: move;
98 }
99
100 #rightContainers {
101         padding: .5em;
102         position: absolute;
103         top: 0; bottom: 0; right: 0; left: 35%;
104         overflow:auto;
105 }
106
107 #rightContainers div.container{
108         background-color: #bb9;
109         margin: 0 0 40px 0; padding: 0 0 1px 0;
110         border: 2px solid #775;
111 }
112
113 #rightContainers div.container h2{
114         margin:0; padding: 2px 1em 0 1em;
115         text-align:center;
116 }
117
118 #rightContainers div.container ul {
119         margin: 5px; padding: 0 3px;
120         background-color: white;
121         border: 1px solid black;
122 }
123
124 #rightContainers div.container ul.empty {
125         padding: 3px 0;
126 }
127
128 #rightContainers div.hover {
129         background-color: #eed;
130 }
131 </style>
132 <!--[if IE]><style type="text/css">
133 #leftDiv {
134         height: expression((document.body.clientHeight - 44) + "px");
135 }
136 #leftDiv ul{width:93%;}
137 #leftDiv li div.count {
138         right:4px;
139         top:4px;
140 }
141 #rightContainers li a.remove {
142         display:block;
143         float:none;
144         position:absolute;
145         top: 4px;
146         right: 1.6em;   
147         margin:0; padding:0 .2em;
148 }
149 </style><![endif]-->
150 </head>
151 <body>
152 <div id="leftDiv" class="">
153 <form id="frmContinue" action="#" method="post">
154 <p class="instructions">Shrink your window until the right-hand pane is scrollable.</p>
155 <p class="instructions">Drag from the list on left to groups on the right, force the right-hand pane to scroll.</p>
156 <input name="data" type="hidden" value=" ">
157 </form>
158 <ul id="masterList">
159 <li id="drag1">One</li>
160 <li id="drag2">Two</li>
161 <li id="drag3">Three</li>
162 <li id="drag4">Four</li>
163 <li id="drag5">Five</li>
164 <li id="drag6">Six</li>
165 <li id="drag7">Seven</li>
166 <li id="drag8">Eight</li>
167 </ul>
168 </div>
169
170 <div id="rightContainers" class="">
171 </form>
172 <div id="grp1" class="container">
173         <h2><span id="grp1_name">Group 1</span></h2>
174         <ul id="grp1ul" class="empty"></ul>
175 </div>
176 <div id="grp2" class="container">
177         <h2><span id="grp2_name">Group 2</span></h2>
178         <ul id="grp2ul" class="empty"></ul>
179 </div>
180 <div id="grp3" class="container">
181         <h2><span id="grp3_name">Group 3</span></h2>
182         <ul id="grp3ul" class="empty"></ul>
183 </div>
184 <div id="grp4" class="container">
185         <h2><span id="grp4_name">Group 4</span></h2>
186         <ul id="grp4ul" class="empty"></ul>
187 </div>
188 <div id="grp5" class="container">
189         <h2><span id="grp5_name">Group 5</span></h2>
190         <ul id="grp5ul" class="empty"></ul>
191 </div>
192 <div id="grp6" class="container">
193         <h2><span id="grp6_name">Group 6</span></h2>
194         <ul id="grp6ul" class="empty"></ul>
195 </div>
196 <div id="grp7" class="container">
197         <h2><span id="grp7_name">Group 7</span></h2>
198         <ul id="grp7ul" class="empty"></ul>
199 </div>
200 <div id="grp8" class="container">
201         <h2><span id="grp8_name">Group 8</span></h2>
202         <ul id="grp8ul" class="empty"></ul>
203 </div>
204 <div id="grp9" class="container">
205         <h2><span id="grp9_name">Group 9</span></h2>
206         <ul id="grp9ul" class="empty"></ul>
207 </div>
208 </div>
209 </body>
210 </html>