// fixed.js: fix fixed positioning and fixed backgrounds in IE/Win // version 1.8, 08-Aug-2003 // written by Andrew Clover , use freely // Geaendert von Manuel Gurski 27.03.2006 // Es werden nur Elemente aus dem Array fixed_elements berücksichtigt // um das Script auch in großen HTML-Seiten mit vielen Tags performant // zu halten. var fixed_elements= new Array(); function add_fixed_element(el_id) { obj = document.getElementById(el_id); if(obj){ fixed_elements[fixed_elements.length] = obj; } } //*@cc_on // @if (@_win32 && @_jscript_version>4) // var fixed_positions= new Array(); // var fixed_backgrounds= new Array(); // var fixed_viewport; //Initialisation. Called when the tag arrives. Set up viewport so the //rest of the script knows we're going, and add a measurer div, used to detect //font size changes and measure image sizes for backgrounds later // function fixed_init() { // fixed_viewport= (document.compatMode=='CSS1Compat') ? // document.documentElement : document.body; // var el= document.createElement('div'); // el.setAttribute('id', 'fixed-measure'); // el.style.position= 'absolute'; // el.style.top= '0'; el.style.left= '0'; // el.style.overflow= 'hidden'; el.style.visibility= 'hidden'; // el.style.fontSize= 'xx-large'; el.style.height= '5em'; // el.style.setExpression('width', 'fixed_measureFont()'); // document.body.insertBefore(el, document.body.firstChild); // } //Binding. Called every time an element is added to the document, check it //for fixed features, if found add to our lists and set initial props // function fixed_bind(el) { // var needLayout= false; // var tag= el.tagName.toLowerCase(); // var st= el.style; // var cst= el.currentStyle; // var anc; //find fixed-position elements // if (cst.position=='fixed') { // needLayout= true; // fixed_positions[fixed_positions.length]= el; //store original positioning as we'll overwrite it // st.position= 'absolute'; // st.fixedPLeft= cst.left; // st.fixedPTop= cst.top; // st.fixedPRight= cst.right; // st.fixedPBottom= cst.bottom; // st.fixedPWidth= fixed_parseLength(cst.width); // st.fixedPHeight= fixed_parseLength(cst.height); //find element that will act as containing box, for convenience later // st.fixedCB= null; // for (anc= el; (anc= anc.parentElement).parentElement;) { // if (anc.currentStyle.position!='static') { // st.fixedCB= anc; // break; // } } //detect nested fixed positioning (only ancestor need move) // st.fixedNest= false; // for (anc= el; anc= anc.parentElement;) { // if (anc.style.fixedNest!=null) // st.fixedNest= true; // break; // } // } //find fixed-background elements (not body/html which IE already gets right) // if (cst.backgroundAttachment=='fixed' && tag!='body' && tag!='html') { // needLayout= true; // fixed_backgrounds[fixed_backgrounds.length]= el; //get background offset, converting from keyword if necessary // st.fixedBLeft= fixed_parseLength(cst.backgroundPositionX); // st.fixedBTop= fixed_parseLength(cst.backgroundPositionY); //if it's a non-zero %age, need to know size of image for layout // if (st.fixedBLeft[1]=='%' || st.fixedBTop[1]=='%') { // st.fixedBWidth= 0; st.fixedBHeight= 0; // fixed_measureBack(el); // } // } // if (needLayout) fixed_layout(); // } //Layout. On every window or font size change, recalculate positioning //Request re-layout at next free moment // var fixed_delaying= false; // function fixed_delayout() { // if (fixed_delaying) return; // fixed_delaying= true; // window.setTimeout(fixed_layout, 0); // } // var fixed_ARBITRARY= 200; // function fixed_layout() { // fixed_delaying= false; // if (!fixed_viewport) return; // var i, el, st, j, pr, tmp, A= 'auto'; // var cb, cbLeft, cbTop, cbRight, cbBottom, oLeft, oTop, oRight, oBottom; // var vpWidth=fixed_viewport.clientWidth, vpHeight=fixed_viewport.clientHeight; //calculate initial position for fixed-position elements [black magic] // for (i= fixed_positions.length; i-->0;) { // el= fixed_positions[i]; st= el.style; //find positioning of containing block // cb= st.fixedCB; if (!cb) cb= fixed_viewport; // cbLeft= fixed_pageLeft(cb); cbTop= fixed_pageTop(cb); // if (cb!=fixed_viewport) { cbLeft+= cb.clientLeft; cbTop+= cb.clientTop; } // cbRight= fixed_viewport.clientWidth-cbLeft-cb.clientWidth; // cbBottom= fixed_viewport.clientHeight-cbTop-cb.clientHeight; //if size is in %, must recalculate relative to viewport // if (st.fixedPWidth[1]=='%') // st.width= Math.round(vpWidth*st.fixedPWidth[0]/100)+'px'; // if (st.fixedPHeight[1]=='%') // st.height= Math.round(vpHeight*st.fixedPHeight[0]/100)+'px'; //find out offset values at max size, to account for margins // st.left= A; st.right= '0'; st.top= A; st.bottom= '0'; // oRight= el.offsetLeft+el.offsetWidth; oBottom= el.offsetTop+el.offsetHeight; // st.left= '0'; st.right= A; st.top= '0'; st.bottom= A; // oLeft= el.offsetLeft; oTop= el.offsetTop; //use this to convert all edges to pixels // st.left= A; st.right= st.fixedPRight; // st.top= A; st.bottom= st.fixedPBottom; // oRight-= el.offsetLeft+el.offsetWidth; // oBottom-= el.offsetTop+el.offsetHeight; // st.left= st.fixedPLeft; st.top= st.fixedPTop; // oLeft= el.offsetLeft-oLeft; oTop= el.offsetTop-oTop; //edge positioning fix // if (st.fixedPWidth[1]==A && st.fixedPLeft!=A && st.fixedPRight!=A) { // tmp= el.offsetLeft; st.left= A; st.width= fixed_ARBITRARY+'px'; // tmp= fixed_ARBITRARY+el.offsetLeft-tmp+cbLeft+cbRight; // st.left= st.fixedPLeft; st.width= ((tmp<1)?1:tmp)+'px'; // } // if (st.fixedPHeight[1]==A && st.fixedPTop!=A && st.fixedPBottom!=A) { // tmp= el.offsetTop; st.top= A; st.height= fixed_ARBITRARY+'px'; // tmp= fixed_ARBITRARY+el.offsetTop-tmp+cbTop+cbBottom; // st.top= st.fixedPTop; st.height= ((tmp<1)?1:tmp)+'px'; // } //move all non-auto edges relative to the viewport // st.fixedCLeft= (st.fixedPLeft=='auto') ? oLeft : oLeft-cbLeft; // st.fixedCTop= (st.fixedPTop=='auto') ? oTop : oTop-cbTop; // st.fixedCRight= (st.fixedPRight=='auto') ? oRight : oRight-cbRight; // st.fixedCBottom= (st.fixedPBottom=='auto') ? oBottom : oBottom-cbBottom; //remove left-positioning of right-positioned elements // if (st.fixedPLeft=='auto' && st.fixedPRight!='auto') st.fixedCLeft= 'auto'; // if (st.fixedPTop=='auto' && st.fixedPBottom!='auto') st.fixedCTop= 'auto'; // } //calculate initial positioning of fixed backgrounds // for (i= fixed_backgrounds.length; i-->0;) { // el= fixed_backgrounds[i]; st= el.style; // tmp= st.fixedBImage; // if (tmp) { // if (tmp.readyState!='uninitialized') { // st.fixedBWidth= tmp.offsetWidth; // st.fixedBHeight= tmp.offsetHeight; // st.fixedBImage= window.undefined; // } // } // st.fixedBX= fixed_length(el, st.fixedBLeft, vpWidth-st.fixedBWidth); // st.fixedBY= fixed_length(el, st.fixedBTop, vpHeight-st.fixedBHeight); // } //now call scroll() to set the positions from the values just calculated // fixed_scroll(); // } //Scrolling. Offset fixed elements relative to viewport scrollness // var fixed_lastX, fixed_lastY; // var fixed_PATCHDELAY= 300; // var fixed_patching= false; //callback function after a scroll, because incorrect scroll position is //often reported first go! // function fixed_patch() { // fixed_patching= false; // var scrollX= fixed_viewport.scrollLeft, scrollY= fixed_viewport.scrollTop; // if (scrollX!=fixed_lastX && scrollY!=fixed_lastY) fixed_scroll(); // } // function fixed_scroll() { // if (!fixed_viewport) return; // var i, el, st, viewportX, viewportY; // var scrollX= fixed_viewport.scrollLeft, scrollY= fixed_viewport.scrollTop; // fixed_lastX= scrollX; fixed_lastY= scrollY; //move non-nested fixed-position elements // for (i= fixed_positions.length; i-->0;) { // st= fixed_positions[i].style; // viewportX= (st.fixedNest) ? 0 : scrollX; // viewportY= (st.fixedNest) ? 0 : scrollY; // if (st.fixedCLeft!='auto') st.left= (st.fixedCLeft+viewportX)+'px'; // if (st.fixedCTop!='auto') st.top= (st.fixedCTop+viewportY)+'px'; // viewportX= (st.fixedCB==null || st.fixedCB==fixed_viewport) ? 0 : viewportX; // viewportY= (st.fixedCB==null || st.fixedCB==fixed_viewport) ? 0 : viewportY; // st.right= (st.fixedCRight-viewportX+1)+'px'; st.right= (st.fixedCRight-viewportX)+'px'; // st.bottom= (st.fixedCBottom-viewportY+1)+'px'; st.bottom= (st.fixedCBottom-viewportY)+'px'; // } //align fixed backgrounds to viewport // for (i= fixed_backgrounds.length; i-->0;) { // el= fixed_backgrounds[i]; st= el.style; // viewportX= scrollX; // viewportY= scrollY; // while (el.offsetParent) { // viewportX-= el.offsetLeft+el.clientLeft; // viewportY-= el.offsetTop +el.clientTop; // el= el.offsetParent; // } // st.backgroundPositionX= (st.fixedBX+viewportX)+'px'; // st.backgroundPositionY= (st.fixedBY+viewportY)+'px'; // } //call back again in a tic // if (!fixed_patching) { // fixed_patching= true; // window.setTimeout(fixed_patch, fixed_PATCHDELAY); // } // } //Measurement. Load bg-image into an invisible element on the page, when //loaded write the width/height to an element's style for layout use; detect //when font size changes // function fixed_measureBack(el) { // var measure= document.getElementById('fixed-measure'); // var img= document.createElement('img'); // img.setAttribute('src', fixed_parseURL(el.currentStyle.backgroundImage)); // measure.appendChild(img); // el.style.fixedBImage= img; // if (img.readyState=='uninitialized') // img.attachEvent('onreadystatechange', fixed_measureBackImage_ready); // } // function fixed_measureBackImage_ready() { // var img= event.srcElement; // if (img && img.readyState!='uninitialized') { // img.detachEvent('onreadystatechange', fixed_measureBackImage_ready); // fixed_layout(); // } // } // var fixed_fontsize= 0; // function fixed_measureFont() { // var fs= document.getElementById('fixed-measure').offsetHeight; // if (fixed_fontsize!=fs && fixed_fontsize!=0) // fixed_delayout(); // fixed_fontsize= fs; // return '5em'; // } //Utility. General-purpose functions //parse url() to get value inside // function fixed_parseURL(v) { // v= v.substring(4, v.length-1); // if (v.charAt(0)=='"' && v.charAt(v.length-1)=='"' || // v.charAt(0)=="'" && v.charAt(v.length-1)=="'") // return v.substring(1, v.length-1); // else return v; // } //parse length or auto or background-position keyword into number and unit // var fixed_numberChars= '+-0123456789.'; // var fixed_ZERO= new Array(0, 'px'); // var fixed_50PC= new Array(50, '%'); // var fixed_100PC= new Array(100, '%'); // var fixed_AUTO= new Array(0, 'auto'); // function fixed_parseLength(v) { // var num, i; // if (v=='left' || v=='top') return fixed_ZERO; // if (v=='right' || v=='bottom') return fixed_100PC; // if (v=='center') return fixed_50PC; // if (v=='auto') return fixed_AUTO; // i= 0; // while (i arrives, then call main init. Pass any new elements //found on each scan to be bound // var fixed_SCANDELAY= 500; // function fixed_scan() { // if (!document.body) return; // if (!fixed_viewport) fixed_init(); // var el; // for (var i= 0; i