Fading out div content onload

I have the following script that shows a "page loading" message while the page is loading.  What I would like it to do is fade out after the page has loaded instead of just disappearing.  I have tried applying styles and filters (blendTrans) but i get errors.  Here is the code:

    <SCRIPT LANGUAGE="JavaScript">
    ver = navigator.appVersion.substring(0,1)
    if (ver >= 4)
         {
         document.write('<DIV ID="cache" align="center"><br>');
     document.write('<TABLE WIDTH=95% height="90%" class="heading" bgcolor="#ecedee"><TR><TD ALIGN=center VALIGN=middle class="normaltext">');
     document.write('<b>The page you have requested is loading...please wait.</b></TD></TR></TABLE>');
     document.write('</DIV>');
         var navi = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);
         var HIDDEN = (navi) ? 'hide' : 'hidden';
         var VISIBLE = (navi) ? 'show' : 'visible';
         var cache = (navi) ? document.cache : document.all.cache.style;
         largeur = screen.width;
         cache.left = Math.round(0);
         cache.visibility = VISIBLE;
         }
    function cacheOff()
         {
         if (ver >= 4)
              {
              cache.visibility = HIDDEN;
              }
         }
    window.onload=cacheOff;
    </SCRIPT>

If anybody could help me out that would be great!
Cory_Larson04Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hexagon47Commented:
you mean something like this effect? I got it from the microsoft site...

<SCRIPT>
var bToggle = 0;
function fnToggle() {
    oDiv.filters[0].Apply();                  
// After setting Apply, changes to the oDiv object
//  are not displayed until Play is called.

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.backgroundColor="#000000";}
    else {
        bToggle = 1;
        oDiv.style.backgroundColor="#ffffff";}  
    oDiv.filters[0].Play();
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON><BR/><BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: #000000;
                filter:progid:DXImageTransform.Microsoft.Fade(
                duration=2);">
</DIV>
0
Cory_Larson04Author Commented:
Yes, something like that.  This is the modified code that gets errors (maybe you will see what I'm getting at):

   <SCRIPT LANGUAGE="JavaScript">
   ver = navigator.appVersion.substring(0,1)
   if (ver >= 4)
        {
        document.write('<DIV ID="cache" align="center"><br>');
        document.write('<TABLE WIDTH=95% height="90%" class="heading" bgcolor="#ecedee"><TR><TD ALIGN=center VALIGN=middle class="normaltext">');
        document.write('<b>The page you have requested is loading...please wait.</b></TD></TR></TABLE>');
        document.write('</DIV>');
        var navi = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);
        var HIDDEN = (navi) ? 'hide' : 'hidden';
        var VISIBLE = (navi) ? 'show' : 'visible';
        var cache = (navi) ? document.cache : document.all.cache.style;
        largeur = screen.width;
        cache.left = Math.round(0);
        cache.visibility = VISIBLE;
        }
   function cacheOff()
        {
        if (ver >= 4)
             {
             cache.style.filter="blendTrans(duration=0.5)";
             cache.filters.blendTrans.apply();
             cache.style.visibility = HIDDEN;
             cache.filters.blendTrans.play();
             }
        }
   window.onload=cacheOff;
   </SCRIPT>

I get a ['cache.style' is null or not an object] error.

Hopefully this helps.
0
Cory_Larson04Author Commented:
whoops, move

   cache.filters.blendTrans.play();

to before

   cache.style.visibility = HIDDEN;
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

Cory_Larson04Author Commented:
What I need is a script that changes the <div>'s opacity from 100 to 0, revealing the page content.
0
hexagon47Commented:
substitute

document.all.cache.style

with

document.getElementById('cache')

and it works on my machine

although I am almost sure that you would want to increase the duration of blendTrans
0
Cory_Larson04Author Commented:
I changed the line that you said, but the effect is still not playing on my machine.  I have been playing around with looping the <div>'s opacity down to zero, but it seems to jump straight from 100 to 0 with no effect.  In the meantime, I'm gonna go look for some other effects scripts and maybe just write this one over from scratch.  Thanks
0
hexagon47Commented:
I have found the solution!!!
Add this style="width:900"

document.write('<DIV ID="cache" align="center" style="width:900"><br>');

I have put 900 but put whatever you want

it works now
0
hexagon47Commented:
and put the duration to 2 or 3 or wahtever
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Cory_Larson04Author Commented:
Alright...after a couple hours of research and writing code, I have achieved the effect I was looking for.  You can see the effect in action at http://www.sourcecodevault.com or copy and paste this script into the <head> section of any page you want.  Thanks for your efforts hexagon47!

Here is the script:

<script language="JavaScript">
ver = navigator.appVersion.substring(0,1);
if (ver >= 4) {
        document.write('<div id="cache" style="filter:alpha(opacity=50); width:100%"><br>');
     document.write('<table width="95%" height="93%" class="heading" bgcolor="#ecedee" align="center"><tr><td align="center" class="grey">');
     document.write('<b><h3>The page you have requested is loading...please wait.</h3></b></td></tr></table>');
     document.write('</div>');
         var navi = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);
         var HIDDEN = (navi) ? 'hide' : 'hidden';
         var VISIBLE = (navi) ? 'show' : 'visible';
              var cache = (navi) ? document.cache : document.all.cache;
         largeur = screen.width;
         cache.style.left = Math.round(0);
         cache.style.visibility = VISIBLE;
}

var count = 50;
function cacheOff() {
     if (ver >= 4) {
          count-=10
          if (count >= 0) {
               cache.filters("alpha").opacity = count;
               timer=setTimeout("cacheOff()",0)
          }
          else {
               clearTimeout(timer);
               cache.style.visibility = HIDDEN;
          }
     }
}

window.onload=cacheOff;
</script>
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.