...

View Full Version : Text fading



Mario
08-10-2006, 07:18 PM
Can someone help modify the code on this page to use two colors that are not black and white?

http://www.javascriptkit.com/dhtmltutors/fadingtext.shtml

I'd like to use the two following colors:

Olive Green: R:153 G:153 B:102
Maroon: R:102 G:51 B:51

Thanks a bunch!

Mario
08-10-2006, 09:39 PM
Here's what I have so far:

</script>

<!-- Fade in script -->

<script type="text/JavaScript">
<!--
hexR=153 // R Initial color value.
hexG=153 // G Initial color value.
hexB=102 // B Initial color value.

function fadetext(){
if(hexR>102) {{ //If color is not maroon yet
hexR-=1; // increase color darkness
}
if(hexG>51) {
hexG-=1; // increase color darkness
}
if(hexB>51) {
hexB-=1; // increase color darkness
}
document.getElementById("p3menu").style.color="rgb("+hexR+","+hexG+","+hexB+")";
setTimeout("fadetext()",20);
}
else
hexR=153 //reset hex value
hexG=153 //reset hex value
hexB=102 //reset hex value
}

function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>

It's called later with the line:

<td colspan="2" bgcolor="#CCCD94" class="style1"><div align="center"><a href="#" class="style1" onClick="MM_showHideLayers('p3menu','','show');MM_callJS('fadetext()')">LA JOLLA</a> </div></td>


I'm sure it's a syntax thing. I'm just not up on my JavaScript. Thanks again for pointing me in the right direction.

vwphillips
08-10-2006, 10:14 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
<!-- Fade in script -->

hexR=153 // R Initial color value.
hexG=153 // G Initial color value.
hexB=102 // B Initial color value.

function fadetext(){
if(hexR>102) {{ //If color is not maroon yet
hexR-=1; // increase color darkness
}
if(hexG>51) {
hexG-=1; // increase color darkness
}
if(hexB>51) {
hexB-=1; // increase color darkness
}
document.getElementById("p3menu").style.color="rgb("+hexR+","+hexG+","+hexB+")";
setTimeout("fadetext()",20);
}
else
hexR=153 //reset hex value
hexG=153 //reset hex value
hexB=102 //reset hex value
}

function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>

</head>

<body >
It's called later with the line:
<div id="p3menu">qwerty QWERTY</div>
<a href="#" class="style1" onClick="fadetext(); return false;">LA JOLLA</a>




</html>

also
http://www.vicsjavascripts.org.uk/OpacityGradient/Gradient.htm

Phill
08-11-2006, 12:56 PM
also
http://www.vicsjavascripts.org.uk/OpacityGradient/Gradient.htm

I just use this:

http://www.soxiam.com/Code/JavascriptFadeAnything

Mario
08-14-2006, 07:48 PM
Thanks to everyone, but unfortunately nothing is working so far. Perhaps I should elaborate on what I'm trying to do:

I have an invisible layer (p3menu). When I click on one of the menu links, let's call it LA JOLLA, the layer becomes visible. What I want to happen when that layer becomes visible is that the text in the layer fades from the background color (#979761) to the intended text color (#663333). Phill, yours works but changes the backgorund not the text color and I cannot seem to call it when the text layer becomes visible. I can call it when the page loads, but sice the layer is initally invisble, it never gets seen.

I hope someone can help. Thanks again.

Sorry, vwphillips. Nothing happened with the modified code you gave me. Thanks though.

vwphillips
08-14-2006, 09:01 PM
testing with IE6 and Moz FF, qwerty QWERTY turns from black to a horid green

hence the link

Mario
08-22-2006, 05:29 PM
Okay, I've played around a little and this is what I've come up with. It will work; however, I can't figure out why it's looping. It looks to me like it should only cycle through the color change once. Any of you smart people have any insight? Thanks again for all the help.


Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript1.2">
hex=979761 // Initial color value.
hex2=663333 // End color value.

function fadetext(){
if(hex>hex2) { //If color is not black yet
hex-=111; // increase color darkness
newhex="#"+hex
document.getElementById("sample").style.color=newhex;
setTimeout("fadetext()",15);
}
else if(hex<=hex2){
hex=hex2; //reset hex value
}
}

</script>

<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
-->
</style></head>

<body>
<div id="sample" style="width:100%"><strong>John slowly faded into view</strong></div>
<button onClick="fadetext()">Fade Text</button>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum