Forum Moderators: open

Message Too Old, No Replies

fade in and out pages

         

tricky

1:39 pm on Nov 13, 2008 (gmt 0)

10+ Year Member



i want to fade in and fade out pages of my website but it isnt working i dont know why :( please help

function fadeInOut(linkIn,linkOut1,linkOut2) {
var fadeIn=0;
var fadeOut=1;
for(var i = 0 ; i <10 ; i++){

window.setTimeout("document.getElementById('"+linkIn+"').style.opacity = '1' ;"' , 100);
window.setTimeout("document.getElementById('"+linkOut1+"').style.opacity = '0' ;" , 100);
window.setTimeout("document.getElementById('"+linkOut2+"').style.opacity = '0' ;" , 100);
fadeIn= fadeIn + 0.1 ;
fadeOut= fadeOut - 0.1 ;
}
}

function layer(linkIn){
var linkOut1;
var linkOut2;
if(linkIn == "index"){
linkOut1 = "profile" ;
linkOut2 = "poems" ;
fadeInOut(linkIn,linkOut1, linkOut2);
}

else if(linkIn == "profile"){
linkOut1 = "index" ;
linkOut2 = "poems" ;
fadeInOut(linkIn,linkOut1, linkOut2);
}

else if(linkIn == "poems"){
linkOut1 = "index" ;
linkOut2 = "profile" ;
fadeInOut(linkIn,linkOut1, linkOut2);
}
}

and this is the html which is calling the function

<td onclick="layer('index')" style="color:white; text-decoration:none">Home</a></td>
<td onclick="layer('profile')" style="color:white; text-decoration:none">Profile</a></td>
<td onclick="layer('poems')" style="color:white; text-decoration:none">Poems</a></td>

tricky

1:40 pm on Nov 13, 2008 (gmt 0)

10+ Year Member



sorry the 1 and the 0 are the variable i was trying to see if the problem was from that variable but couldnt tell really the correct code is

window.setTimeout("document.getElementById('"+linkIn+"').style.opacity = "fadeIn" ;"' , 100);
window.setTimeout("document.getElementById('"+linkOut1+"').style.opacity = "fadeOut" ;" , 100);
window.setTimeout("document.getElementById('"+linkOut2+"').style.opacity = "fadeOut" ;" , 100);

tricky

3:53 pm on Nov 13, 2008 (gmt 0)

10+ Year Member



please somebody help :(

Fotiman

6:23 pm on Nov 13, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Welcome to WebmasterWorld!

As to your question, I want to point out a few things.
1. The opacity style is defined in CSS3 (specifically the color module [w3.org...] It won't work in any current version of IE, and may or may not work in your browser of choice.
2. In your 2nd post you have "fadeIn" and "fadeOut" quoted, meaning they are string values instead of the variables that you intended to reference, so remove the surrounding quotes.
3. You are executing the setTimeout methods within a loop, with each each iteration firing the method 100ms from when it's executed in your loop. What this basically means is that all 10 iterations are going to fire basically at the same time (since iterating 10 items is probably not going to take more than 1ms). It's possible there could be SOME time difference with each iteration of the loop, but it would be single digit milliseconds. Perhaps you meant for the time value to be dynamic, like:
100 * (i + 1)
Thus, the first time through the loop it's 100 * 1, then 100 * 2, etc., up to 100 * 10, which would give you a progression over the course of 1 second in 100ms increments (roughly).

Not sure if that helps.