?
Solved

Fading out div content onload

Posted on 2003-03-30
9
Medium Priority
?
627 Views
Last Modified: 2008-03-17
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!
0
Comment
Question by:Cory_Larson04
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 3

Expert Comment

by:hexagon47
ID: 8237516
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
 

Author Comment

by:Cory_Larson04
ID: 8238094
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
 

Author Comment

by:Cory_Larson04
ID: 8238116
whoops, move

   cache.filters.blendTrans.play();

to before

   cache.style.visibility = HIDDEN;
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 

Author Comment

by:Cory_Larson04
ID: 8238126
What I need is a script that changes the <div>'s opacity from 100 to 0, revealing the page content.
0
 
LVL 3

Expert Comment

by:hexagon47
ID: 8238229
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
 

Author Comment

by:Cory_Larson04
ID: 8245327
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
 
LVL 3

Expert Comment

by:hexagon47
ID: 8245434
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
 
LVL 3

Accepted Solution

by:
hexagon47 earned 150 total points
ID: 8245437
and put the duration to 2 or 3 or wahtever
0
 

Author Comment

by:Cory_Larson04
ID: 8249927
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

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question