Mon, 2003-11-10 18:21
Greetings,
I have a nifty script to change font colors I need to use on my site. It works in its barest form. Youll find that below. It uses the "style" to change font colors and cycles through predefined colors.
I've got it plugged into a test page, www.thequiltjunction.com/indextest.htm.
The issue is that it works when the spans holding the colored text exist immediately after the body tag, but not when anywhere later in the page.
Anyone willing to take a look and let me know what's up?
Is it that the script that changes the colors uses the color name and not the color number?
Thanks!
This example works............
<HTML>
<HEAD>
<TITLE>test</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<SCRIPT>
<!----------------Global Variable Declarations----------->
var sColor1="white";
var sColor2="gray";
var iColorLoop=0;
var iCurrentCELL=0;
var bAscending=true;
<!------------------------------------------------------->
celColorChange=new Array(iCurrentCELL)
function cycleColors()
{
if (bAscending)
{
with(document.all)
celColorChange[iCurrentCELL].style.color=sColor2;
iCurrentCELL++;
if (iCurrentCELL>4)
{
bAscending=false;
iCurrentCELL=4;
}
}
else
{
with(document.all)
celColorChange[iCurrentCELL].style.color=sColor1;
iCurrentCELL--;
if (iCurrentCELL==0)
{
bAscending=true;
changeColors();
}
}
}
function changeColors()
{
switch (iColorLoop)
{
case 0:
sColor1="yellow";
sColor2="orange";
break;
case 1:
sColor1="hotpink";
sColor2="purple";
break;
case 2:
sColor1="aqua";
sColor2="blue";
break;
case 3:
sColor1="lightgreen";
sColor2="green";
}
iColorLoop++;
if (iColorLoop>3)
iColorLoop=0;
}
</SCRIPT>
</HEAD>
<BODY onload="setInterval('cycleColors()',100)">
<span ID="celColorChange">t</span>
<span ID="celColorChange">e</span>
<span ID="celColorChange">s</span>
<span ID="celColorChange">t</span>
<span ID="celColorChange">1</span>
</BODY>
</HTML>
Wed, 2003-11-12 14:04
#1
script to change font color via style not working
an ID shoould be unique on a page. For example this:
<BODY onload="setInterval('cycleColors()',100)">
<span ID="celColorChange">t</span>
<span ID="celColorChange">e</span>
<span ID="celColorChange">s</span>
<span ID="celColorChange">t</span>
<span ID="celColorChange">1</span>
</BODY>
is WRONG
instead use classes:
<BODY onload="setInterval('cycleColors()',100)">
<span class="celColorChange">t</span>
<span class="celColorChange">e</span>
<span class="celColorChange">s</span>
<span class="celColorChange">t</span>
<span class="celColorChange">1</span>
</BODY>