Fade-in Text Issues

**mourenia** · 11-29-2005, 09:20 PM

I am new. I am learning. I would appreciate patience. Okay, so what I what to do is simply fade-in four lines of text at different locations on a page. This is what I have written. Not working. Suggestions? I've run out of ideas. I am creating web pages through adobe golive6, writing the source code myself, and previewing them with IE6.

HTML Code:

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<meta name="generator" content="Adobe GoLive 6">
		<title>WCP Home Page</title>

<script language="javascript" type="text/javascript">

var rate = "250";   // change speed

var tnum = "1";
var t = new Array();  
t[1] = "ABOUT US";
t[2] = "SERVICES";
t[3] = "EXPERIENCE";
t[4] = "CONTACT US";

var cnum = "1";
var c = new Array();
c[1] = "Black";
c[2] = "Gray";
c[3] = "Gainsboro";
c[4] = "WhiteSmoke";
c[5] = "White";


function fadein()
{				
	if(tnum < t.length)//if not all the text has been displayed, do the next statement
	{
		if(cnum < c.length-1)//if the text has not faded in completely, do the next statements
		{
			if (document.getElementByID("text"+tnum) != null)
			{
				text_fade=document.getElementById("text"+tnum);
				text_fade.style.color=c[cnum];	                                //write the text with the associated color to the layer 
				text_fade.innerHTML=t[tnum];
				cnum++;
			}
			
		}
		else//if the text is faded in completely, do the next statements
		{	
 			cnum = 1;//reset color counter, prep for next text 
			tnum++;//increase text counter (go to next text)  			
		}
 		setTimeout("fadein()",rate);//speed at which the color of text changes
	}
 	
}
	


</script>
</head>

<body  bgcolor="black">
			
		<div align="center">
			<img src="Index%20Files/blank25.gif" alt="" height="158" width="25" border="0" ><br>
			<img src="Index%20Files/samoa3.gif" alt="" height="211" width="772" border="0"></div>
			
		<style type="text/css">
		<div id="text1" style="absolute:position; left:460px; top:440px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div> 
		<div id="text2" style="absolute:position; left:510px; top:500px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>
		<div id="text3" style="absolute:position; left:560px; top:560px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>
		<div id="text4" style="absolute:position; left:610px; top:620px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>			
		</style>
		
		fadein();
		
</body>

</html>

Thanks!

**jscheuer1** · 11-30-2005, 03:08 AM

Your code is actually pretty good! There were a few novice type errors and two coding no no's that, although they don't stop the script from working, use more resources than needed.

Novice errors:

1 ) Anything inside this:

Code:

<style type="text/css">

</style>

Will be treated as pure style, valid or not, and therefore not displayed.

2 ) A free standing script call like your:

Code:

		fadein();

hanging out all by itself in the body of the page without <script> </script> tags around it is meaningless. Here it is treated as text but, invisible because foreground default and set background are identical, see next.

3 ) When specifying a background color always specify a foreground color:

HTML Code:

<body  bgcolor="black">

The two javascript no no's:

1 ) The way you wrote the script, it will keep repeating (if it ever got started) even after it is finished its task. That is because at the end of each run, a time out is set to run it again. It is only when it gets back to the top that (if it is finished its work) it sees that there is nothing to do and yet, it will still set another time out, running on and on doing nothing.

2 ) Since 'text_fade' is a variable, it should be declared as such, otherwise its scope will be global (best case) or it may get confused by the script parser as an object, in which case nothing will happen.

There are other ways to tighten up this code and its markup but, with these changes, it runs well in IE, FF and Opera (image sources changed just because I don't like to look at x's when I am debugging code):

Code:

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<meta name="generator" content="Adobe GoLive 6">
		<title>WCP Home Page</title>

<script type="text/javascript">

var rate = "250";   // change speed

var tnum = "1";
var t = new Array();  
t[1] = "ABOUT US";
t[2] = "SERVICES";
t[3] = "EXPERIENCE";
t[4] = "CONTACT US";

var cnum = "1";
var c = new Array();
c[1] = "Black";
c[2] = "Gray";
c[3] = "Gainsboro";
c[4] = "WhiteSmoke";
c[5] = "White";


function fadein()
{				


		if(cnum < c.length-1)//if the text has not faded in completely, do the next statements
		{
			if (document.getElementById("text"+tnum) != null)
			{
				var text_fade=document.getElementById("text"+tnum);
				text_fade.style.color=c[cnum];	                                //write the text with the associated color to the layer 
				text_fade.innerHTML=t[tnum];
				cnum++;
			}
			
		}
		else//if the text is faded in completely, do the next statements
		{	
 			cnum = 1;//reset color counter, prep for next text 
			tnum++;//increase text counter (go to next text)  			
		}
		if(tnum < t.length)//if not all the text has been displayed, do the next run through
 		setTimeout("fadein()",rate);//speed at which the color of text changes

 	
}
	
onload=fadein;


</script>
</head>

<body  bgcolor="black" text="white">
			
		<div align="center">
			<img src="spacer.gif" alt="" height="158" width="25" border="0" ><br>
			<img src="spacer.gif" alt="" height="211" width="772" border="0"></div>
			

		<div id="text1" style="absolute:position; left:460px; top:440px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div> 
		<div id="text2" style="absolute:position; left:510px; top:500px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>
		<div id="text3" style="absolute:position; left:560px; top:560px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>
		<div id="text4" style="absolute:position; left:610px; top:620px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>			

		
		
</body>

</html>

**mourenia** · 11-30-2005, 10:50 PM

Thanks for all your help. It's working perfectly. Your tips were helpful as well. Working now on a smoother transition. It's a little choppy using only a few colors for the fade in. Looking into using an rgb loop. A bit confusing. Suggestions?

Thanks!
Wren

**jscheuer1** · 11-30-2005, 11:19 PM

I actually worked on this a bit, it seemed interesting. I'm still not 100% satisfied with it (I'd like to make it a little more efficient and deal with the optional 'continuous effect' code differently) but, I used a hex color values in the existing loop:

Code:

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>WCP Home Page</title>
<style type="text/css">

#text1, #text2, #text3, #text4 {
 position: absolute;
 left: 360px;
 top: 340px;
 width: 250px;
 height: 50px;
 font-family: arial, sans-serif;
 font-size: 18pt;
 font-weight: bold;
}
 
#text2 {
 left: 410px;
 top: 400px;
}
 
#text3 {
 left: 460px;
 top: 460px;
}
 
#text4 {
 left: 510px;
 top: 520px;
}
</style>


<script type="text/javascript">

var rate = 65;   // change speed
var repeat = 0; // set to 1 for continuous, 0 for once only
var t = 4; //set t to number of texts

///////////////////Stop Editing////////////////

var tnum = 1, cnum = 0;

if(document.getElementById){
var i=t
document.write('<style type="text/css">')
while (i>1){ 
document.write('#text'+i+',')
i--
}
document.write('#text1 { color: black; }<\/style>')
onload=fadein;
}

function fadein() {
if (!document.getElementById("text"+tnum))
return;
if(cnum < 16) { //if the text has not faded in completely, do the next statements
document.getElementById("text"+tnum).style.color='#'+cnum.toString(16)+'0'+cnum.toString(16)+'0'+cnum.toString(16)+'0' //display the text with the associated color
cnum++;	
}
else { //if the text is faded in completely, do the next statements	
	cnum = 0; //reset color counter, prep for next text 
	tnum++; //increase text counter (go to next text)  			
}
if(tnum <= t)//if not all the text has been displayed, do the next run through
setTimeout("fadein()",rate);//speed at which the color of text changes 	
else if(repeat){
tnum=1
var i=t
while (i){ 
document.getElementById('text'+i).style.color='black'
i--
}
fadein();
}
}
	

</script>
</head>

<body  bgcolor="black" text="white">
<div align="center">
<img src="spacer.gif" alt="" height="158" width="25" border="0" ><br>
<img src="spacer.gif" alt="" height="211" width="772" border="0"></div>
	
<div id="text1">ABOUT US</div> 
<div id="text2">SERVICES</div>
<div id="text3">EXPERIENCE</div>
<div id="text4">CONTACT US</div>		
		
</body>
</html>

**mourenia** · 12-01-2005, 06:30 PM

Thanks! Your code may solve the problems I'm having with my own attempt. I found a dynamicdrive code for fading in text using rgb colors and tweaged it....BUT the first text comes out great, beautiful, the second is real stuttered and the third comes out fast and only part of the time. Take a look. By the way, if I alter someone else's code do I still need to credit the code to them even though I've made a bunch of changes? When does that switch of ownership take place?

HTML Code:

<html>
<head>

<script language="javascript" type="text/javascript">

/***********************************************
* Derived from Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/


var tnum = "1";
var t = new Array();  
t[1] = "ABOUT US";
t[2] = "SERVICES";
t[3] = "EXPERIENCE";
t[4] = "CONTACT US";
var delay=2000;  //delay before next message displays
var totalsteps=30;
var stepdelay=40;  //time of single step
var s_color=new Array(0,0,0);
var e_color=new Array(255,255,255);

function fadein()
{
	if (document.getElementById("text"+tnum) != null)
	{
		var text_fade=document.getElementById("text"+tnum);
		text_fade.style.color="rgb("+s_color[0]+","+s_color[1]+","+s_color[2]+")"  //set start color of text 
		text_fade.innerHTML=t[tnum];
		setcolor(1,15);  //call function setcolor with steps input
	}
}


function setcolor(step)
{
	if(step<=totalsteps)
	{
		document.getElementById("text"+tnum).style.color=getcolor(step);
		step++;
		var fadecounter=setTimeout("setcolor("+step+")",stepdelay);  //set rate for each step
	}
	else  //if colors have reached total steps, clear out previous loop and set to end color
	{
		clearTimeout(fadecounter);
		document.getElementById("text"+tnum).style.color="rgb("+e_color[0]+","+e_color[1]+","+e_color[2]+")";
		tnum++
	}
	if(tnum<t.length)
	{
		setTimeout("fadein()", delay);  //go through fadein again (next text) at the given rate
	}	
}


function getcolor(step)
{	
	var n_color=new Array(3);
	var diff=(s_color[0]-e_color[0]);
	n_color[0]=s_color[0]+(Math.round((Math.abs(diff)/totalsteps))*step);
	return ("rgb("+n_color[0]+", "+n_color[0]+", "+n_color[0]+")");
}


onload=fadein;


</script>
</head>

<body bgcolor="black" text="white">

	<div id="text1" style="position:absolute; left:460px; top:440px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div> 
	<div id="text2" style="position:absolute; left:460px; top:500px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>
	<div id="text3" style="position:absolute; left:460px; top:560px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>
	<div id="text4" style="position:absolute; left:460px; top:620px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>			
		
				
</body>

</html>

**jscheuer1** · 12-01-2005, 10:08 PM

Your code is looping too much. Change the function setcolor() to:

Code:

function setcolor(step)
{
	if(step<=totalsteps)
	{
		document.getElementById("text"+tnum).style.color=getcolor(step);
		step++;
		setTimeout("setcolor("+step+")",stepdelay);  //set rate for each step
		return;
	}
	else  //if colors have reached total steps, clear out previous loop and set to end color
	{
		document.getElementById("text"+tnum).style.color="rgb("+e_color[0]+","+e_color[1]+","+e_color[2]+")";
		tnum++
	}
	if(tnum<t.length)
	{
		setTimeout("fadein()", delay);  //go through fadein again (next text) at the given rate
	}	
}

The var 'fadecounter' and its clearTimeout call weren't doing anything, so I got rid of them.

**mourenia** · 12-02-2005, 02:21 AM

Works great now. Thanks for all your help!
-Wren

**gribouille** · 12-06-2005, 02:43 PM

Hi,

I'm very interested in this code.

I'm a french newbie, and I need a similar code with a customizable delay between the displayed texts.
In other words I want the delay to be shorter during the display, and the text to become smaller....

Does anyone know how to do ?
Thanks

**mourenia** · 12-06-2005, 05:52 PM

The variable "delay" is the time between each text. Just decrease to make the next text appear faster. If you want the actually fade in to happen faster then you can change the variable "stepdelay" which is the length of a single step (or color) . As for making the text smaller....you mean you want the text that fades in to be a different font size? Or do you want the text to get smaller as it fades in.....etc. If you just want to change the size, it's here:

HTML Code:

<div id="text1" style="position:absolute; left:460px; top:440px; width:250px; height: 50px; font-family: Arial;[COLOR=Red]font-size: 18pt[/COLOR]; font-weight: bold"></div>

-Wren

**jscheuer1** · 12-06-2005, 08:00 PM

Originally Posted by mourenia

If you just want to change the size, it's here:

Code:

<div id="text1" style="position:absolute; left:460px; top:440px; width:250px; height: 50px; font-family: Arial;font-size: 18pt; font-weight: bold"></div>

This is not an ideal situation. The style should be in a style sheet and the actual text should be here in the markup, rather than in the configuration for the script. That way, in the case of style, it is more easily edited for all the divisions of this type and in the case of the text, it is still visible to non-javascript enabled browsers. On a minor note the font-family should be lower case and have a default for greater compatibility:

font-family: arial, sans-serif;

Thread: Fade-in Text Issues

Thread Tools

Search Thread

Fade-in Text Issues

Bookmarks

Bookmarks

Posting Permissions