I am trying to use the "Colorful Text Fader Script" on my web pages, but it only works in Internet Explorer 6.0. I can not get it to work in Netscape 8.1, Firefox 1.5.0.4, or Opera 6.03 Is there a way to get it to work in the other browsers?
I e-mailed Ken, who wrote it, but my e-mail came back as undeliverable.
Here is the link where I got the script
http://javascript.internet.com/text-effects/colorful-text-fader.html
Here is the link to my test page.
http://www.ggcg.org/test_food.html
<script type="text/javascript">
<!--
// add as many or as few messages as you would like
var bmsg=new Array()
bmsg[0]="Bow down thine ear, and hear";
bmsg[1]="the words of the wise,";
bmsg[2]="and apply thine heart unto my knowledge.";
bmsg[3]="Proverbs 22 : 17";
// set your first set of colors. Use as many or as few as you wish.
var colors1=new Array("#ccccff", "#bbbbff", "#aaaaff", "#9999ff",
"#8888ff", "#7777ff", "#6666ff", "#5555ff", "#4444ff", "#3333ff","#2222ff", "#1111ff", "#0000ff");
//set your second set of colors
// *** must have exactly the same number of colors as the array above ***
var colors2=new Array("#ccccff", "#bbbbff", "#aaaaff", "#9999ff",
"#8888ff", "#7777ff", "#6666ff", "#5555ff", "#4444ff", "#3333ff","#2222ff", "#1111ff", "#0000ff");
//set the height of the display in pixels
high=30;
//set the width of the display in pixels
wide=550;
//set the pixel coordinates for the upper left hand corner of the display
Xpos=20;
Ypos=60;
// move the display away from the edges of the background
pad=3;
// set the background color of the display
bgcol="";
//add a background image if you want.
// *** for no image, just leave empty quotes (ex. cellbg=""; ) ***
cellbg="clouds.jpg";
// set the font
fntFam="verdana,helvetica,arial";
fntSize=14;
// set how how many seconds you want the message to stay remain at totality.
pause=3.0;
// Do not edit these values below!!!
icolor=0;
mcolor=1;
ibmsg=0;
spWidth=wide-(2*pad);
totality=false;
glowing=true;
var theBmsg="";
var cellcontent="";
pause=pause*1000;
if(cellbg.length>4){cellbg=" background="+cellbg}
else{cellbg="";}
function doPause(){
totality=false; t=setTimeout("changecolor()",pause);
}
function initiate(){
getContentColor();
getBmsg();
getCellContent();
document.getElementById('bmsgbg').innerHTML=cellcontent;
document.getElementById('bmsgfade').innerHTML=theBmsg;
document.getElementById('bmsgbg').style.left=Xpos+'px';
document.getElementById('bmsgbg').style.top=Ypos+'px';
document.getElementById('bmsgfade').style.left=Xpos+pad+'px';
document.getElementById('bmsgfade').style.top=Ypos+pad+'px';
t=setTimeout("changecolor()",50);
}
function changecolor(){
if(totality==true){doPause();}
else{
getBmsg();
getContentColor();
document.getElementById('bmsgfade').innerHTML=theBmsg;
t=setTimeout("changecolor()",50);
}
}
<p id="wisdom">
I will be changing these thought provoking words of wisdom from time to time.
Some of these words of wisdom are provided Courtesy of Cathedral Press, Long Prairie, MN 56347
</p>
<pre>Here are two that will really make you think......
<span id="vote">Why Should You Vote ?</span>
OUR OBLIGATION TO VOTE
Aren't we glad somebody has always believed
in the significance of one?
Like back in-
1645... when one vote gave Oliver Cromwell the control of England.
1776... when one vote gave America the English language instead of German.
1845... when one vote brought Texas into the union.
1868... when one vote saved President Andrew Johnson from impeachment.
1875... when one vote changed France from a monarchy to a republic.
1941... when one vote saved the Selective Service System just twelve weeks
before Pearl Harbor was attacked.
1923... And did you know that one vote gave Adolph Hitler control of the
Nazi parry?
Ah, the power of one! Never underestimate it.
You, alone, can make a difference!
<br /><br /><br /><br /><br />
If there really is a GOD, how could he allow this to happen?
Where was HE? How many of us have heard that question "Where
was your GOD when the World Trade Center and the Pentagon was
attacked?"
Well I know where my GOD was the morning of September 11, 2001,
and He was very busy! He was trying to discourage anyone from
taking these flights. Those four flights together held over
1000 passengers and there were only 266 aboard.
He was on 4 commercial flights giving terrified passengers the
ability to stay calm. Not one of the family members who were
called by a loved one on one of the high-jacked planes said
that passengers were screaming in the background. On one of the
flights he was giving strength to passengers to try to overtake
the highjackers.
He was busy trying to create obstacles for employees at the World
Trade Center. After all, only around 20,000 were at the towers when
the first jet hit. Since the buildings held over 50,000 workers, this
was a Miracle in itself. How many of the people who were employed at
the World Trade Center told the media that they were late for work or
they had traffic delays.
He was holding up 2-110 story buildings so that 2/3 of the workers
could get out. I was so amazed that the top of the towers didn't
topple when the jets impacted. And when they did fall, they fell
inward. GOD didn't allow them to topple over, as many more lives
would have been lost. And when the buildings went down, my GOD
picked up almost 6,000 of his children and carried them home with
him. Reassuring his frighten children that the worst was over and the
best was yet to come.
He sat down and cried that 19 (Terrorist Attackers) of his children
could have some much hate in their hearts. That they didn't choose
him, but another god that doesn't exist, and now they are lost
forever.
He sent his children that are best trained for this disaster and had
them save the few that were still alive, but unable to help
themselves. And then sent many others to help in anyway they were
needed.
He still isn't finished though, he held the love ones that were left
behind in his arms. He comforts them daily. His other children are
given the strength to reach out to them and help them in any way they
can. And I believe he will continue to help us in what is to come.
He will give the people in charge of this great nation the strength
and the wisdom to do the right thing. He would never leave us in our
time of need.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Color Gradient Supplement (11-June-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// A supplement to my 'Color Gradient' Script.
// To apply the progressively Change Text or BackGround Color between two colors
// to a number of messages
// There may be as many applications on a page as required.
// ***** Application Notes
// **** The HTML Code
// e.g.
// <div id="Tst1" style="position:relative;" >
// <div style="width:500px;text-align:left;font-size:20px;" >Message One</div>
// <div style="width:500px;text-align:left;font-size:20px;" > Message Two</div>
// </div>
//
// The messages or contained in <DIV> elements with the required style attributes.
// These 'Message <DIV>s are nested in a parent <DIV>.
// This 'Parent <DIV>' must be assigned a unique ID name
// and must have a style of 'position:relative;' or 'position:absolute;'
// The 'Message <DIV>s' are forced to 'position:absolute;' during initialisation.
//
// ***** Defining the Color Gradients
//
// The color gradients for each 'Message DIV>' are defined in an array
// There must be a field for each 'Message <DIV>'
// Each field defines the color gradient for each message in a similar format to my 'Color Gradient' Script.
// field 0 = the number of gradient steps (digits)
// field 1 = an array defining the initial & finish text colors (array or null if not required)
// field 0 = the HEX value of the initial text color (string HEX value)
// field 1 = the HEX value of the finish text color (string HEX value)
// field 2 = an array defining the initial & finish background colors (array or omit if not required)
// field 0 = the HEX value of the initial background color (string HEX value)
// field 1 = the HEX value of the finish background color (string HEX value)
// field 3 = (optional) the delay before reversing the effect (one cycle) (digits)
//
// ***** Initialising the Script
//
// The Effect may be initialised from any event.
// e.g.
// <body onload="zxcCycleColors('Tst1',ColCngAry);">
// where:
// parameter 0 = the 'Parent <DIV>' object or unique ID name. (object or string)
// parameter 1 = the array defining the 'Message <DIV>s' gradient requirements. (array variable)
//
// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// These characters may be changed to characters of choice using global find and replace
//
// The Functional Code Part 1 (about 1K) is best as External JavaScripts
//
// Tested with IE6 and Mozilla FireFox
// **** Example 'Message <DIV>s' Gradient Array
var ColCngAry=[];
ColCngAry[0]=[50,['#FFFFCC','#993300'],['#FFFFCC','#FFFFCC'],100];
ColCngAry[1]=[50,['#FFFFCC','#33FFFF'],['#FFFFCC','#FFFFCC'],100];
ColCngAry[2]=[50,['#FFFFCC','#FF3300'],['#FFFFCC','#FFFFCC'],100];
// **** Functional Code - NO NEED to Change
function zxcCycleColors(zxcid,zxcary){
var zxcp=zxcid;
if (typeof(zxcid)=='string'){ zxcp=document.getElementById(zxcid); }
if (!zxcp){ return; }
var zxcitems=zxcp.childNodes;
if (!zxcp.ary){ zxcp.ary=[]; }
for (var zxc0=0;zxc0<zxcitems.length;zxc0++){
if (zxcary[zxc0]){
zxcp.ary.push([zxcitems[zxc0],zxcary[zxc0]]);
zxcitems[zxc0].style.position='absolute';
zxcitems[zxc0].style.color=zxcary[zxc0][1][0];
zxcitems[zxc0].style.backgroundColor=zxcary[zxc0][2][0];
zxcitems[zxc0].style.display='none';
}
}
if (!zxcp.oop){ zxcp.oop=new zxcCycleColorsOOP(zxcp); }
zxcp.oop.cnt=0;
zxcp.oop.rotate();
}
function zxcCycleColorsOOP(zxcp){
this.obj=zxcp;
this.ary=zxcp.ary;
}
zxcCycleColorsOOP.prototype.rotate=function(){
if (this.last){ this.last.style.display='none'; }
this.ary[this.cnt][0].style.display='';
zxcCngColor(this.ary[this.cnt][0],this.ary[this.cnt][1][0],this.ary[this.cnt][1][1],this.ary[this.cnt][1][2],this.ary[this.cnt][1][3],this.obj)
this.lst=this.ary[this.cnt][0];
this.cnt=++this.cnt%this.ary.length;
}
<script language="JavaScript" type="text/javascript">
<!--
// Color Gradient (31-Mar-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// Progessively Change Text or BackGround Color between two colors.
// Application Notes
// The script would normally be activated by a MouseOver event
// e.g.
// <span style="color:#000000;background-color:#FFFFFF"
// onmouseover="zxcCngColor(this,50,'#000000','#FFFFFF','#FFFFFF','#FFFFFF');"
// onmouseout="zxcCngColor(this);"
// > Some Text </span>
// where zxcCngColor(*Object*,*Steps/Speed*,'*Color1*','*Color2*','*BGColor1*','*BGColor1*',*Hold*);" :
// *Object* = the object or unique ID name of the element to change (object or sting)
// *Steps/Speed* = the number of steps to change from the initial to final color (digits)
// '*Color*' = an array defining the initial & finish text colors (array or null if not required)
// field 0 = the HEX value of the initial text color (string HEX value)
// field 1 = the HEX value of the finish text color (string HEX value)
// '*BGColor*' = an array defining the initial & finish background colors (array or omitt if not required)
// field 0 = the HEX value of the initial background color (string HEX value)
// field 1 = the HEX value of the finish background color (string HEX value)
// *Hold* = (optional) the delay before reversing the effect (one cycle) (digits)
//
// The mouseout call zxcCngColor(*Object*); will reverse the color Change
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// These charactors are easily changed to charactors of choise using global find and replace.
// The Functional Code is best as an External JavaScript
// Tested with IE6 and Mozilla FireFox
// Functional Code - No Need to Change
var zxcColCnt=0;
function zxcCngColor(zxcobj,zxcstps,zxccol,zxcbg,zxchld,zxcp){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj.cngcolor){
zxcobj.cngcolor= new zxcOOPCol(zxcobj,zxcstps,zxccol,zxcbg,zxchld,zxcp);
zxcobj.cngcolor.ud=-1
}
clearTimeout(zxcobj.cngcolor.to)
zxcobj.cngcolor.ud=-zxcobj.cngcolor.ud;
zxcobj.cngcolor.changeColor();
}
function zxcOOPCol(zxcobj,zxcstps,zxccol,zxcbg,zxchld,zxcp){
this.obj=zxcobj;
this.ref = 'zxccngcol'+zxcColCnt;
window[this.ref]=this;
this.to=null;
this.cnt=-1;
this.hold=zxchld;
this.p=zxcp;
if (zxccol){ this.colary=new Array(zxcstps); zxcGradientColors(zxccol[0],zxccol[1]||zxccol[0],this.colary); }
if (zxcbg){ this.bgary=new Array(zxcstps); zxcGradientColors(zxcbg[0],zxcbg[1]||zxcbg[0],this.bgary); }
zxcColCnt++;
}
zxcOOPCol.prototype.changeColor=function(){
this.cnt+=this.ud;
if ((this.ud>0&&this.cnt<this.colary.length)||(this.ud<0&&this.cnt>=0)){
if (this.bgary){ this.obj.style.backgroundColor=this.bgary[this.cnt]; }
if (this.colary){ this.obj.style.color=this.colary[this.cnt]; }
this.setTimeOut("changeColor();",100);
}
else {
if (this.hold&&this.ud>0){ this.ud=-this.ud; this.setTimeOut("changeColor();",this.hold); }
else if (this.p){ this.p.oop.rotate(); }
}
}
function zxcGradientColors(zxcc1,zxcc2,zxcary) {
zxclen=zxcary.length;
zxcc1=zxcc1.replace('#',''); zxcc2=zxcc2.replace('#','');
var zxcr=zxcHexToInt(zxcc1.substring(0,2));
var zxcg=zxcHexToInt(zxcc1.substring(2,4));
var zxcb=zxcHexToInt(zxcc1.substring(4,6));
var zxcr2=zxcHexToInt(zxcc2.substring(0,2));
var zxcg2=zxcHexToInt(zxcc2.substring(2,4));
var zxcb2=zxcHexToInt(zxcc2.substring(4,6));
var zxcrstep=Math.round((zxcr2-zxcr)/zxclen);
var zxcgstep=Math.round((zxcg2-zxcg)/zxclen);
var zxcbstep=Math.round((zxcb2-zxcb)/zxclen);
for (zxc0=0;zxc0<zxclen-1;zxc0++){
zxcary[zxc0]="#"+zxcIntToHex(zxcr)+zxcIntToHex(zxcg)+zxcIntToHex(zxcb);
zxcr+=zxcrstep; zxcg+=zxcgstep; zxcb+=zxcbstep;
}
zxcary[zxclen-1]='#'+zxcc2;
}
function zxcIntToHex(zxcn){
if (zxcn>255){ zxcn=255; }
var zxcresult=zxcn.toString(16);
if (zxcresult.length==1){ zxcresult="0"+zxcresult; }
return zxcresult;
}
function zxcHexToInt(zxchex){
return parseInt(zxchex,16);
}
//-->
</script>
</body>
</html>
backwoods
06-11-2006, 11:15 PM
Vic,
Thank You for your response. Your code looks good, but can it be put in endless loop?, and can you use a background instead of a solid color? or a transparent color so that the background shows through.
backwoods
06-11-2006, 11:21 PM
Coothead,
Thank You for your response. Your changes work fine in Firefox, and IE, but in Netscape there is a funky flicker during the transition.