asked on

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!

hexagon47

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>

Cory_Larson04

ASKER

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.

Cory_Larson04

ASKER

whoops, move

cache.filters.blendTrans.play();

to before

cache.style.visibility = HIDDEN;

Cory_Larson04

ASKER

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

hexagon47

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

Cory_Larson04

ASKER

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

hexagon47

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

ASKER CERTIFIED SOLUTION

hexagon47

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Cory_Larson04

ASKER

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>