Results 1 to 2 of 2

Thread: Problem with DIV visibility

  1. #1
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Problem with DIV visibility

    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):
    Code:
    <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>
    Now here is the javascript code that displays the Please wait... loading (pagestartload.js):
    Code:
    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">');
      }
    Now here is the javascript code that displays the Please wait... loading (pageendload.js):
    Code:
    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();
      }
    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:
    Code:
    //this.setOpacity(obj, this.opacity);
    //this.timer = setTimeout("loader.fadeIn('" + id + "')", 1);
    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.
    Code:
    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);
            }
          }
        }
    David

  2. #2
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    I copied in the html and scripts, and even when I added values (guestimating valid values) to the missing variables, I still ran into a bug on my FF1. Every other time I refreshed the page, the page would hang loading, and when it didn't, the "page is loading" display shows for a split second (which might be expected). Perhaps a link to a working example?

    EDIT: Nevermind, that was because I hadn't applied image locations; I only did javascript variables. All I get is a little thing that says "page is loading" with a bar under it that I assume should change length, but it doesn't. When the page finishes loading, the display dissapears. I still am not sure what effect you are trying to achieve, and I am not willing to download the videos, as I only have a dialup connection.
    Last edited by Trinithis; 05-28-2007 at 06:30 AM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •