...

View Full Version : Help with text fading scripts with text variations



SymphonicTonic
01-24-2012, 04:05 AM
Hello everyone. I was wondering if anyone could help me come up with a script for fading text in and out then changing the text to something different when it fades back in again. I want to overlay a series of quotes on my website across the top and have them display for about 15 seconds then fade out to a new quote and have it cycle through them all indefinitely. I am pretty new to javascript and not much more experienced in html in general, so please be as thorough as possible. I'm a true noob :) Thanks!

SymphonicTonic
01-24-2012, 04:06 AM
Hello everyone. I was wondering if anyone could help me come up with a script for fading text in and out then changing the text to something different when it fades back in again. I want to overlay a series of quotes on my website across the top and have them display for about 15 seconds then fade out to a new quote and have it cycle through them all indefinitely. I am pretty new to javascript and not much more experienced in html in general, so please be as thorough as possible. I'm a true noob :) Thanks!
If you can't explain it to a six year old, you don't understand it yourself. -Albert Einstein

devnull69
01-24-2012, 07:31 AM
Are you planning to use a framework like jQuery? I don't want to start explaining the rights and wrongs for using frameworks, I just need to know. jQuery offers a wide variety of effects that otherwise need to be implemented "manually".

SymphonicTonic
01-24-2012, 04:45 PM
Yes, I'll use jQuery.

devnull69
01-24-2012, 10:32 PM
HTML


<div id="quotearea" style="position:fixed; top:0; left:0; width: 100%; height: 30px;"></div>




var quotes = [
"This is quote 1",
"This is quote 2",
"This is quote 3"
];

var quotePos = 0;

showQuote();

window.setTimeout(changeQuote, 15000);

function changeQuote() {
quotePos++;
if(quotePos == quotes.length) quotePos = 0;
showQuote();
window.setTimeout(changeQuote, 15000);
}

function showQuote() {
$('#quotearea').hide('slow').html(quotes[quotePos]).show('slow');
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum