Web Analytics Made Easy -
StatCounter Text To Blink Then Be Replaced With Different Text - CodingForum

Announcement

Collapse
No announcement yet.

Text To Blink Then Be Replaced With Different Text

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Text To Blink Then Be Replaced With Different Text

    Hi - how would I get some text to blink for 5 seconds then be replaced with some more text? The old <blink> tags have been removed from HTML.

    I have a <div> with the following:

    <div class="show5seconds">ONE MOMENT PLEASE....THIS IS BLINKING TEXT</div>

    Then another <div> with more text

    <div class="replacewithme">replacement text after 5 seconds</div>

    Thanks
    Alex

  • #2
    You might use CSS animations to make the text blink. Make the blinking based on a class. Then use Javascript function setTimeout to stop the blinking by removing the class and replacing the text.

    Comment


    • #3
      The <blink> tag was removed because the browser companies couldn't afford all the hospital bills and court costs that blinking text was going to result in.

      If you have a few billion dollars you want to distribute to epileptics then by all means put them all in hospital by having your text blink.
      Stephen
      Learn Modern JavaScript - http://javascriptexample.net/
      Helping others to solve their computer problem at http://www.felgall.com/

      Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

      Comment


      • #4
        While a bit blunt (coming from me that's saying something) @Felgall has it right. Whilst sure, you COULD use CSS or JS to do this, you have to ask SHOULD you?

        Or more importantly, WHY was BLINK never accepted into HTML. TECHNICALLY it was NEVER part of any official specification and was rejected for adoption for a reason.

        Felgall just hitting the tip of the liability iceberg. Even non-epileptics found it annoying, distracting, and generally pissed them off... and seriously, AVOID pissing off users!

        Same reason that MARQUEE was never officially a HTML tag, the goofy animated crap was pissing users off. Same reason "target" went the way of the dodo in non-frameset documents, since target="_blank" shoves a new window or tab down the user's throat whether they want it or not, PISSING USERS OFF!

        ... so in that way implementing something like this via JavaScript or CSS runs the same risk as the fools who when told "stop using target" replicated it using scripting. COMPLETELY MISSING THE POINT OF WHY it was axed; or as it is in the case of MARQUEE and BLINK, why they were NEVER officially part of the HTML specification.

        You might as well go back to filling the page with animated GIF's if you're gonna go that route.

        Far too often the question is "can I" or "how" without asking "should I" or "why not?" -- particularly when we've been told REPEATEDLY to stop doing things like making blinking or constantly auto-scrolling elements, or shoving new windows down user's throats. For what's rapidly closing on two decades now we've been told to CUT IT OUT!!!

        But IF you insist on pissing on accessibility and usability from orbit, try the CSS route and try to make a plan so that the page is still useful and not confusing to non-sighted or visually impaired users as well. You know, the reason HTML even exists?
        Walk the dark path, sleep with angels, call the past for help.
        https://cutcodedown.com
        https://medium.com/@deathshadow

        Comment


        • #5
          Well, er, thanks for the "opinions", but if someone could help with the coding of this part:

          Originally posted by Sempervivum View Post
          You might use CSS animations to make the text blink. Make the blinking based on a class. Then use Javascript function setTimeout to stop the blinking by removing the class and replacing the text.
          ... I would be most appreciative.

          Thank you

          Comment


          • #6
            Or even on second thoughts not with the blink, but how I would display text in a <div> for 5 seconds, then replace it with some more text.

            Comment


            • #7
              Hi there alic,

              here is one possible solution...

              Code:
              [color=navy]
              <!DOCTYPE html>
              <html lang="en">
              <head>
              
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
              
              <title>untitled document</title>
              
              <!--<link rel="stylesheet" href="screen.css" media="screen">-->
              
              <style media="screen">
              div::before {
                  content: 'Lorem ipsum dolor sit amet';
                  position: absolute;
                  animation: change1 5s forwards;
               }
              div::after {
                  content: 'Donec vehicula diam non leo';
                  position: absolute;
                  animation: change2 5s forwards;
               }
              @keyframes change1 {
                  0%    {left: 0.5em;}
                  99.9% {left: 0.5em;}
                  100%  {left: -999em;}
               }
              @keyframes change2 {
                  0%    {left: -999em}
                  99.9% {left: -999em}
                  100%  {left: 0.5em;}
               }
              </style>
              
              </head>
              <body> 
               <div></div>
              </body>
              </html>[/color]

              coothead
              ~ the original bald headed old fart ~

              Comment

              Working...
              X