Tweet
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:
thanks in advance.
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>
Comment