Text Function ...

[mdumka]

Hello ...

I am trying to fade some text from one color to another with a pause ... but it just goes from one color to the end color ...

How can I slow this down ...

function fader() {
			setTimeout('document.getElementById("textbox").style.color="#006666";', 1000);
			setTimeout('document.getElementById("textbox").style.color="#008080";', 1000);
			setTimeout('document.getElementById("textbox").style.color="#009999";', 1000);
			setTimeout('document.getElementById("textbox").style.color="#00B3B3";', 1000);
			setTimeout('document.getElementById("textbox").style.color="#00CCCC";', 1000);
			setTimeout('document.getElementById("textbox").style.color="#00E6E6";', 1000);
			setTimeout('document.getElementById("textbox").style.color="#00FFFF";', 1000);
			setTimeout('document.getElementById("textbox").style.color="#1AFFFF";', 1000);
			setTimeout('document.getElementById("textbox").style.color="#33FFFF";', 1000);
			setTimeout('document.getElementById("textbox").style.color="#4DFFFF";', 1000);
			setTimeout('document.getElementById("textbox").style.color="#66FFFF";', 1000);
			setTimeout('document.getElementById("textbox").style.color="#80FFFF";', 1000);
			setTimeout('document.getElementById("textbox").style.color="#99FFFF";', 1000);
			setTimeout('document.getElementById("textbox").style.color="#B3FFFF";', 1000);
			setTimeout('document.getElementById("textbox").style.color="#CCFFFF";', 1000);
			setTimeout('document.getElementById("textbox").style.color="#E5FFFF";', 1000);
			setTimeout('document.getElementById("textbox").style.color="#F8F8F8";', 1000);
		}

Thanks

Mike

[DXL]

Your script will wait one second and then apply a lot of colors to the same textbox at the same time.
The first line of your function could stay, but the second one should have 2000 as the second argument instead of 1000, the third one 3000, and so on.
So you would have:

			setTimeout('document.getElementById("textbox").style.color="#006666";', 1000);
			setTimeout('document.getElementById("textbox").style.color="#008080";', 2000);
			setTimeout('document.getElementById("textbox").style.color="#009999";', 3000);

[mdumka]

Thanks DXL ...

I have been playing with the script and made some changes to reduce code ...

function fader() {
			// Set Color Array
			var colors = new Array();
			colors[0] = "#006666"
			colors[1] = "#008080"
			colors[2] = "#009999"
			colors[3] = "#00B3B3"
			colors[4] = "#00CCCC"
			colors[5] = "#00E6E6"
			colors[6] = "#00FFFF"
			colors[7] = "#1AFFFF"
			colors[8] = "#33FFFF"
			colors[9] = "#4DFFFF"
			colors[10] = "#66FFFF"
			colors[11] = "#80FFFF"
			colors[12] = "#99FFFF"
			colors[13] = "#B3FFFF"
			colors[14] = "#CCFFFF"
			colors[15] = "#E5FFFF"
			colors[16] = "#F8F8F8"
			// Set Array Index
			var i
			for (i in colors) {
				setTimeout('setColor(colors[i]);', 1000);
			}
		}
		function setColor(hex) {
			document.getElementById("textbox").style.color = hex;
		}

But in this line ...

setTimeout('setColor(colors[i]);', 1000);

I am getting an error of colors is not defined.

Am I on the right track?

Thanks

[webhhs]

The problem is that setTimeout is non-blocking meaning that it isn't causing your program to pause and wait for the timeout it will set the timer and then execute the next line of code. Try this:

			// Set Color Array
			var colors = new Array();
			colors[0] = "#006666"
			colors[1] = "#008080"
			colors[2] = "#009999"
			colors[3] = "#00B3B3"
			colors[4] = "#00CCCC"
			colors[5] = "#00E6E6"
			colors[6] = "#00FFFF"
			colors[7] = "#1AFFFF"
			colors[8] = "#33FFFF"
			colors[9] = "#4DFFFF"
			colors[10] = "#66FFFF"
			colors[11] = "#80FFFF"
			colors[12] = "#99FFFF"
			colors[13] = "#B3FFFF"
			colors[14] = "#CCFFFF"
			colors[15] = "#E5FFFF"
			colors[16] = "#F8F8F8"
		
		
               function setColor(ind) 
               {
		       document.getElementById("textbox").style.color = colors[ind];
                       if(ind < colors.length)
                      {
                           setTimeout("setColor(" + (ind+1) + ")", 1000);
                      }
		}

This should work because it will only reset the timer after the second has passed.

To begin the fade use: setColor(0);

[mdumka]

Hi There ... thanks for all of your help.

I have made some strides but just need a little more help.

1) I am getting the text to fade ... but it is happening too fast, I want the text to show for like 3 seconds ... then fade, that is not happening now.

2) I would like to have mouse over and mouse out functions to stop and resume the function of rotating and fading the text ... is this possible?

Here is my code ...

<!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>Testing 3</title>
	<style>
		body { 
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
		}
		#textbox {
			height:102px; 
			border:1px solid #CCCCCC; 
			background-color:#F8F8F8; 
			margin:5px 10px 10px 10px; 
			padding:10px 15px 10px 15px;
			color:#006666;
		}
		#textbox a { color:inherit; !important }
	</style>
	<script>
		function fader() {
			// Set Color Array
			var colors = new Array();
			colors[0] = "006666"
			colors[1] = "1D7777"
			colors[2] = "408C8C"
			colors[3] = "63A0A0"
			colors[4] = "7FB1B1"
			colors[5] = "9BC1C1"
			colors[6] = "9BC1C1"
			colors[7] = "B7D2D2"
			colors[8] = "D2E2E2"
			colors[9] = "F8F8F8"
			
			// Set Array Index
			var x;
			var timer = 100;
			for (x in colors) {
				setTimeout("setColor('" + colors[x] + "')", timer);
				timer = timer + 100;
			}
		}
		function setColor(hex) {
			document.getElementById("textbox").style.color = '#' + hex;
		}
		function pause() {
			// Empty Code
		}
		var content = new Array();
		var i = 0;
		content[i++] = '<p class="dc_main_headingtwo" style="padding-bottom:5px;"><a href="#">View Your Investment Contracts Online</a></p><p>If you own a Great-West Life segregated fund contract, select <i>Personal Investments</i> under <i>Client Sign In</i> and register today</a>.</p>';
		content[i++] = '<p class="dc_main_headingtwo" style="padding-bottom:5px;"><a href="#">This Is Sample Rotating Content</a></p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur est. Vestibulum rhoncus porttitor felis. Donec libero metus, pharetra in, adipiscing eget, eleifend vitae, enim.</p>';
		content[i++] = '<p class="dc_main_headingtwo" style="padding-bottom:5px;"><a href="#">In The Community</a></p><p>We received the 2006 Philanthropy Award for Outstanding Corporation. To learn more, go to <a href="#">Community News</a>.</p>';
		
		var duration = 4000;
		id = setInterval('rotate()',duration);
		var c = 0;
		function rotate() {
			app = content[c++];
			if (c == i) c = 0;
			document.getElementById("textbox").innerHTML = app;
			setTimeout("pause();", 3000);
			fader();	
		}
	</script>
</head>

<body onload="javascript:rotate();">

<div id="textbox"></div>

</body>
</html>

Thanks

Mike