|
1
|
1 // fixed.js: fix fixed positioning and fixed backgrounds in IE/Win
|
|
|
2 // version 1.8, 08-Aug-2003
|
|
|
3 // written by Andrew Clover <and@doxdesk.com>, use freely
|
|
|
4
|
|
|
5 /*@cc_on
|
|
|
6 @if (@_win32 && @_jscript_version>4)
|
|
|
7
|
|
|
8 var fixed_positions= new Array();
|
|
|
9 var fixed_backgrounds= new Array();
|
|
|
10 var fixed_viewport;
|
|
|
11
|
|
|
12 // Initialisation. Called when the <body> tag arrives. Set up viewport so the
|
|
|
13 // rest of the script knows we're going, and add a measurer div, used to detect
|
|
|
14 // font size changes and measure image sizes for backgrounds later
|
|
|
15
|
|
|
16 function fixed_init() {
|
|
|
17 fixed_viewport= (document.compatMode=='CSS1Compat') ?
|
|
|
18 document.documentElement : document.body;
|
|
|
19 var el= document.createElement('div');
|
|
|
20 el.setAttribute('id', 'fixed-measure');
|
|
|
21 el.style.position= 'absolute';
|
|
|
22 el.style.top= '0'; el.style.left= '0';
|
|
|
23 el.style.overflow= 'hidden'; el.style.visibility= 'hidden';
|
|
|
24 el.style.fontSize= 'xx-large'; el.style.height= '5em';
|
|
|
25 el.style.setExpression('width', 'fixed_measureFont()');
|
|
|
26 document.body.insertBefore(el, document.body.firstChild);
|
|
|
27 }
|
|
|
28
|
|
|
29 // Binding. Called every time an element is added to the document, check it
|
|
|
30 // for fixed features, if found add to our lists and set initial props
|
|
|
31
|
|
|
32 function fixed_bind(el) {
|
|
|
33 var needLayout= false;
|
|
|
34 var tag= el.tagName.toLowerCase();
|
|
|
35 var st= el.style;
|
|
|
36 var cst= el.currentStyle;
|
|
|
37 var anc;
|
|
|
38
|
|
|
39 // find fixed-position elements
|
|
|
40 if (cst.position=='fixed') {
|
|
|
41 needLayout= true;
|
|
|
42 fixed_positions[fixed_positions.length]= el;
|
|
|
43 // store original positioning as we'll overwrite it
|
|
|
44 st.position= 'absolute';
|
|
|
45 st.fixedPLeft= cst.left;
|
|
|
46 st.fixedPTop= cst.top;
|
|
|
47 st.fixedPRight= cst.right;
|
|
|
48 st.fixedPBottom= cst.bottom;
|
|
|
49 st.fixedPWidth= fixed_parseLength(cst.width);
|
|
|
50 st.fixedPHeight= fixed_parseLength(cst.height);
|
|
|
51 // find element that will act as containing box, for convenience later
|
|
|
52 st.fixedCB= null;
|
|
|
53 for (anc= el; (anc= anc.parentElement).parentElement;) {
|
|
|
54 if (anc.currentStyle.position!='static') {
|
|
|
55 st.fixedCB= anc;
|
|
|
56 break;
|
|
|
57 } }
|
|
|
58 // detect nested fixed positioning (only ancestor need move)
|
|
|
59 st.fixedNest= false;
|
|
|
60 for (anc= el; anc= anc.parentElement;) {
|
|
|
61 if (anc.style.fixedNest!=null)
|
|
|
62 st.fixedNest= true;
|
|
|
63 break;
|
|
|
64 }
|
|
|
65 }
|
|
|
66
|
|
|
67 // find fixed-background elements (not body/html which IE already gets right)
|
|
|
68 if (cst.backgroundAttachment=='fixed' && tag!='body' && tag!='html') {
|
|
|
69 needLayout= true;
|
|
|
70 fixed_backgrounds[fixed_backgrounds.length]= el;
|
|
|
71 // get background offset, converting from keyword if necessary
|
|
|
72 st.fixedBLeft= fixed_parseLength(cst.backgroundPositionX);
|
|
|
73 st.fixedBTop= fixed_parseLength(cst.backgroundPositionY);
|
|
|
74 // if it's a non-zero %age, need to know size of image for layout
|
|
|
75 if (st.fixedBLeft[1]=='%' || st.fixedBTop[1]=='%') {
|
|
|
76 st.fixedBWidth= 0; st.fixedBHeight= 0;
|
|
|
77 fixed_measureBack(el);
|
|
|
78 }
|
|
|
79 }
|
|
|
80 if (needLayout) fixed_layout();
|
|
|
81 }
|
|
|
82
|
|
|
83 // Layout. On every window or font size change, recalculate positioning
|
|
|
84
|
|
|
85 // Request re-layout at next free moment
|
|
|
86 var fixed_delaying= false;
|
|
|
87 function fixed_delayout() {
|
|
|
88 if (fixed_delaying) return;
|
|
|
89 fixed_delaying= true;
|
|
|
90 window.setTimeout(fixed_layout, 0);
|
|
|
91 }
|
|
|
92
|
|
|
93 var fixed_ARBITRARY= 200;
|
|
|
94
|
|
|
95 function fixed_layout() {
|
|
|
96 fixed_delaying= false;
|
|
|
97 if (!fixed_viewport) return;
|
|
|
98 var i, el, st, j, pr, tmp, A= 'auto';
|
|
|
99 var cb, cbLeft, cbTop, cbRight, cbBottom, oLeft, oTop, oRight, oBottom;
|
|
|
100 var vpWidth=fixed_viewport.clientWidth, vpHeight=fixed_viewport.clientHeight;
|
|
|
101
|
|
|
102 // calculate initial position for fixed-position elements [black magic]
|
|
|
103 for (i= fixed_positions.length; i-->0;) {
|
|
|
104 el= fixed_positions[i]; st= el.style;
|
|
|
105 // find positioning of containing block
|
|
|
106 cb= st.fixedCB; if (!cb) cb= fixed_viewport;
|
|
|
107 cbLeft= fixed_pageLeft(cb); cbTop= fixed_pageTop(cb);
|
|
|
108 if (cb!=fixed_viewport) { cbLeft+= cb.clientLeft; cbTop+= cb.clientTop; }
|
|
|
109 cbRight= fixed_viewport.clientWidth-cbLeft-cb.clientWidth;
|
|
|
110 cbBottom= fixed_viewport.clientHeight-cbTop-cb.clientHeight;
|
|
|
111 // if size is in %, must recalculate relative to viewport
|
|
|
112 if (st.fixedPWidth[1]=='%')
|
|
|
113 st.width= Math.round(vpWidth*st.fixedPWidth[0]/100)+'px';
|
|
|
114 if (st.fixedPHeight[1]=='%')
|
|
|
115 st.height= Math.round(vpHeight*st.fixedPHeight[0]/100)+'px';
|
|
|
116 // find out offset values at max size, to account for margins
|
|
|
117 st.left= A; st.right= '0'; st.top= A; st.bottom= '0';
|
|
|
118 oRight= el.offsetLeft+el.offsetWidth; oBottom= el.offsetTop+el.offsetHeight;
|
|
|
119 st.left= '0'; st.right= A; st.top= '0'; st.bottom= A;
|
|
|
120 oLeft= el.offsetLeft; oTop= el.offsetTop;
|
|
|
121 // use this to convert all edges to pixels
|
|
|
122 st.left= A; st.right= st.fixedPRight;
|
|
|
123 st.top= A; st.bottom= st.fixedPBottom;
|
|
|
124 oRight-= el.offsetLeft+el.offsetWidth;
|
|
|
125 oBottom-= el.offsetTop+el.offsetHeight;
|
|
|
126 st.left= st.fixedPLeft; st.top= st.fixedPTop;
|
|
|
127 oLeft= el.offsetLeft-oLeft; oTop= el.offsetTop-oTop;
|
|
|
128 // edge positioning fix
|
|
|
129 if (st.fixedPWidth[1]==A && st.fixedPLeft!=A && st.fixedPRight!=A) {
|
|
|
130 tmp= el.offsetLeft; st.left= A; st.width= fixed_ARBITRARY+'px';
|
|
|
131 tmp= fixed_ARBITRARY+el.offsetLeft-tmp+cbLeft+cbRight;
|
|
|
132 st.left= st.fixedPLeft; st.width= ((tmp<1)?1:tmp)+'px';
|
|
|
133 }
|
|
|
134 if (st.fixedPHeight[1]==A && st.fixedPTop!=A && st.fixedPBottom!=A) {
|
|
|
135 tmp= el.offsetTop; st.top= A; st.height= fixed_ARBITRARY+'px';
|
|
|
136 tmp= fixed_ARBITRARY+el.offsetTop-tmp+cbTop+cbBottom;
|
|
|
137 st.top= st.fixedPTop; st.height= ((tmp<1)?1:tmp)+'px';
|
|
|
138 }
|
|
|
139 // move all non-auto edges relative to the viewport
|
|
|
140 st.fixedCLeft= (st.fixedPLeft=='auto') ? oLeft : oLeft-cbLeft;
|
|
|
141 st.fixedCTop= (st.fixedPTop=='auto') ? oTop : oTop-cbTop;
|
|
|
142 st.fixedCRight= (st.fixedPRight=='auto') ? oRight : oRight-cbRight;
|
|
|
143 st.fixedCBottom= (st.fixedPBottom=='auto') ? oBottom : oBottom-cbBottom;
|
|
|
144 // remove left-positioning of right-positioned elements
|
|
|
145 if (st.fixedPLeft=='auto' && st.fixedPRight!='auto') st.fixedCLeft= 'auto';
|
|
|
146 if (st.fixedPTop=='auto' && st.fixedPBottom!='auto') st.fixedCTop= 'auto';
|
|
|
147 }
|
|
|
148
|
|
|
149
|
|
|
150 // calculate initial positioning of fixed backgrounds
|
|
|
151 for (i= fixed_backgrounds.length; i-->0;) {
|
|
|
152 el= fixed_backgrounds[i]; st= el.style;
|
|
|
153 tmp= st.fixedBImage;
|
|
|
154 if (tmp) {
|
|
|
155 if (tmp.readyState!='uninitialized') {
|
|
|
156 st.fixedBWidth= tmp.offsetWidth;
|
|
|
157 st.fixedBHeight= tmp.offsetHeight;
|
|
|
158 st.fixedBImage= window.undefined;
|
|
|
159 }
|
|
|
160 }
|
|
|
161 st.fixedBX= fixed_length(el, st.fixedBLeft, vpWidth-st.fixedBWidth);
|
|
|
162 st.fixedBY= fixed_length(el, st.fixedBTop, vpHeight-st.fixedBHeight);
|
|
|
163 }
|
|
|
164
|
|
|
165 // now call scroll() to set the positions from the values just calculated
|
|
|
166 fixed_scroll();
|
|
|
167 }
|
|
|
168
|
|
|
169 // Scrolling. Offset fixed elements relative to viewport scrollness
|
|
|
170
|
|
|
171 var fixed_lastX, fixed_lastY;
|
|
|
172 var fixed_PATCHDELAY= 300;
|
|
|
173 var fixed_patching= false;
|
|
|
174
|
|
|
175 // callback function after a scroll, because incorrect scroll position is
|
|
|
176 // often reported first go!
|
|
|
177 function fixed_patch() {
|
|
|
178 fixed_patching= false;
|
|
|
179 var scrollX= fixed_viewport.scrollLeft, scrollY= fixed_viewport.scrollTop;
|
|
|
180 if (scrollX!=fixed_lastX && scrollY!=fixed_lastY) fixed_scroll();
|
|
|
181 }
|
|
|
182
|
|
|
183 function fixed_scroll() {
|
|
|
184 if (!fixed_viewport) return;
|
|
|
185 var i, el, st, viewportX, viewportY;
|
|
|
186 var scrollX= fixed_viewport.scrollLeft, scrollY= fixed_viewport.scrollTop;
|
|
|
187 fixed_lastX= scrollX; fixed_lastY= scrollY;
|
|
|
188
|
|
|
189 // move non-nested fixed-position elements
|
|
|
190 for (i= fixed_positions.length; i-->0;) {
|
|
|
191 st= fixed_positions[i].style;
|
|
|
192 viewportX= (st.fixedNest) ? 0 : scrollX;
|
|
|
193 viewportY= (st.fixedNest) ? 0 : scrollY;
|
|
|
194 if (st.fixedCLeft!='auto') st.left= (st.fixedCLeft+viewportX)+'px';
|
|
|
195 if (st.fixedCTop!='auto') st.top= (st.fixedCTop+viewportY)+'px';
|
|
|
196 viewportX= (st.fixedCB==null || st.fixedCB==fixed_viewport) ? 0 : viewportX;
|
|
|
197 viewportY= (st.fixedCB==null || st.fixedCB==fixed_viewport) ? 0 : viewportY;
|
|
|
198 st.right= (st.fixedCRight-viewportX+1)+'px'; st.right= (st.fixedCRight-viewportX)+'px';
|
|
|
199 st.bottom= (st.fixedCBottom-viewportY+1)+'px'; st.bottom= (st.fixedCBottom-viewportY)+'px';
|
|
|
200 }
|
|
|
201
|
|
|
202 // align fixed backgrounds to viewport
|
|
|
203 for (i= fixed_backgrounds.length; i-->0;) {
|
|
|
204 el= fixed_backgrounds[i]; st= el.style;
|
|
|
205 viewportX= scrollX;
|
|
|
206 viewportY= scrollY;
|
|
|
207 while (el.offsetParent) {
|
|
|
208 viewportX-= el.offsetLeft+el.clientLeft;
|
|
|
209 viewportY-= el.offsetTop +el.clientTop;
|
|
|
210 el= el.offsetParent;
|
|
|
211 }
|
|
|
212 st.backgroundPositionX= (st.fixedBX+viewportX)+'px';
|
|
|
213 st.backgroundPositionY= (st.fixedBY+viewportY)+'px';
|
|
|
214 }
|
|
|
215
|
|
|
216 // call back again in a tic
|
|
|
217 if (!fixed_patching) {
|
|
|
218 fixed_patching= true;
|
|
|
219 window.setTimeout(fixed_patch, fixed_PATCHDELAY);
|
|
|
220 }
|
|
|
221 }
|
|
|
222
|
|
|
223 // Measurement. Load bg-image into an invisible element on the page, when
|
|
|
224 // loaded write the width/height to an element's style for layout use; detect
|
|
|
225 // when font size changes
|
|
|
226
|
|
|
227 function fixed_measureBack(el) {
|
|
|
228 var measure= document.getElementById('fixed-measure');
|
|
|
229 var img= document.createElement('img');
|
|
|
230 img.setAttribute('src', fixed_parseURL(el.currentStyle.backgroundImage));
|
|
|
231 measure.appendChild(img);
|
|
|
232 el.style.fixedBImage= img;
|
|
|
233 if (img.readyState=='uninitialized')
|
|
|
234 img.attachEvent('onreadystatechange', fixed_measureBackImage_ready);
|
|
|
235 }
|
|
|
236
|
|
|
237 function fixed_measureBackImage_ready() {
|
|
|
238 var img= event.srcElement;
|
|
|
239 if (img && img.readyState!='uninitialized') {
|
|
|
240 img.detachEvent('onreadystatechange', fixed_measureBackImage_ready);
|
|
|
241 fixed_layout();
|
|
|
242 }
|
|
|
243 }
|
|
|
244
|
|
|
245 var fixed_fontsize= 0;
|
|
|
246 function fixed_measureFont() {
|
|
|
247 var fs= document.getElementById('fixed-measure').offsetHeight;
|
|
|
248 if (fixed_fontsize!=fs && fixed_fontsize!=0)
|
|
|
249 fixed_delayout();
|
|
|
250 fixed_fontsize= fs;
|
|
|
251 return '5em';
|
|
|
252 }
|
|
|
253
|
|
|
254 // Utility. General-purpose functions
|
|
|
255
|
|
|
256 // parse url() to get value inside
|
|
|
257
|
|
|
258 function fixed_parseURL(v) {
|
|
|
259 v= v.substring(4, v.length-1);
|
|
|
260 if (v.charAt(0)=='"' && v.charAt(v.length-1)=='"' ||
|
|
|
261 v.charAt(0)=="'" && v.charAt(v.length-1)=="'")
|
|
|
262 return v.substring(1, v.length-1);
|
|
|
263 else return v;
|
|
|
264 }
|
|
|
265
|
|
|
266 // parse length or auto or background-position keyword into number and unit
|
|
|
267
|
|
|
268 var fixed_numberChars= '+-0123456789.';
|
|
|
269 var fixed_ZERO= new Array(0, 'px');
|
|
|
270 var fixed_50PC= new Array(50, '%');
|
|
|
271 var fixed_100PC= new Array(100, '%');
|
|
|
272 var fixed_AUTO= new Array(0, 'auto');
|
|
|
273
|
|
|
274 function fixed_parseLength(v) {
|
|
|
275 var num, i;
|
|
|
276 if (v=='left' || v=='top') return fixed_ZERO;
|
|
|
277 if (v=='right' || v=='bottom') return fixed_100PC;
|
|
|
278 if (v=='center') return fixed_50PC;
|
|
|
279 if (v=='auto') return fixed_AUTO;
|
|
|
280 i= 0;
|
|
|
281 while (i<v.length && fixed_numberChars.indexOf(v.charAt(i))!=-1)
|
|
|
282 i++;
|
|
|
283 num= parseFloat(v.substring(0, i));
|
|
|
284 if (num==0) return fixed_ZERO;
|
|
|
285 else return new Array(num, v.substring(i));
|
|
|
286 }
|
|
|
287
|
|
|
288 // convert parsed (number, unit) into a number of pixels
|
|
|
289
|
|
|
290 function fixed_length(el, l, full) {
|
|
|
291 var tmp, x;
|
|
|
292 if (l[1]=='px') return l[0];
|
|
|
293 if (l[1]=='%') return Math.round(full*l[0]/100);
|
|
|
294 // other units - measure by setting position; this is rather inefficient
|
|
|
295 // but then these units are used for background-position so seldom...
|
|
|
296 tmp= el.currentStyle.left;
|
|
|
297 el.style.left= '0';
|
|
|
298 x= el.offsetLeft;
|
|
|
299 el.style.left= l[0]+l[1];
|
|
|
300 x= el.offsetLeft-x;
|
|
|
301 el.style.left= tmp;
|
|
|
302 return x;
|
|
|
303 }
|
|
|
304
|
|
|
305 // convert stupid IE offsetLeft/Top to page-relative values
|
|
|
306
|
|
|
307 function fixed_pageLeft(el) {
|
|
|
308 var v= 0;
|
|
|
309 while (el.offsetParent) {
|
|
|
310 v+= el.offsetLeft;
|
|
|
311 el= el.offsetParent;
|
|
|
312 }
|
|
|
313 return v;
|
|
|
314 }
|
|
|
315 function fixed_pageTop(el) {
|
|
|
316 var v= 0;
|
|
|
317 while (el.offsetParent) {
|
|
|
318 v+= el.offsetTop;
|
|
|
319 el= el.offsetParent;
|
|
|
320 }
|
|
|
321 return v;
|
|
|
322 }
|
|
|
323
|
|
|
324 // Scanning. Check document every so often until it has finished loading. Do
|
|
|
325 // nothing until <body> arrives, then call main init. Pass any new elements
|
|
|
326 // found on each scan to be bound
|
|
|
327
|
|
|
328 var fixed_SCANDELAY= 500;
|
|
|
329
|
|
|
330 function fixed_scan() {
|
|
|
331 if (!document.body) return;
|
|
|
332 if (!fixed_viewport) fixed_init();
|
|
|
333 var el;
|
|
|
334 for (var i= 0; i<document.all.length; i++) {
|
|
|
335 el= document.all[i];
|
|
|
336 if (!el.fixed_bound) {
|
|
|
337 el.fixed_bound= true;
|
|
|
338 fixed_bind(el);
|
|
|
339 } }
|
|
|
340 }
|
|
|
341
|
|
|
342 var fixed_scanner;
|
|
|
343 function fixed_stop() {
|
|
|
344 window.clearInterval(fixed_scanner);
|
|
|
345 fixed_scan();
|
|
|
346 }
|
|
|
347
|
|
|
348 fixed_scan();
|
|
|
349 fixed_scanner= window.setInterval(fixed_scan, fixed_SCANDELAY);
|
|
|
350 window.attachEvent('onload', fixed_stop);
|
|
|
351 window.attachEvent('onresize', fixed_delayout);
|
|
|
352 window.attachEvent('onscroll', fixed_scroll);
|
|
|
353
|
|
|
354 @end @*/
|
