Need dhtml code to make text glow red from black

Discussion in 'ASP .Net' started by moondaddy, Jul 15, 2004.

  1. moondaddy

    moondaddy Guest

    I have some text in a page that when a certain even happens, I need to make
    it glow from black to red (through a spand of 1 second) pause for a few
    seconds, and then slowly change from red to black over a span of 1 second
    again. Lastly, this needs to be compatible with NS 4 if possible, or if not
    possible, then at least so NS4 doesnt crash or get errors.

    This is to flag a user that something has happened.

    Thanks.

    --
    moondaddy, Jul 15, 2004
    #1
    1. Advertising

  2. Steven Cheng[MSFT], Jul 15, 2004
    #2
    1. Advertising

  3. moondaddy

    moondaddy Guest

    Thanks but that wont do it. I need the text to gradually change from one
    black to red over a period of time, pause a few seconds, and the gradually
    change back again. Here's a lame attempt I made at doing this which should
    give you an idea of what I'm trying to do, but it doesn't work too good.

    also, do you have any good ideas on how to iterate through different shades
    of a color? What I did below seems to be a lot of code for this effect.

    Thanks.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <title>Charmpix</title>
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
    <meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
    <meta content="JavaScript" name="vs_defaultClientScript">
    <meta content="http://schemas.microsoft.com/intellisense/ie5"
    name="vs_targetSchema">
    <LINK href="Styles/Main.css" type="text/css" rel="stylesheet">
    <SCRIPT language="javascript" type="text/javascript">


    var myTimer;
    var myTimer2;
    var counter=1;

    function window_onload()
    {
    //myTimer = setInterval("GoRed()",50);
    }

    function ChangeColor()
    {
    counter=1;
    myTimer = setInterval("GoRed()",150);

    counter=1;
    myTimer = setInterval("GoBlack()",150);

    }

    function GoRed()
    {
    switch (counter)
    {
    case 1:
    form1.Text1.style.background = "black"
    break;
    case 2:
    form1.Text1.style.background = "#4b0000"
    break;
    case 3:
    form1.Text1.style.background = "#5f0000"
    break;
    case 4:
    form1.Text1.style.background = "#730000"
    break;
    case 5:
    form1.Text1.style.background = "#820000"
    break;
    case 6:
    form1.Text1.style.background = "#910000"
    break;
    case 7:
    form1.Text1.style.background = "#910000"
    break;
    case 8:
    form1.Text1.style.background = "#a50000"
    break;
    case 9:
    form1.Text1.style.background = "#b90000"
    break;
    case 10:
    form1.Text1.style.background = "#cd0000"
    break;
    case 11:
    form1.Text1.style.background = "#d70000"
    break;
    case 12:
    form1.Text1.style.background = "#eb0000"
    break;
    case 13:
    form1.Text1.style.background = "#ff0000"
    break;

    }
    counter++;
    form1.Text2.value=counter
    if(counter==14)
    {
    clearInterval(myTimer);
    }
    }


    function GoBlack()
    {
    switch (counter)
    {
    case 1:
    form1.Text1.style.background = "#ff0000"
    break;
    case 2:
    form1.Text1.style.background = "#eb0000"
    break;
    case 3:
    form1.Text1.style.background = "#cd0000"
    break;
    case 4:
    form1.Text1.style.background = "#d70000"
    break;
    case 5:
    form1.Text1.style.background = "#b90000"
    break;
    case 6:
    form1.Text1.style.background = "#a50000"
    break;
    case 7:
    form1.Text1.style.background = "#910000"
    break;
    case 8:
    form1.Text1.style.background = "#910000"
    break;
    case 9:
    form1.Text1.style.background = "#820000"
    break;
    case 10:
    form1.Text1.style.background = "#5f0000"
    break;
    case 11:
    form1.Text1.style.background = "#730000"
    break;
    case 12:
    form1.Text1.style.background = "#4b0000"
    break;
    case 13:
    form1.Text1.style.background = "black"
    break;

    }
    counter++;
    form1.Text2.value=counter
    if(counter==14)
    {
    clearInterval(myTimer);
    }
    }




    </SCRIPT>
    </HEAD>
    <BODY LANGUAGE="JavaScript" onload="return window_onload()">
    &nbsp;
    <FORM name="form1">
    <P><INPUT id="Text3" type="text" name="Text3">
    <br>
    <INPUT id="Text2" type="text" name="Text2">
    <br>
    <INPUT id="btnTest" type="button" value="test" name="btnTest"
    ONCLICK="ChangeColor()"><INPUT id="Text1" type="text" name="Text1"
    style="BACKGROUND-COLOR: black"><br>
    <!-- this is a table just to show us what colors we're working with -->
    <table>
    <tr>
    <td bgColor="black">xxx</td>
    </tr>
    <tr>
    <td bgColor="#4b0000">xxx</td>
    </tr>
    <tr>
    <tr>
    <td bgColor="#5f0000">xxx</td>
    </tr>
    <tr>
    <tr>
    <td bgColor="#730000">xxx</td>
    </tr>
    <tr>
    <tr>
    <tr>
    <td bgColor="#820000">xxx</td>
    </tr>
    <tr>
    <td bgColor="#910000">xxx</td>
    </tr>
    <tr>
    <td bgColor="#910000">xxx</td>
    </tr>
    <tr>
    <td bgColor="#a50000">xxx</td>
    </tr>
    <tr>
    <td bgColor="#b90000">xxx</td>
    </tr>
    <tr>
    <td bgColor="#cd0000">xxx</td>
    </tr>
    <tr>
    <td bgColor="#d70000">xxx</td>
    </tr>
    <tr>
    <td bgColor="#eb0000">xxx</td>
    </tr>
    <tr>
    <td bgColor="#ff0000">xxx</td>
    </tr>
    </table>
    </P>
    </FORM>
    </BODY>
    </HTML>








    --

    "Steven Cheng[MSFT]" <> wrote in message
    news:bZ$y%...
    > Hi Moondaddy,
    >
    > As for the changing text color via javascript for Netscape4 compatibility,
    > here is a tech article may be helpful to you:
    >
    > #Changing Text Color Dynamically in Netscape 4
    > http://webdesign.about.com/cs/dynamichtml/a/aa101199.htm
    >
    > Thanks.
    >
    > Regards,
    >
    > Steven Cheng
    > Microsoft Online Support
    >
    > Get Secure! www.microsoft.com/security
    > (This posting is provided "AS IS", with no warranties, and confers no
    > rights.)
    >
    > Get Preview at ASP.NET whidbey
    > http://msdn.microsoft.com/asp.net/whidbey/default.aspx
    >
    moondaddy, Jul 15, 2004
    #3
  4. Hi Moondaddy,

    After further researching, it seems that we can make use of the rgb()
    javascript function to programmatically generate color value so that change
    the text's color via it. Here is a certain tech artcile discussing on this:

    #Fading in text using JavaScript and the DOM
    http://www.codeproject.com/useritems/jsfadetext.asp

    Regards,

    Steven Cheng
    Microsoft Online Support

    Get Secure! www.microsoft.com/security
    (This posting is provided "AS IS", with no warranties, and confers no
    rights.)

    Get Preview at ASP.NET whidbey
    http://msdn.microsoft.com/asp.net/whidbey/default.aspx
    Steven Cheng[MSFT], Jul 16, 2004
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Thomas

    Red Black Tree!!!

    Thomas, Feb 20, 2004, in forum: C++
    Replies:
    6
    Views:
    6,308
    Claudio Puviani
    Feb 20, 2004
  2. Just Another Victim of the Ambient Morality

    I'm looking for a pythonic red-black tree...

    Just Another Victim of the Ambient Morality, Dec 15, 2006, in forum: Python
    Replies:
    5
    Views:
    354
    Stuart D. Gathman
    Dec 16, 2006
  3. Fei Liu
    Replies:
    11
    Views:
    3,050
    Fei Liu
    Jun 29, 2007
  4. Antoninus Twink

    Left leaning red black trees

    Antoninus Twink, Dec 2, 2009, in forum: C Programming
    Replies:
    10
    Views:
    2,365
  5. pete

    BBC Glow?

    pete, Aug 23, 2010, in forum: Javascript
    Replies:
    11
    Views:
    253
Loading...

Share This Page