Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Fading out div content onload

Posted on 2003-03-30
9
Medium Priority
?
628 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
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Over time, the online landscape has altered considerably, but that’s nothing compared to the up-and-coming trends that will shape the web design industry in the coming year. Keep reading to find out which trends will shape B2B web design in 2018.
By following these Magento e-commerce development tips, you can increase your website's conversion and profitability. Read this post for more details.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses
Course of the Month14 days, 20 hours left to enroll

578 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