Color Change

This site is best viewed in a modern browser with JavaScript enabled.

savmort

The following script (one of 5 such elements on my site) works as intended in my programming viewer, but do not work with my browsers, IE or Chrome. I have exhausted my personal programming resources trying to figure out why. Would someone, please be kind enough to tell me what will make it work. If so, I will be eternally grateful and in your debt.

<HTML>
<HEAD>
<META NAME="Color Change" >
<TITLE>Color Change</TITLE>
<SCRIPT LANGUAGE="JavaScript">

<!--

function makeArray()
{
	this.length = makeArray.arguments.length
	for (var i = 0; i < this.length; i++)
	{
		this[i] = makeArray.arguments[i];
	}
} 

var c3text = "<FONT SIZE='6'><STRONG>&ldquo; HEADER 2&rdquo;</STRONG></FONT>";
var colorSpeed3 = 1000;
var colorCounter3 = 0;
var color3 = new makeArray("#FF8300", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#AA00FF", "#FF0000");

//-->

</SCRIPT>
</HEAD> 
<BODY BGCOLOR="#000032" BACKGROUND="images/StarField.gif" BGPROPERTIES="FIXED" TEXT="#00FFFF" LINK="#FFFF00" VLINK="#00FF00" ALINK="#FF00FF">

<TABLE ALIGN="CENTER" WIDTH="1000">
  <TR>
      <TD><FONT SIZE="4">

<TABLE ALIGN="CENTER" BORDER="0" WIDTH="600">
  <TR>
      <TD ALIGN="CENTER" WIDTH="500"><FONT COLOR="#FF0000">

  <A HREF="Header 2" TARGET="HEADER 2"><FONT COLOR="#FF0000">

<SCRIPT LANGUAGE="Javascript">

if (navigator.appName == "Netscape")
{
	document.write('<LAYER ID="c3"><CENTER>'+c3text+'</CENTER></LAYER><BR>');
}

if (navigator.appVersion.indexOf("MSIE") != -1)
{
	document.write('<DIV ID="c3"><CENTER>'+c3text+'</CENTER></DIV>');
}

function changeColor3()
{
	if(navigator.appName == "Netscape")
	{
		document.c3.document.write('<CENTER><FONT COLOR="'+color3[colorCounter3]);
		document.c3.document.write('">'+c3text+'</FONT></CENTER>');
		document.c3.document.close();
	}
	else if (navigator.appVersion.indexOf("MSIE") != -1)
	{
		document.all.c3.style.color = color3[colorCounter3];
	}
	if (colorCounter3 == color3.length - 1)
	{
		colorCounter3 = 0;
	}
	else
	{
		colorCounter3++;
	}
}

setInterval("changeColor3()",colorSpeed3);

</SCRIPT>
</TABLE>
<BR>
</FONT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Arctic_Fox

Netscape?

Kevin2

Arctic Fox;1353945 wrote:
Netscape?

Oh -- very good!

@OP: try this. There may very well be better ways, but this at least uses 21st century code.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>color change</title>
<style>
	body {
		background-color:#000032;
		background-image: url(images/starfield.gif);
		background-attachment:fixed;
		/* background-repeat: repeat-x repeat-y; */ /*uncomment and adjust if/as needed*/
		color:#00ffff;
	}
	h1 {text-align:center;}
	a:link {#ffff00;}
	a:visited {#00ff00;}
</style>
<script>

function setcolor(){
window.setTimeout( "setcolor()", 5000); // 5000 milliseconds delay

var index = Math.round(Math.random() * 9);

var ColorValue = "FFFFFF"; // default color - white (index = 0)

if(index == 1)
ColorValue = "FF8300";
if(index == 2)
ColorValue = "FFFF00";
if(index == 3)
ColorValue = "00FF00";
if(index == 4)
ColorValue = "00FFFF";
if(index == 5)
ColorValue = "0000FF";
if(index == 6)
ColorValue = "AA00FF";
if(index == 7)
ColorValue = "FF0000";
if(index == 8)
ColorValue = "FFCC99"; //lt orange
if(index == 9)
ColorValue = "CCCCCC"; //lt grey

document.getElementById('heading').style.color = "#" + ColorValue;
}
</script>
</head> 
<body onload="setcolor()">
<h1 id="heading">&ldquo; HEADER &rdquo;</h1>
</body>
</html>

Full disclosure: script stolen and adapted from
http://www.computerhope.com/j11.htm

savmort

Kevin2;1354239 wrote:
Oh -- very good!

@OP: try this. There may very well be better ways, but this at least uses 21st century code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>color change</title>
<style>
	body {
		background-color:#000032;
		background-image: url(images/starfield.gif);
		background-attachment:fixed;
		/* background-repeat: repeat-x repeat-y; */ /*uncomment and adjust if/as needed*/
		color:#00ffff;
	}
	h1 {text-align:center;}
	a:link {#ffff00;}
	a:visited {#00ff00;}
</style>
<script>

function setcolor(){
window.setTimeout( "setcolor()", 5000); // 5000 milliseconds delay

var index = Math.round(Math.random() * 9);

var ColorValue = "FFFFFF"; // default color - white (index = 0)

if(index == 1)
ColorValue = "FF8300";
if(index == 2)
ColorValue = "FFFF00";
if(index == 3)
ColorValue = "00FF00";
if(index == 4)
ColorValue = "00FFFF";
if(index == 5)
ColorValue = "0000FF";
if(index == 6)
ColorValue = "AA00FF";
if(index == 7)
ColorValue = "FF0000";
if(index == 8)
ColorValue = "FFCC99"; //lt orange
if(index == 9)
ColorValue = "CCCCCC"; //lt grey

document.getElementById('heading').style.color = "#" + ColorValue;
}
</script>
</head> 
<body onload="setcolor()">
<h1 id="heading">&ldquo; HEADER &rdquo;</h1>
</body>
</html>
Full disclosure: script stolen and adapted from
http://www.computerhope.com/j11.htm

Many thanks! And in response to 21st Century Code, I feel I must tell you I'm 74 years old <smile>. Moreover, though the recommended is indeed better, the script proposed would be quite cumbersome, as written, for the full page color code arrays contained on each style sheet in my program. Fortunately, with the hint provided I was able to eliminate the branching or forking in my antiquated script (about 10 lines) and just use the script related to IE and it worked fine in IE and Chrome. Take a look at the flashing and subtle colorChange headers on my site. Thank you one and all!

007Julien

a variant with more diverse colours

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>color change</title>
<style>
    body {
        background-color:#000032;
        background-image: url(images/starfield.gif);
        background-attachment:fixed;
        /* background-repeat: repeat-x repeat-y; */ /*uncomment and adjust if/as needed*/
        color:#00ffff;
    }
    h1 {text-align:center;}
    a:link {#ffff00;}
    a:visited {#00ff00;}
</style>
<script>
function setcolor(){
    window.setTimeout( "setcolor()", 5000); // 5000 milliseconds delay
    var ColorValue ="rgb("+128+(Math.floor(Math.random()*128))+","+(128+Math.floor(Math.random()*128))+","+(128+Math.floor(Math.random()*128))+")";
    document.getElementById('heading').style.color = ColorValue;
}
</script>
</head>
<body onload="setcolor()">
<h1 id="heading">&ldquo; HEADER &rdquo;</h1>
</body>
</html>