...

View Full Version : random colours in mozilla - ???



neil.c
07-10-2002, 07:57 PM
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:



<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
07-11-2002, 11:28 AM
ok. it doesnt matter now, i fixed it.

it seems the only reason it worked before was one of microsoft's many deviations 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.


function fRGB(vRedVal, vGrnVal, vBluVal){
var vColVal = (65536 * vRedVal) + (256 * vGrnVal) + vBluVal
var vColStr = vColVal.toString(16)
return vColStr

:thumbsup:

Zvona
07-11-2002, 11:45 AM
I once wrote a following cross-browser script for a same purpose :

<!-- 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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum