Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2002
    Location
    yorkshire, uk
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    random colours in mozilla - ???

    i made this script to put on all pages in my site to have a gradually changing background colour. it works perfectly in IE 5.0, the bg colour changes very smoothly from a pale turquoise to light yellow to blue to turquoise again.

    but i have just tested it on mozilla 1.0 and was very shocked by the bg colour changing very quickly between all sorts of seemingly random colours, most of them outside the ranges in my script.

    is there some difference in how the bgcolor is specified in ie and moz?
    here is the script:

    Code:
    <HTML>
    <HEAD>
    <TITLE>bgcolour phaser</TITLE>
    <SCRIPT language="javascript">
    <!--
    /*
    script by rAnDOm nEiL BlOKe (Neil Clements).
    you may use and edit it freely but please credit to my name.
    
    this script uses JavaScript to phase between colour stages.
    use the three arrays below to enter the colour stages.
    for each stage, enter the red, green and blue values in the arrays.
    repeat the first colour at the end.
    make sure there are the same number of numbers in each list.
    e.g. the first colour here is R:153, G:204, B:204.
    you can have as many colours as you want.
    */
    var vRedA = new Array(153,255,153,059,153)
    var vGrnA = new Array(204,255,204,159,204)
    var vBluA = new Array(204,204,204,187,204)
    
    var vStages = 32 //the number of phases in each colour stage.
    var vInterval = 200 //the time for each phase, in milliseconds.
    
    var vRGBString = ""
    var vRGBString = fRGB(vRedA[0], vGrnA[0], vBluA[0])
    document.bgColor = vRGBString //sets initial colour.
    var vColors = vRedA.length //counts colours
    var vCurCol = 1 //current colour stage
    var vCurStg = 1 //current phase stage within that colour
    
    function fPhase(){ //this performs each colour phase.
    var vRedVal = Math.floor(vRedA[vCurCol-1] + (vCurStg * ((vRedA[vCurCol] - vRedA[vCurCol-1]) / vStages)))
    var vGrnVal = Math.floor(vGrnA[vCurCol-1] + (vCurStg * ((vGrnA[vCurCol] - vGrnA[vCurCol-1]) / vStages)))
    var vBluVal = Math.floor(vBluA[vCurCol-1] + (vCurStg * ((vBluA[vCurCol] - vBluA[vCurCol-1]) / vStages)))
    /*
    the formulae above calculate the R, G and B values for the new colour.
    the idea is:
    1) work out the difference between each colour value at the start and end of this stage.
    2) divide this by the number of phases per stage
    3) multiply this by the number of phases completed.
    4) add this to the value for the start of the stage.
    the above all condensed into one-line formulae.
    */
    
    var vRGBString = ""
    var vRGBString = fRGB (vRedVal, vGrnVal, vBluVal) //i can't find a built-in RGB function like the one in VBS.
    document.bgColor = vRGBString //sets the bgcolor to the new colour.
    
    vCurStg++ //increments the phase counter
    if (vCurStg > vStages){
      vCurCol ++
      vCurStg = 1
    } //this section starts the next stage when one is finished.
    if (vCurCol == vColors){
      vCurCol = 1
    } //this section goes back to the first colour stage after all have done.
    }
    
    // fStart() is called by body onload. calls the phaser repeatedly at specified time interval.
    function fStart(){
    setInterval("fPhase()",vInterval)
    }  
    
    // calculates an RGB value for separate R, G and B values.
    function fRGB(vRedVal, vGrnVal, vBluVal){
    var vColVal = (65536 * vRedVal) + (256 * vGrnVal) + vBluVal
    return vColVal
    }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY onload="fStart()">
    </BODY>
    </HTML>
    thanks in advance.
    neil.c

  • #2
    New Coder
    Join Date
    Jun 2002
    Location
    yorkshire, uk
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    i fixed it

    ok. it doesnt matter now, i fixed it.

    it seems the only reason it worked before was one of microsoft's many [ahem]deviations[/ahem] from the standards.

    my fRGB function returned a decimal number, not a hex string. IE can deal with this, but other browsers try to read the decimal value as a hex.

    my function did the right calculations i.e. *ing the R value by 65536 (hex 10000) and the G value by 256 (hex 100) and adding them all up, but it just needed to make it into a hex string by the .toString(16) method.
    Code:
    function fRGB(vRedVal, vGrnVal, vBluVal){
    var vColVal = (65536 * vRedVal) + (256 * vGrnVal) + vBluVal
    var vColStr = vColVal.toString(16)
    return vColStr
    neil.c

  • #3
    Regular Coder
    Join Date
    May 2002
    Location
    Helsinki, Finland
    Posts
    231
    Thanks
    0
    Thanked 1 Time in 1 Post
    I once wrote a following cross-browser script for a same purpose :
    Code:
    <!-- Example Written by Zvona -->
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    	<head>
    		<title>Background color</title>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1;" />
    		<script type="text/javascript">
    		function zBgColor()
    		{
    			var	time	= new Date();
    			var	seconds	= time.getSeconds();
    			var	a	= (seconds*4+16).toString(16);
    			var	i	= (seconds<10)?0:seconds.toString().substring(0,1);
    			var	stdColor		= new Array("A0","B0","C0","D0","E0","F0");
    
    			document.bgColor	= "#"+ a + a + stdColor[i];
    		}
    		</script>
    	</head>
    	<body onload="zBgColor();iVal = setInterval('zBgColor()',1000);" style="text-align:center;">
    		<a href="javascript&#58;clearInterval(iVal);" title="Stop this">Stop this insanity</a>
    	</body>
    </html>
    Zvona
    First Aid for
    Web Design


  •  

    Posting Permissions

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