Hey all i am trying to figure out why my default DIV always seems to shinks whenever i use the code below for a "page loading" javascript. Here is the code for my page (some code not all): <script type="text/javascript" src="javaScript/pagestartload.js"></script> <style type="text/css"> body {padding:0; background:url(images/WEDDING_15.jpg) no-repeat top left fixed; margin: 0 auto;} #MainDivBox {position:absolute; top:13px; left:10px; clip:rect(0,250,150,0); height:305px; width:590px; overflow: hidden;} .clScroll {position:absolute; top:1px; font-size:10pt; left:0; font-family:arial; visibility:hidden; width: 600px;} .imageBorder {border:3px solid #999999;} </style> <body> <div id="MainDivBox"> <div id="MainDivSection" class="clScroll"> <div align="center"> SOME STUFF HERE.... </div> </div> <script type="text/javascript" src="javaScript/pageendload.js"></script> </body> Code (markup): Now here is the javascript code that displays the Please wait... loading (pagestartload.js): if((document.all || document.getElementById) && !safari) { document.write('<style> ' + 'body {background-image: url(images/BG.jpg);}' + '.clsBox { ' + 'position:absolute; top:50%; left:50%; ' + 'width:' + boxWidth + 'px; ' + 'height:' + boxHeight + 'px; ' + 'margin-top:-' + Math.round(boxHeight / 2) + 'px; ' + 'margin-left:-' + Math.round(boxWidth / 2) + 'px; ' + 'border-top:1px solid #000000; ' + 'border-left:1px solid #000000; ' + 'border-bottom:1px solid #000000; ' + 'border-right:1px solid #000000; ' + 'background-color: #FFFFFF; ' + 'filter:alpha(opacity=75); ' + '-moz-opacity: 0.6; ' + 'opacity: 0.6; ' + 'z-index:69; ' + '} .clsBarBG { ' + 'width:' + barLength + 'px; ' + 'height:' + barHeight + 'px; ' + 'background-color:' + barBGColor + '; ' + 'border-top:1px solid black; border-left:1px solid black; ' + 'border-bottom:1px solid black; border-right:1px solid black; ' + 'margin:0px; padding:0px; ' + 'text-align: left; ' + '} .clsBar { ' + 'width:0px; height:' + barHeight + 'px; ' + 'background-color:' + barColor + '; ' + 'border-top:1px solid black; border-left:1px solid black; ' + 'border-bottom:1px solid black; border-right:1px solid black; ' + 'margin:0px; padding:0px; ' + 'font-size:1px; ' + '} .clsText { ' + 'font:' + boxFont + '; ' + 'color:' + boxFontColor + '; ' + 'vertical-align: baseline; ' + '} </style> ' + '<div id="divBox" class="clsBox">' + '<table border=0 cellspacing=0 cellpadding=0><tr>' + '<td width=' + boxWidth + ' height=' + boxHeight + ' align=center>' + '<table width="250" border="0" cellspacing="0" cellpadding="0">' + '<tr>' + '<th scope="col"><p class="clsText" align=center>Loading page... please wait...</p></th>' + '<th scope="col"><div align="left"><img src="images/loader.gif" width="32" height="32" /></div></th>' + '</tr>' + '</table>' + //'<p class="clsText" align=center>Loading page... please wait..<img src="images/loader.gif" width="32" height="32" /></p>' + '<table border=0 cellspacing=0 cellpadding=0><tr><td width=' + barLength + '>' + '<div id="divBarBG" class="clsBarBG"><div id="divBar" class="clsBar"></div></div>' + '</td></tr></table>' + '</td></tr></table></div>' + '<div id="Content" style="width:100%; visibility:hidden">'); } Code (markup): Now here is the javascript code that displays the Please wait... loading (pageendload.js): function LOADER() { this.bar, this.iv, this.timer; this.imgAll = this.opacity = 0; this.getObj = function(id) { var obj; if(document.getElementById) obj = document.getElementById(id); else if(document.all) obj = document.all[id]; return obj; } this.setOpacity = function(obj, opacity) { if(obj && !document.layers) { obj.style.opacity = opacity / 100; obj.style.MozOpacity = opacity / 100; obj.style.KhtmlOpacity = opacity / 100; obj.style.filter = 'alpha(opacity=' + opacity + ')'; } } this.fadeIn = function(id) { var obj = this.getObj(id); if(obj) { if(document.all) obj.style.position = 'absolute'; obj.style.visibility = 'visible'; if(fadeInSpeed && this.opacity < 100) { this.opacity += fadeInSpeed; if(this.opacity > 100) this.opacity = 100; //this.setOpacity(obj, this.opacity); if(this.timer) clearTimeout(this.timer); //this.timer = setTimeout("loader.fadeIn('" + id + "')", 1); } else { this.opacity = 100; this.setOpacity(obj, 100); } } } this.setBar = function() { if(this.imgAll < document.images.length) this.imgAll = document.images.length; for(var i = cnt = 0; i < this.imgAll; i++) { if(document.images[i] && document.images[i].complete) cnt++; else if(document.images[i].complete == null) cnt++; } var mul = barLength / this.imgAll; var len = Math.round(cnt * mul); if(len > barLength) len = barLength; this.bar.style.width = len + 'px'; window.status = cnt + ' / ' + this.imgAll; if(cnt >= this.imgAll) { if(this.iv) clearInterval(this.iv); setTimeout('loader.loaded()', 100); } } this.init = function() { this.bar = this.getObj('divBar'); if(document.images && document.images.length) { if(this.iv) clearInterval(this.iv); this.iv = setInterval('loader.setBar()', 100); } else loader.loaded(); } this.loaded = function() { window.status = ''; this.fadeIn('Content'); var obj = this.getObj('divBox'); obj.style.visibility = 'hidden'; } } //---------------------------------------------------------------------------------------------------- // Show dialog box and progress bar //---------------------------------------------------------------------------------------------------- if((document.all || document.getElementById) && !safari) { document.write('</div>'); var loader = new LOADER(); loader.init(); } Code (markup): Now the problem seems to be where its calling the this.fadeIn('Content'); If i comment that out then everything is fine. the loading box is gone and my page looks as it should be. However if i keep that in the loading box goes away and also my other DIV on the main page. What can i do in order to keep the page DIV's like they need to be but still make the loading box go away (or in this case, fade away)? I have it working as-is without the fade but i had to take out these 2 lines to do it: //this.setOpacity(obj, this.opacity); //this.timer = setTimeout("loader.fadeIn('" + id + "')", 1); Code (markup): Small prob. i need to try to work out. Any help would be great! only seems to do this in IE. Looks fine in FireFox 2 Here are 2 videos of whats going on in IE: http://www.wildmaninc.com/withfade.wmv http://www.wildmaninc.com/withoutfade.wmv In other words... i need the following code to be compatible with IE since it seems to work fine in FireFox 2. this.fadeIn = function(id) { var obj = this.getObj(id); if(obj) { if(document.all) obj.style.position = 'absolute'; obj.style.visibility = 'visible'; if(fadeInSpeed && this.opacity < 100) { this.opacity += fadeInSpeed; if(this.opacity > 100) this.opacity = 100; this.setOpacity(obj, this.opacity); if(this.timer) clearTimeout(this.timer); this.timer = setTimeout("loader.fadeIn('" + id + "')", 1); } else { this.opacity = 100; this.setOpacity(obj, 100); } } } Code (markup): David
use a fade transition, rather than an opacity filter: <style> #myElement { filter: progidXImageTransform.Microsoft.Fade(duration=0.15); } </style> <script> api.prototype.fadeIn = function() { if (internet_explorer) { this.element.filters[0].apply(); this.element.filters[0].play(); } this.element.style.visibility = 'visible'; } </script>