Page 1 of 4 123 ... LastLast
Results 1 to 10 of 31

Thread: Fade-in Text Issues

  1. #1
    Join Date
    Nov 2005
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Fade-in Text Issues

    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!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2005
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Nov 2005
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>
    

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Nov 2005
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  8. #8
    Join Date
    Dec 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #9
    Join Date
    Nov 2005
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote 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;
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •