Fade script not working - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Fade script not working

problem trying to pass var name

Noisehag

2:16 am on Jul 12, 2004 (gmt 0)

10+ Year Member

Hi all, got a problem trying to loop through a function with a settimeout while passing a var name. I'm trying to create a script that will fade in a div based on id, but can't see where I'm going wrong. My syntax must be off or something. I've already spent way too much time trying to figure it out on my own. :/ I need the div name to cycle through the loop displaying the opacity at an increasing rate until it's at full opacity.

Any help would be greatly appreciated.

(using IE at the moment...)

<html><head>
<script language="JavaScript">
//fades layer in
ie5 = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
opac = 0;
function fadein(ln) {
alert(ln);
if(opac!= 100){
opac+=5;
if(ie5) document.getElementById(ln).filters.alpha.opacity = opac;
if(ns6) document.getElementById(ln).style.Mozopacity = opac/100;
setTimeout('fadein(eval(ln))', 1);
}
}
</script>
</head>
<body>
<a href="javascript://" onmouseover="fadein('mylayer');">test</a>
<div id="mylayer" style="position:absolute; left:100px; top:150px; width:100px; height:100px; clip:rect(0,100,100,0); filter: alpha(opacity=0); -moz-opacity:0%; background-color:red; z-index:1">
</div>
</body></html>

Noisehag

2:24 am on Jul 12, 2004 (gmt 0)

10+ Year Member

Oh, I put the alert in there in hopes to better debug, but to no avail. :(

Bernard Marx

7:14 am on Jul 12, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Timer functions can seem fairly tricky at first. The issues being:

1. The statement to execute must be a string (..although this can be done another way).
2. The statement is excuted in a globaol context. This means that none of your local variables are recognized. They must be passed through as strings.

Because ln isn't understood as a variable, it's value must be used. It should then be quoted. Then reason for this is that we want to execute a statement that looks, not like this:

fadein(ln)

but

fadein('_valueOfLn_')

So it goes like this.
I have changed the condition to <, so the increment doesn't need to be a factor of 100 to work. The setting of MozOpacity statement has some changes too:

ie5 = (document.all && document.getElementById &&!window.opera); 
ns6 = (!document.all && document.getElementById); 
opac = 0; function fadein(ln) 
{ 
 if(opac < 100)
 { 
 opac+=5; 
 if(ie5) document.getElementById(ln).filters.alpha.opacity = opac; 
 if(ns6) document.getElementById(ln).style.MozOpacity = opac + "%";
 setTimeout("fadein('"+ln+"')", 1); 
 } 
}

--
edited:
Changes to Moz statement
Opera not considered IE5
--

Noisehag

8:38 am on Jul 12, 2004 (gmt 0)

10+ Year Member

Bernard, this is pure magic. So simple. Thank you very much! I knew it was syntax because that is always what beats me up. Here is the final markup for what I wanted. Works in latest IE and latest NS. I changed the timing a bit for NS so it would be closer to the result in IE. Again, thanks. :)

<html><head>
<script language="JavaScript">
//fades layer in
ie5 = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
opac = 0;
function fadein(ln)
{
if(opac < 90)
{
opac+=5;
if(ie5) { document.getElementById(ln).filters.alpha.opacity = opac; setTimeout("fadein('"+ln+"')", 1);}
if(ns6) { document.getElementById(ln).style.MozOpacity = opac / 100; setTimeout("fadein('"+ln+"')", 20);
}
}
}
</script>
</head>
<body>
<a href="javascript://" onmouseover="fadein('mylayer');">test</a>
<div id="mylayer" style="position:absolute; left:100px; top:150px; width:100px; height:100px; clip:rect(0,100,100,0); filter: alpha(opacity=0); -moz-opacity:0; background-color:red; z-index:1">
</div>
</body></html>

<added>I changed the ending opacity to 90 because my intention is to use this for a drop down navigation menu and I wanted the content underneath to show through ever so slightly when fully faded in.

Bernard Marx

9:30 am on Jul 12, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Sounds good to me, apart from

..MozOpacity = opac / 100

I'm not sure IE goes for delays below 60ms, but it can't hurt. However, Opera will pass:

document.all && document.getElementById

, so it might be a good idea to add the

&&!window.opera

Leosghost

11:15 am on Jul 12, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I've had IE5.5 and working at IE6.0 working at 5ms ..not with this kind of script tho ..it was to block screenprint ...but the delay seems to be Ok .

Bernard Marx

11:26 am on Jul 12, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I wasn't suggesting 1ms doesn't work (although it does look like it), merely that IE, according to research done by my betters, doesn't seem capable of doing things any faster than 60ms.

Leosghost

11:56 am on Jul 12, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Wooah there!...you are the person here that I know if get stuck in javascript ...has the answers ...I wasn't dreaming of contradiction ...;)

Bernard Marx

1:57 pm on Jul 12, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Sorry, if it looked like I was 'jumping'. Not intended.
I do hope you're being a little sarcastic though. I certainly don't have all the answers and, if I'm never contradicted, I never will!

Noisehag

7:38 pm on Jul 12, 2004 (gmt 0)

10+ Year Member

I suppose increasing the step to 10 and then ms to say 50 would be fine. The effect I'm going for is just a quick little fade in that takes the edge off a menu just blinking onto the screen.

And yes, Bernard will be my first sticky when I get stucky in JS scripting. hehe

john_k

7:51 pm on Jul 12, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I'll sticky you with a URL that does a javascript fade-out and fade-in. It's not on a menu, but the technique might be useful. It uses an array of hex colors and then just loops through the array using setTimeout.

The site is for a magic 8-ball knockoff that I did when I was particularly bored a few months ago.

ncsuk

3:06 pm on Aug 26, 2004 (gmt 0)

10+ Year Member

How would you make this script loop?

Im using something similiar to fade in layers but it only runs once for each link. If I wanted it to fade in every layer what would need to be done?