www.webdeveloper.com
Results 1 to 5 of 5

Thread: Color Change

  1. #1
    Join Date
    Aug 2014
    Posts
    2

    Color Change

    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 Code:
    <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>
    Last edited by jedaisoul; 08-30-2014 at 03:44 PM. Reason: code tags added

  2. #2
    Join Date
    Jan 2004
    Location
    Vostok Station, AQ
    Posts
    5

  3. #3
    Join Date
    Oct 2013
    Posts
    483
    Quote Originally Posted by Arctic Fox View Post
    Netscape?
    Oh -- very good!

    @OP: try this. There may very well be better ways, but this at least uses 21st century code.
    HTML 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

  4. #4
    Join Date
    Aug 2014
    Posts
    2

    Color change

    Quote Originally Posted by Kevin2 View Post
    Oh -- very good!

    @OP: try this. There may very well be better ways, but this at least uses 21st century code.
    HTML 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!

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    a variant with more diverse colours
    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 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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles