Home/ Questions/Q 3852732
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T17:21:39+00:00

I know blinking is not a nice thing. However… I have a long complex

  • 0

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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0