Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Hello.
This code below is supposed to switch content in a "div", which works. BUT, I can't get the fade effect to work. What am I doin wrong?
var SwitchInterval = 1000;
var Counter = 0;
var CountedTitles;
var CountedFades;
var Event;
var FadeEvent;
var FadeCounter = 0;
// Avaible titles, which will be shown in the "Information DIV"
var Title = new Array();
Title[0] = "Whooho test 1";
Title[1] = "Whooho test 234243";
Title[2] = "Trallallalala..";
// Fade effect on the Title's
var FadeStep = new Array();
FadeStep[0] = "dad0c6";
FadeStep[1] = "3d362d";
FadeStep[2] = "423a31";
FadeStep[3] = "473f35";
FadeStep[4] = "4c4338";
FadeStep[5] = "52483c";
FadeStep[6] = "574c40";
FadeStep[7] = "5c5144";
FadeStep[8] = "615547";
FadeStep[9] = "66594b";
FadeStep[10] = "6b5e4f";
FadeStep[11] = "706253";
FadeStep[12] = "756756";
FadeStep[13] = "7a6b5a";
FadeStep[14] = "80705e";
FadeStep[15] = "857462";
FadeStep[16] = "8a7965";
FadeStep[17] = "8f7d69";
FadeStep[18] = "94826d";
FadeStep[19] = "998671";
FadeStep[20] = "9e8b74";
FadeStep[21] = "a38f78";
FadeStep[22] = "a8947c";
FadeStep[23] = "ad9880";
FadeStep[24] = "b29d84";
FadeStep[25] = "b8a187";
FadeStep[26] = "bda68b";
FadeStep[27] = "c2aa8f";
FadeStep[28] = "c7ae93";
FadeStep[29] = "ccb396";
FadeStep[30] = "d1b79a";
FadeStep[31] = "d4ba9c";
function FadeTitle(){
CountedFades = FadeStep.length;
if(FadeSteps == CountedFades) FadeSteps = 0;
document.getElementById('Information').style.color = FadeStep[FadeSteps];
FadeSteps = FadeSteps + 1;
FadeEvent = setTimeout("FadeTitle()", 100);
}
function SwitchTitle(){
CountedTitles = Title.length;
if(Counter == CountedTitles) Counter = 0;
document.getElementById('Information').innerHTML = Title[Counter];
Counter = Counter + 1;
Event = setTimeout("SwitchTitle()", SwitchInterval);
// Fade the title
FadeTitle();
} -
Hi Andy!
You don't have the FadeSteps variable declareted at the begining. -
Didn't work :(
-
Did you put it like this: var FadeSteps = 0; or like this: var FadeSteps;?
You have to give FadeSteps an initial number otherwise it will always be NaN.
Here is what i've tested:
<html>
<head>
</head>
<body>
<div id="Information" style="width:100px; height:100px; border:1px solid #000000"><a href="javascript:SwitchTitle()">ssss</a></div>
<script type="text/javascript">
var SwitchInterval = 1000;
var Counter = 0;
var CountedTitles;
var CountedFades;
var Event;
var FadeEvent;
var FadeSteps = 0;
var FadeCounter = 0;
// Avaible titles, which will be shown in the "Information DIV"
var Title = new Array();
Title[0] = "Whooho test 1";
Title[1] = "Whooho test 234243";
Title[2] = "Trallallalala..";
// Fade effect on the Title's
var FadeStep = new Array();
FadeStep[0] = "dad0c6";
FadeStep[1] = "3d362d";
FadeStep[2] = "423a31";
FadeStep[3] = "473f35";
FadeStep[4] = "4c4338";
FadeStep[5] = "52483c";
FadeStep[6] = "574c40";
FadeStep[7] = "5c5144";
FadeStep[8] = "615547";
FadeStep[9] = "66594b";
FadeStep[10] = "6b5e4f";
FadeStep[11] = "706253";
FadeStep[12] = "756756";
FadeStep[13] = "7a6b5a";
FadeStep[14] = "80705e";
FadeStep[15] = "857462";
FadeStep[16] = "8a7965";
FadeStep[17] = "8f7d69";
FadeStep[18] = "94826d";
FadeStep[19] = "998671";
FadeStep[20] = "9e8b74";
FadeStep[21] = "a38f78";
FadeStep[22] = "a8947c";
FadeStep[23] = "ad9880";
FadeStep[24] = "b29d84";
FadeStep[25] = "b8a187";
FadeStep[26] = "bda68b";
FadeStep[27] = "c2aa8f";
FadeStep[28] = "c7ae93";
FadeStep[29] = "ccb396";
FadeStep[30] = "d1b79a";
FadeStep[31] = "d4ba9c";
function FadeTitle(){
CountedFades = FadeStep.length;
if(FadeSteps == CountedFades) FadeSteps = 0;
document.getElementById('Information').style.backgroundColor = FadeStep[FadeSteps];
FadeSteps = FadeSteps + 1;
FadeEvent = setTimeout("FadeTitle()", 1000);
}
function SwitchTitle(){
CountedTitles = Title.length;
if(Counter == CountedTitles) Counter = 0;
document.getElementById('Information').innerHTML = Title[Counter];
Counter = Counter + 1;
Event = setTimeout("SwitchTitle()", SwitchInterval);
// Fade the title
FadeTitle();
}
</script>
</body>
</html> -
Allright, but I didn't exactly mean like that..
The purpose of the script is to, throw a bit of text, into the "information" DIV, and then fade the text to a new text. If you get what i mean?
Im sorry, but Im pretty new to ajax/javascripting.. =/ -
I see.
Google has some good results for you if you give it a try. :) -
Yeah..
You don't know how to do it? -
If i get it right than here is what i think of making a text fade in:
<html>
<head>
</head>
<body onload="changeText()">
<div id="info" style="width:200px; height:100px; border:1px solid #000000"><!-- --></div>
<script type="text/javascript">
var textTimer;
var colTimer;
var colIndex = 0;
var textIndex = 0;
var infoE = document.getElementById("info");
var colArr = ["FFFFFF", "C2C2C2", "878686", "565555", "3B3B3B", "000000"];
var textArr = ["text1", "text2", "text3", "text4"];
function doFade(){
if (colIndex < colArr.length){
infoE.style.color = colArr[colIndex];
colTimer = setTimeout("doFade()", 40);
colIndex++;
}
}
function changeText(){
if (textIndex == textArr.length){
textIndex = 0;
}
infoE.innerHTML = textArr[textIndex];
textIndex++;
textTimer = setTimeout("changeText()", 1500);
clearTimeout(colTimer);
colIndex = 0;
doFade();
}
</script>
</body>
</html>
Comes to my mind. In CSS you can set color by RGB values.
So there could be another solution, with RGB values in color changing.
In that case you don't need an array with colors and this code needs a "little" bit of rewriting.
Anyway, did you mean something like this? -
-
CommentAuthorbenjitastic
- CommentTimeNov 23rd 2007
Here is a very slick way to fade content in and out: http://www.brandspankingnew.net/archive/2006/09/javascript_css_crossfader.html
You may be able to apply that to what you are trying to do.
And it is only 1.7kb! -
-
@Ylolek:
Yes! Thankyou. I should be able to alter the script from now.
@Benjitastic:
Allright, I will have a look at it. If it does the thing better then the current script, I will use it.
Thx man.
1 to 10 of 10