flash text for three seconds

Question

I know blinking is not a nice thing. However...

I have a long complex HTML form with a number of compulsory fields. As well as highlighting the empty text boxes I want to draw attention to them by flashing the text of the question for maybe three seconds.

All the javascript/css methods I can find all seem to fall over when there is more than one such item to blink or are designed for leaving the item blinking all the time.

Any suggestions for how to achieve this?

The method at What is the replacement for a blinking text in a web page? seems like overkill.

thanks

Derek

I've tried this (to blink each designated span just over three seconds) but it only works on the first item it's called for:

function blinkOn(span){
    span.counter=0;
    span.defColor=span.style.color;
    span.alertTimerId =setInterval("blinkOnce('"+span.id+"')", 400 );
}

function blinkOnce(spanID){
    var span=document.getElementById(spanID)
    span.counter++;
    if(span.style.color==span.defColor){
        span.style.color='transparent'}
     else{
        span.style.color=span.defColor;
     }
    if(span.counter>8){
        blinkOff(span);
    }   
}

function blinkOff(span){
   clearInterval(span.alertTimerId);    
   span.style.color=span.defColor;
}

Do you want the text to animate continuously between 1 and 0 during this time, or do you wish another approach? Either way, I think you're always better of avoiding such fireworks. — Alexander Wallin, Feb 02 '11 at 17:09

score 12 · Answer 1 · edited Feb 02 '11 at 17:15

I use jQuery for this kind of thing, personally:

$('#element_id')
    .fadeOut(300)
    .fadeIn(300)
    .fadeOut(300)
    .fadeIn(300)
    .fadeOut(300)
    .fadeIn(300)
    .fadeOut(300)
    .fadeIn(300)
    .fadeOut(300)
    .fadeIn(300);

Quite inelegant I know but it does the job. jQuery UI does have some more concise effects.

The only place I use it is for when a user adds something to a shopping basket without redirecting to the basket page, just to make sure they know that it's been added.

See: http://api.jquery.com/fadeIn/, http://api.jquery.com/fadeOut/ and http://jqueryui.com/docs/show/ (pulsate, in particular)

Inelegant, gross, yep! But then, so are blinking elements on a web page :-) — , Feb 02 '11 at 17:15

Ben Jakuben · Accepted Answer · 2011-02-03T14:31:28.123

I'm not exactly clear about the behavior you desire, but it sounds like you might be able to flash the question (or take some kind of action) using a Javascript timer. You can create unique timers for each element that you want to flash. And you can flash them once or set them up to repeat infinitely or up to a limit. Here's one example: http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

I took some time to work this out this morning. If you haven't gotten yours to work yet, I hope you can adapt this to help.

<html>
  <head>
    <script type="text/javascript">
      var idArray = [];
      var defaultColor = '#000000';

      function makeItemsBlink(blinkTime) {
        blinkForTime('q1', blinkTime, '#ff0000');
        blinkForTime('q2', blinkTime, '#00ff00');
        blinkForTime('q3', blinkTime, '#0000ff');
      }

      function blinkForTime(id, blinkTime, blinkColor) {
        idArray[id] = setInterval('toggleColor("' + id + '", "' + blinkColor + '")', 400);
        setTimeout('stopBlinking("' + id + '")', blinkTime);
      }

      function stopBlinking(id) {
        clearInterval(idArray[id]);
        document.getElementById(id).style.color = defaultColor;
      }

      function toggleColor(id, blinkColor) {
        var e = document.getElementById(id);
        var currentColor = e.style.color;
        if (currentColor == defaultColor) {
          e.style.color = blinkColor;
        }
        else {
          e.style.color = defaultColor;
        }
      }
    </script>
  </head>
  <body onload="makeItemsBlink(3000);">
    <div id="q1">Test question 1</div>
    <div id="q2">Test question 2</div>
    <div id="q3">Test question 3</div>
  </body>
</html>

I've added my test code based on this to my question. Thanks for the pointer. — derekcohen, Feb 02 '11 at 18:02
`if (currentColor == defaultColor)` is always not equal because `e.style.color` will change to `rgb(0,0,0)` format after it is set. — jdleung, Aug 15 '21 at 06:16

flash text for three seconds

2 Answers2