Ticket #5067: locationtest.html

File locationtest.html, 4.1 KB (added by Russell Keith-Magee, 17 years ago)

Demonstration of the problem, and the fix in action.

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3<html>
4<head>
5<style type="text/css">
6.left
7{
8 background: yellow;
9 position: fixed;
10 left: 0;
11 top: 0;
12 bottom: 0;
13 width: 400px;
14 overflow: scroll;
15}
16.right
17{
18 background: grey;
19 position: fixed;
20 left: 400px;
21 top: 0;
22 bottom: 0;
23 right: 0;
24 overflow: scroll;
25}
26</style>
27<script type="text/javascript">
28function fixed_findPosX(obj) {
29 var curleft = 0;
30 if (obj.offsetParent) {
31 while (obj.offsetParent) {
32 curleft += obj.offsetLeft - obj.scrollLeft;
33 obj = obj.offsetParent;
34 }
35 // IE offsetParent does not include the top-level
36 if (navigator.appName == "Microsoft Internet Explorer" && obj.parentElement){
37 curleft += obj.offsetLeft - obj.scrollLeft;
38 }
39 } else if (obj.x) {
40 curleft += obj.x;
41 }
42 return curleft;
43}
44
45function fixed_findPosY(obj) {
46 var curtop = 0;
47 if (obj.offsetParent) {
48 while (obj.offsetParent) {
49 curtop += obj.offsetTop - obj.scrollTop;
50 obj = obj.offsetParent;
51 }
52 // IE offsetParent does not include the top-level
53 if (navigator.appName == "Microsoft Internet Explorer" && obj.parentElement){
54 curtop += obj.offsetTop - obj.scrollTop;
55 }
56 } else if (obj.y) {
57 curtop += obj.y;
58 }
59 return curtop;
60}
61function findPosX(obj) {
62 var curleft = 0;
63 if (obj.offsetParent) {
64 while (obj.offsetParent) {
65 curleft += obj.offsetLeft;
66 obj = obj.offsetParent;
67 }
68 } else if (obj.x) {
69 curleft += obj.x;
70 }
71 return curleft;
72}
73
74function findPosY(obj) {
75 var curtop = 0;
76 if (obj.offsetParent) {
77 while (obj.offsetParent) {
78 curtop += obj.offsetTop;
79 obj = obj.offsetParent;
80 }
81 } else if (obj.y) {
82 curtop += obj.y;
83 }
84 return curtop;
85}
86
87function popup()
88{
89 obj = document.getElementById("link");
90 locunfixed = "Unfixed Location x=" + findPosX(obj) + ", y=" + findPosY(obj);
91 locfixed = "Fixed Location x=" + fixed_findPosX(obj) + ", y=" + fixed_findPosY(obj);
92 target = document.getElementById("targetdiv");
93 target.innerHTML = "<p>"+locunfixed+"</p><p>"+locfixed+"</p>";
94
95}
96</script>
97</head>
98<body>
99<div id="targetdiv" class="right">
100</div>
101<div class="left">
102 <p>Loooooooong text to make it scrooooooooooooooooooooooooooooooooooooooooollllllllllllllllllllllllllllllllllllllllllllllllll........................</p>
103 <p>text</p>
104 <p>text</p>
105 <p>text</p>
106 <p>text</p>
107 <p>text</p>
108 <p>text</p>
109 <p>text</p>
110 <p>text</p>
111 <p>text</p>
112 <p>text</p>
113 <p>text</p>
114 <a id="link" href="javascript:popup();">Click me, Click me, Click me, Click me, Click me, Click me, Click me, Click me </a>
115 <p>text</p>
116 <p>text</p>
117 <p>text</p>
118 <p>text</p>
119 <p>text</p>
120 <p>text</p>
121 <p>text</p>
122 <p>text</p>
123 <p>text</p>
124 <p>text</p>
125 <p>text</p>
126 <p>text</p>
127 <p>text</p>
128 <p>text</p>
129 <p>text</p>
130 <p>text</p>
131 <p>text</p>
132 <p>text</p>
133 <p>text</p>
134 <p>text</p>
135 <p>text</p>
136 <p>text</p>
137 <p>text</p>
138 <p>text</p>
139 <p>text</p>
140 <p>text</p>
141 <p>text</p>
142 <p>text</p>
143 <p>text</p>
144 <p>text</p>
145 <p>text</p>
146 <p>text</p>
147 <p>text</p>
148 <p>text</p>
149 <p>text</p>
150 <p>text</p>
151 <p>text</p>
152 <p>text</p>
153 <p>text</p>
154 <p>text</p>
155 <p>text</p>
156 <p>text</p>
157 <p>text</p>
158 <p>text</p>
159 <p>text</p>
160 <p>text</p>
161 <p>text</p>
162 <p>text</p>
163 <p>text</p>
164 <p>text</p>
165 <p>text</p>
166 <p>text</p>
167 <p>text</p>
168 <p>text</p>
169 <p>text</p>
170 <p>text</p>
171 <p>text</p>
172 <p>text</p>
173 <p>text</p>
174 <p>text</p>
175 <p>text</p>
176 <p>text</p>
177 <p>text</p>
178 <p>text</p>
179 <p>text</p>
180 <p>text</p>
181 <p>text</p>
182 <p>text</p>
183 <p>text</p>
184 <p>text</p>
185 <p>text</p>
186 <p>text</p>
187 <p>text</p>
188 <p>text</p>
189 <p>text</p>
190 <p>text</p>
191 <p>text</p>
192 <p>text</p>
193 <p>text</p>
194 <p>text</p>
195 <p>text</p>
196 <p>text</p>
197 <p>text</p>
198 <p>text</p>
199 <p>text</p>
200 <p>text</p>
201 <p>text</p>
202 <p>text</p>
203</div>
204</body>
Back to Top