Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Looking for text fader !

Status
Not open for further replies.
kippie

kippie

Technical User
Nov 8, 2001
158
I'm looking for a text-fade-script which can be used to fade different texts in and out independently from each other. Does anyone know ?

Kippie
 
Sort by date Sort by votes
check dynamicdrive.com DeZiner
Never be afraid to try something new.
Remember that amateurs built the Ark.
Professionals built the Titanic
 
Upvote 0 Downvote
At dynamicdrive.com I can find only a scrolling fading text by Lefteris but that one has to scroll. I'm looking for a textfader using fixed positions of different texts fading.
Kippie
 
Upvote 0 Downvote
I got this from dynamic drive a while ago. I can't find it there anymore but it was still on my computer.
Rick

<!-- THREE STEPS TO INSTALL COLORFUL TEXT FADER:

1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<SCRIPT LANGUAGE=&quot;JavaScript&quot;>

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! -->
<!-- Ken Tholke, kentholke@firstsaga.com. -->

<!-- Begin
// add as many or as few messages as you would like
var msg=new Array()
msg[0]=&quot;<CENTER>You can see more scripts like this one...</CENTER>&quot;;
msg[1]=&quot;<CENTER>...when you visit the JavaScript Source.</CENTER>&quot;;
msg[2]=&quot;<CENTER>Just type in \&quot;<A href='msg[3]=&quot;<CENTER>Your computer can handle the rest.</CENTER>&quot;;

// set your first set of colors. Use as many or as few as you wish.
var colors1=new Array(&quot;ffffff&quot;, &quot;eeeeff&quot;, &quot;ddddff&quot;, &quot;ccccff&quot;, &quot;bbbbff&quot;, &quot;aaaaff&quot;, &quot;9999ff&quot;,
&quot;8888ff&quot;, &quot;7777ff&quot;, &quot;6666ff&quot;, &quot;5555ff&quot;, &quot;4444ff&quot;, &quot;3333ff&quot;,&quot;2222ff&quot;, &quot;1111ff&quot;, &quot;0000ff&quot;)

//set your second set of colors
// *** must have exactly the same number of colors as the array above ***
var colors2=new Array(&quot;ffffff&quot;, &quot;ffeeee&quot;, &quot;ffdddd&quot;, &quot;ffcccc&quot;, &quot;ffbbbb&quot;, &quot;ffaaaa&quot;, &quot;ff9999&quot;,
&quot;ff8888&quot;, &quot;ff7777&quot;, &quot;ff6666&quot;, &quot;ff5555&quot;, &quot;ff4444&quot;, &quot;ff3333&quot;, &quot;ff2222&quot;, &quot;ff1111&quot;, &quot;ff0000&quot;)

//set the height of the display in pixels
high=60;

//set the width of the display in pixels
wide=350;

//set the pixel coordinates for the upper left hand corner of the display
Xpos=220;
Ypos=180;

// move the display away from the edges of the background
pad=15;

// set the background color of the display
bgcol=&quot;ffffff&quot;;

//add a background image if you want.
// *** for no image, just leave empty quotes (ex. cellbg=&quot;&quot;; ) ***
cellbg=&quot;faderbg.jpg&quot;;

// set the font
fntFam=&quot;verdana,helvetica,arial&quot;;
fntSize=14;

// set how how many seconds you want the message to stay remain at totality.
pause=2.5;


// Do not edit these values below!!!

icolor=0;
mcolor=1;
imsg=0;
spWidth=wide-(2*pad);
totality=false;
glowing=true;
var theMsg=&quot;&quot;;
var cellcontent=&quot;&quot;;
pause=pause*1000;
if(cellbg.length>4){cellbg=&quot; background=&quot;+cellbg}
else{cellbg=&quot;&quot;;}

function doPause(){
totality=false; t=setTimeout(&quot;changecolor()&quot;,pause);
}
function initiate(){
getContentColor();
getMsg();
getCellContent();
if(document.all){
msgbg.innerHTML=cellcontent;
msgfade.innerHTML=theMsg;
msgbg.style.posLeft=Xpos;
msgbg.style.posTop=Ypos;
msgfade.style.posLeft=Xpos+pad;
msgfade.style.posTop=Ypos+pad;
t=setTimeout(&quot;changecolor()&quot;,50);}
if(document.layers){
document.msgbg.document.write(cellcontent);
document.msgbg.document.close();
document.msgfade.document.write(theMsg);
document.msgfade.document.close();
document.msgbg.left=Xpos;
document.msgbg.top=Ypos;
document.msgfade.left=Xpos+pad;
document.msgfade.top=Ypos+pad;
t=setTimeout(&quot;changecolor()&quot;,100);}
}
function changecolor(){
if(totality==true){doPause();}
else{
getMsg();
getContentColor();
if(document.all){
msgfade.innerHTML=theMsg;
t=setTimeout(&quot;changecolor()&quot;,50);}
if(document.layers){
document.msgfade.document.write(theMsg);
document.msgfade.document.close();
t=setTimeout(&quot;changecolor()&quot;,70);}
}
}
function getFadeColor(){
icolor=icolor-1;
if(mcolor==1){contentcolor=colors1[icolor];}
else{contentcolor=colors2[icolor];}
}
function getGlowColor(){
icolor=icolor+1;
if(mcolor==1){contentcolor=colors1[icolor];}
else{contentcolor=colors2[icolor];}
}
function changemsg(){
if(imsg==msg.length-1){imsg=0; mcolor=1;}
else if(imsg != msg.lenght-1 && mcolor==1){imsg=imsg+1; mcolor=0;}
else{imsg=imsg+1; mcolor=1;}
}
function getContentColor(){
if(icolor==colors1.length-1 && glowing==true){
getFadeColor(); glowing=false; totality=true;}
else if(icolor < colors1.length && glowing==true){
getGlowColor();}
else if(icolor < 1 && glowing==false){changemsg(); getGlowColor(); glowing=true;}
else{getFadeColor();}
}
function getMsg() {
theMsg=&quot;<span style='font-size:&quot;+fntSize+&quot;pt; font-family:&quot;+fntFam+&quot;; width:&quot;+spWidth+&quot;;'>&quot;
theMsg+=&quot;<B><font color=&quot;+contentcolor+&quot;>&quot;+msg[imsg]+&quot;</font></B> &quot;
theMsg+=&quot;</span>&quot;
}
function getCellContent(){
cellcontent=&quot;<TABLE height=&quot;+high+
&quot; width=&quot;+wide+&quot; bgcolor=&quot;+bgcol+&quot; cellpadding=0 cellspacing=0><TR><TD&quot;+cellbg+&quot;> </TD></TR></TABLE>&quot;}
// End -->
</script>

</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->

<BODY onLoad=&quot;initiate()&quot;>

<!-- STEP THREE: Copy this code into the BODY of your HTML document -->

<DIV id=msgbg style=&quot;position: absolute;&quot;></DIV>
<DIV id=msgfade style=&quot;position: absolute;&quot;></DIV>


<p><center>
<font face=&quot;arial, helvetica&quot; size&quot;-2&quot;>Free JavaScripts provided<br>
by <a href=&quot; JavaScript Source</a></font>
</center><p>

<!-- Script Size: 5.17 KB -->
 
Upvote 0 Downvote
This is the best I've seen
Rick

<!-- THREE STEPS TO INSTALL COLORFUL TEXT FADER:

1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<SCRIPT LANGUAGE=&quot;JavaScript&quot;>

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! -->
<!-- Ken Tholke, kentholke@firstsaga.com. -->

<!-- Begin
// add as many or as few messages as you would like
var msg=new Array()
msg[0]=&quot;<CENTER>You can see more scripts like this one...</CENTER>&quot;;
msg[1]=&quot;<CENTER>...when you visit the JavaScript Source.</CENTER>&quot;;
msg[2]=&quot;<CENTER>Just type in \&quot;<A href='msg[3]=&quot;<CENTER>Your computer can handle the rest.</CENTER>&quot;;

// set your first set of colors. Use as many or as few as you wish.
var colors1=new Array(&quot;ffffff&quot;, &quot;eeeeff&quot;, &quot;ddddff&quot;, &quot;ccccff&quot;, &quot;bbbbff&quot;, &quot;aaaaff&quot;, &quot;9999ff&quot;,
&quot;8888ff&quot;, &quot;7777ff&quot;, &quot;6666ff&quot;, &quot;5555ff&quot;, &quot;4444ff&quot;, &quot;3333ff&quot;,&quot;2222ff&quot;, &quot;1111ff&quot;, &quot;0000ff&quot;)

//set your second set of colors
// *** must have exactly the same number of colors as the array above ***
var colors2=new Array(&quot;ffffff&quot;, &quot;ffeeee&quot;, &quot;ffdddd&quot;, &quot;ffcccc&quot;, &quot;ffbbbb&quot;, &quot;ffaaaa&quot;, &quot;ff9999&quot;,
&quot;ff8888&quot;, &quot;ff7777&quot;, &quot;ff6666&quot;, &quot;ff5555&quot;, &quot;ff4444&quot;, &quot;ff3333&quot;, &quot;ff2222&quot;, &quot;ff1111&quot;, &quot;ff0000&quot;)

//set the height of the display in pixels
high=60;

//set the width of the display in pixels
wide=350;

//set the pixel coordinates for the upper left hand corner of the display
Xpos=220;
Ypos=180;

// move the display away from the edges of the background
pad=15;

// set the background color of the display
bgcol=&quot;ffffff&quot;;

//add a background image if you want.
// *** for no image, just leave empty quotes (ex. cellbg=&quot;&quot;; ) ***
cellbg=&quot;faderbg.jpg&quot;;

// set the font
fntFam=&quot;verdana,helvetica,arial&quot;;
fntSize=14;

// set how how many seconds you want the message to stay remain at totality.
pause=2.5;


// Do not edit these values below!!!

icolor=0;
mcolor=1;
imsg=0;
spWidth=wide-(2*pad);
totality=false;
glowing=true;
var theMsg=&quot;&quot;;
var cellcontent=&quot;&quot;;
pause=pause*1000;
if(cellbg.length>4){cellbg=&quot; background=&quot;+cellbg}
else{cellbg=&quot;&quot;;}

function doPause(){
totality=false; t=setTimeout(&quot;changecolor()&quot;,pause);
}
function initiate(){
getContentColor();
getMsg();
getCellContent();
if(document.all){
msgbg.innerHTML=cellcontent;
msgfade.innerHTML=theMsg;
msgbg.style.posLeft=Xpos;
msgbg.style.posTop=Ypos;
msgfade.style.posLeft=Xpos+pad;
msgfade.style.posTop=Ypos+pad;
t=setTimeout(&quot;changecolor()&quot;,50);}
if(document.layers){
document.msgbg.document.write(cellcontent);
document.msgbg.document.close();
document.msgfade.document.write(theMsg);
document.msgfade.document.close();
document.msgbg.left=Xpos;
document.msgbg.top=Ypos;
document.msgfade.left=Xpos+pad;
document.msgfade.top=Ypos+pad;
t=setTimeout(&quot;changecolor()&quot;,100);}
}
function changecolor(){
if(totality==true){doPause();}
else{
getMsg();
getContentColor();
if(document.all){
msgfade.innerHTML=theMsg;
t=setTimeout(&quot;changecolor()&quot;,50);}
if(document.layers){
document.msgfade.document.write(theMsg);
document.msgfade.document.close();
t=setTimeout(&quot;changecolor()&quot;,70);}
}
}
function getFadeColor(){
icolor=icolor-1;
if(mcolor==1){contentcolor=colors1[icolor];}
else{contentcolor=colors2[icolor];}
}
function getGlowColor(){
icolor=icolor+1;
if(mcolor==1){contentcolor=colors1[icolor];}
else{contentcolor=colors2[icolor];}
}
function changemsg(){
if(imsg==msg.length-1){imsg=0; mcolor=1;}
else if(imsg != msg.lenght-1 && mcolor==1){imsg=imsg+1; mcolor=0;}
else{imsg=imsg+1; mcolor=1;}
}
function getContentColor(){
if(icolor==colors1.length-1 && glowing==true){
getFadeColor(); glowing=false; totality=true;}
else if(icolor < colors1.length && glowing==true){
getGlowColor();}
else if(icolor < 1 && glowing==false){changemsg(); getGlowColor(); glowing=true;}
else{getFadeColor();}
}
function getMsg() {
theMsg=&quot;<span style='font-size:&quot;+fntSize+&quot;pt; font-family:&quot;+fntFam+&quot;; width:&quot;+spWidth+&quot;;'>&quot;
theMsg+=&quot;<B><font color=&quot;+contentcolor+&quot;>&quot;+msg[imsg]+&quot;</font></B> &quot;
theMsg+=&quot;</span>&quot;
}
function getCellContent(){
cellcontent=&quot;<TABLE height=&quot;+high+
&quot; width=&quot;+wide+&quot; bgcolor=&quot;+bgcol+&quot; cellpadding=0 cellspacing=0><TR><TD&quot;+cellbg+&quot;> </TD></TR></TABLE>&quot;}
// End -->
</script>

</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->

<BODY onLoad=&quot;initiate()&quot;>

<!-- STEP THREE: Copy this code into the BODY of your HTML document -->

<DIV id=msgbg style=&quot;position: absolute;&quot;></DIV>
<DIV id=msgfade style=&quot;position: absolute;&quot;></DIV>


<p><center>
<font face=&quot;arial, helvetica&quot; size&quot;-2&quot;>Free JavaScripts provided<br>
by <a href=&quot; JavaScript Source</a></font>
</center><p>

<!-- Script Size: 5.17 KB -->
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
198
Alt255
Alt255
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
679
3esolar
3
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
219
jjgupta915
jjgupta915
Camila James
  • Locked
  • Question
Shopify vs. WooCommerce – Which Platform To Use For Your Online Store?
Replies
3
Views
163
lucasbrown
lucasbrown
coldbohemia
  • Locked
  • Question
I'm inserting a text file into a we
Replies
2
Views
162
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top