Log in

View Full Version : Fading out layer onload


mobius2000
09-04-2008, 02:36 AM
Hi Everyone... Thanks in advance to anyone that takes the time to give this a go. There is a real chance this is an overly simple problem as I am a n00b when it comes to javascript...

I have a large image which I have placed a layer over the top of with a loading.gif image inside the layer, I have successfully told dreamweaver to script out the onload=hide of the layer once the big image underneath is fully loaded however I was hoping to have the layer fade out instead of vanish quickly.

I have placed the markup used below and again, thank you to anyone who takes the time to give this a look.

Richard.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#sheet {
position:absolute;
width:298px;
height:302px;
z-index:1;
margin-top:-100px;
background-color: #FFFFFF;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>

<body>

<img src="12.bmp" width="300px" height="300px" onload="MM_showHideLayers('sheet','','hide')" />
<div id="sheet"><img src="spinner.gif" /></div>



</body>
</html>
Nile
09-04-2008, 03:07 AM
This should work, although it doesn't work in IE. I can't find out how to make it work in IE.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#sheet {
position:absolute;
width:298px;
height:302px;
z-index:1;
margin-top:-100px;
background-color: #FFFFFF;
}
-->
</style>
<script type="text/JavaScript">
var opacity = 0.9;
var _ = function(el){ return document.getElementById(el); }
var fadeItOut = function(obj){
if(opacity > 0.01){
opacity -= 0.01
_(obj).style.opacity = opacity;
_(obj).style.MozOpacity = opacity;
setTimeout("fadeItOut('"+obj+"');",10);
} else {
opacity = 0;
_(obj).style.opacity = opacity;
_(obj).style.MozOpacity = opacity;
_(obj).style.display = "none";
}
}

</script>
</head>

<body onload="fadeItOut('sheet')">
<img src="12.bmp" width="300px" height="300px" />
<div id="sheet">WW</div>

</body>
</html>
And the javascript alone is just:



var opacity = 0.9;
var _ = function(el){ return document.getElementById(el); }
var fadeItOut = function(obj){
if(opacity > 0.01){
opacity -= 0.01
_(obj).style.opacity = opacity;
_(obj).style.MozOpacity = opacity;
setTimeout("fadeItOut('"+obj+"');",10);
} else {
opacity = 0;
_(obj).style.opacity = opacity;
_(obj).style.MozOpacity = opacity;
_(obj).style.display = "none";
}
}
mobius2000
09-04-2008, 03:31 AM
Thank you very much Nile... Works perfect!

As you said, no good with IE... Just wondering if you know how this could work with scriptaculous? I posted a message some time ago that you replied to on this mater and you suggested scriptaculous as a method of achieving this. I gave it a try but couldn't get my head around all the options within Scriptaculous.

If not, your earlier script will do the trick and IE folks will have to do without. In any case, thank you very much for your time.

Richard. :)
mobius2000
09-04-2008, 05:03 AM
Ok, after more exhaustive searching I found a method to use scriptaculous to achieve the required result.

I have placed it below for anyone who may want to achieve the same effect however I will not be able to post an example.

Step one: Download scriptaculous-js-1.8.1.zip http://script.aculo.us/downloads
... Man I love this frame work sooo much :D

Step two: Unzip and pull out the following...

- scriptaculous-js-1.8.1/lib/prototype.js
- scriptaculous-js-1.8.1/src/scriptaculous.js
- scriptaculous-js-1.8.1/src/effects.js

Step three: Place these three files in your javascript folder.

Step four: Use markup below:



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="yourjavafolder/scriptaculous.js"></script>
<script type="text/javascript" src="yourjavafolder/prototype.js"></script>
<script type="text/javascript" src="yourjavafolder/effects.js"></script>

<script type="text/javascript">
window.onload = begin;

function begin()
{
new Effect.Appear(document.getElementById('image'), { duration: 3.0 });

}

</script>
</head>

<body>
<div id="container"><img id="image" style="display:none;" src="your image here" width="800" height="170" /></div>

</body>
</html>


Step five: Change the image ID to whatever you want but make sure you repeat that name to the Effect.Appear spot of the javascript. Make sure you also set the correct image width, I believe this is required.

View and enjoy!!!

PM me if you have any questions or post here for followups.
mobius2000
09-04-2008, 05:54 AM
Not sure if anyone is even interested in this however I am getting excited about learning this as it has opened the door for other scriptaculous possibilities.

If you want to add more images to the fade queue, simple copy the red text below and place on a new line:


function begin()
{
new Effect.Appear(document.getElementById('image1'), { duration: 3.0 });
new Effect.Appear(document.getElementById('image2'), { duration: 3.0 });
}

You can also make entire DIV's fade in on page load by taking out the image ID and the image style from the example and adding it to the DIV you want to have faded in.

:D I now love Scriptaculous :D