Fading text

wtposs · 09-04-2009, 11:00 AM

I fund a nice code for text to appear and fade. But I'd like to trigger this with a button to only play one time. For example, my student will push "SHOW WORD" and the code below will kick in.

Any ideas how to do this? I'm not a programmer, but trying to learn. Thanks.

Here's the code i have:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>tyu</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 
#wrap{ width:500px; padding:1px; border:3px double #99; font-family:arial,helvetica,serif; font-size:20pt; text-align:center; margin:30px auto;} 
#message{ height:1%; color:#930; filter:alpha(opacity=0); opacity:0;} 
</style> 
<script type="text/javascript"> 
/* Code Title: Dissolve Text Author: Raymond Angana Created: August 14, 2008 rangana in dynamicdrive.com/forums This notice must stay intact for legal use */ var txt=['EXAMPLE'], init=0,i=0,k=0,speed=20,el; var loopCount=1; var j=0; function fade(){ init==0?i++:i--; el.filters?el.style.filter='alpha(opacity='+i+')':el.style.opacity=i/100; el.firstChild.nodeValue=txt[k]; if(i==100)init=1; if(i==0) {init=0;k++;j++;} if(k==txt.length)k=0; if (j<loopCount) setTimeout('fade()',speed); } window.onload=function(){ el=document.getElementById('message'); fade(); } 
</script> 
</head> 
<body> 
<div id="wrap"> 
<div id="message">&nbsp;</div> 
</div> 
</body> 
</html>

claire0917 · 09-04-2009, 08:17 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>tyu</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 
#wrap{ width:500px; padding:1px; border:3px double #99; font-family:arial,helvetica,serif; font-size:20pt; text-align:center; margin:30px auto;} 
#message{ height:1%; color:#930; filter:alpha(opacity=0); opacity:0;} 
</style> 
<script type="text/javascript"> 
/* Code Title: Dissolve Text Author: Raymond Angana Created: August 14, 2008 rangana in dynamicdrive.com/forums This notice must stay intact for legal use */ 
var txt=['EXAMPLE'], init=0,i=0,k=0,speed=20,el; 
var loopCount=1; var j=0; 


function fade(){ 
	init==0?i++:i--; 	el.filters?el.style.filter='alpha(opacity='+i+')':el.style.opacity=i/100; 

	el.firstChild.nodeValue=txt[k]; 
	if(i==100)init=1; 
	if(i==0) {
		init=0;
		k++;
		j++;
	} 	if(k==txt.length)k=0; 
	if (j<loopCount) setTimeout('fade()',speed); 
} 

function startFade() { 
	el=document.getElementById('message'); 
	fade(); 
} 
</script> 
</head> 
<body> 
<div id="wrap"> 
<div id="message">&nbsp;</div> 
<input type="button" value="Show" onclick="startFade();">
</div> 
</body> 
</html>

wtposs · 09-05-2009, 07:07 AM

I notice though that after the word fades out, if I click the "SHOW" button over and over, the word incrementally reappears. Is there a way to block that completely? This is part of a spelling quiz in which students see a word briefly and then re-type.

Cabloo · 09-05-2009, 11:47 AM

I'd suggest using jQuery and doing
$('#divIdoftext').stop().fadeTo(0, 400);
where 400 is the time in milliseconds.
Example: http://thecsports.com/
(site I'm doing PHP, HTML, and JS for atm.)
Click one of the links

Edit: The ones on thecsports.com fade in then out. You can view the source if you want to see.

dweebsonduty · 09-23-2009, 03:26 AM

I would have to agree about jquery it is soo much easier than regular javasctipt.

Check out the Jquery Cheat Sheet for more info.

[Removed]

Tomassi · 09-23-2009, 07:35 AM

Mootools is also a javascript library framework with similar functions such as JQuery. Also with graphical options.