Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Text fading

  1. #1
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Text fading

    Can someone help modify the code on this page to use two colors that are not black and white?

    http://www.javascriptkit.com/dhtmltu...dingtext.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!

  • #2
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Code:
    <!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/Op...t/Gradient.htm
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New Coder
    Join Date
    Aug 2006
    Location
    UK
    Posts
    53
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #5
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    testing with IE6 and Moz FF, qwerty QWERTY turns from black to a horid green

    hence the link
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>


  •  

    Posting Permissions

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