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

Answer 1

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)