Blinking text (IE and FF) for a specific amount of time

Discussion in 'HTML & Website Design' started by NewComputer, Jul 15, 2005.

  1. #1
    I am trying have some text on a web page blink for about 8 seconds. I have not been able to find something that works in both IE and FF. The <blink> option does not allow for a set time and will not work in IE.

    Is there a javascript alternative?
     
    NewComputer, Jul 15, 2005 IP
  2. envoy

    envoy Active Member

    Messages:
    149
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #2
    Quick search on google took me here. It seems to work fine in IE and FF. You can also look here it shows hwo to making blinking text when the mouse hovers over it.
     
    envoy, Jul 15, 2005 IP
  3. NewComputer

    NewComputer Well-Known Member

    Messages:
    2,021
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    188
    #3
    Thanks Envoy,

    I did have both of those resources, but how do I get it to blink for only 8 seconds on page load?
     
    NewComputer, Jul 15, 2005 IP
  4. envoy

    envoy Active Member

    Messages:
    149
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #4
    I am still looking into that. WHy would you only want it to blink for 8 seconds? Just curious.
     
    envoy, Jul 15, 2005 IP
  5. NewComputer

    NewComputer Well-Known Member

    Messages:
    2,021
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    188
    #5
    That is about how long (more like 4 seconds) the external data takes to load.
     
    NewComputer, Jul 15, 2005 IP
  6. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #6
    This should get you started:

    <head>
    <script type="text/javascript">
    var on = true;
    var maxcnt = 8;
    function blinker()
    {
    var elm = document.getElementById("id1");

    elm.style.backgroundColor = (on = !on) ? "#FEE" : "EEF";

    if(maxcnt--)
    window.setTimeout(blinker, 1000);
    }
    </script>
    </head>

    <body onload="window.setTimeout(blinker, 1000)">
    <p id="id1" style="border: 1px solid #999; padding: 1px 2px; width: 100px;">some text</p>
    </body>

    J.D.
     
    J.D., Jul 15, 2005 IP
  7. NewComputer

    NewComputer Well-Known Member

    Messages:
    2,021
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    188
    #7
    JD,

    Thanks for trying to help, but I could not get that code to work in either browser. I have other js on the page, and it seems like unless I put that code on a 'clean' page, it won't work.
     
    NewComputer, Jul 15, 2005 IP
  8. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #8
    This code works in IE, FF and Opera. If you are saying that this code won't work with other code - you will obviously need to adjust it to be compatible with whatever you have there. Here's the skeleton of what you need for anything timed:

    <script type="text/javascript">
    var on = true;
    var maxcnt = 8;
    function blinker()
    {
    if(maxcnt--)
    window.setTimeout(blinker, 1000);
    }
    </script>
    </head>

    <body onload="window.setTimeout(blinker, 1000)">

    The onload handler sets a timer to call the blinker function in one second after onload was called.

    The blinker function does its work (omitted here for clarity) and then checks how many times it was called (maxcnt). At the same time it decrements the counter by one.

    If the counter is not zero, blinker sets another timer to call itself in another second.

    J.D.
     
    J.D., Jul 15, 2005 IP
    Epica likes this.
  9. NewComputer

    NewComputer Well-Known Member

    Messages:
    2,021
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    188
    #9
    How do I place the code in an external file and have it called correctly?
    Here is how I am calling it: <script type="text/javascript" src="blink.js"></script>
     
    NewComputer, Jul 15, 2005 IP
  10. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Put everything between the <script> tags from the example in the external .js file. Change this line to change colors (there's a typo in the original script - missing '#'):

    elm.style.backgroundColor = (on = !on) ? "#FEE" : "#EEF";

    If you want to blink border, use borderColor instead of backgroundColor. Change this line if you want the text to blink longer:

    var maxcnt = 8;

    In the example, it will be 8 times with a second (1000 is milliseconds) between calls, 8 seconds in total. That's it.

    J.D.
     
    J.D., Jul 15, 2005 IP
  11. NewComputer

    NewComputer Well-Known Member

    Messages:
    2,021
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    188
    #11
    Thanks JD,

    You are the king!
     
    NewComputer, Jul 15, 2005 IP