Floresense Resource center: javascript highlighter: blinker and dimmer

About / Contact Home

Support Desk Resource Center Products/Services

javascript highlighter: blinker and dimmer

Posted by: Floresense Team

When an action is performed in an html element through javascript, say dynamically u added a row, you need to highlight the new row for a second for alerting user's attention. And you might get many other reasons as to why you should "color blink" or "color dim" an object.

Very often this is a standard requirement in datagrid like javascript coding. and in html table row and cell objects.

Below are two functions to do this temporary highlighting..

While the blinker method alternates backgroundColor of object for 2 secs, the dimmer method shows a bright color and gradually changes to white in steps giving a color dimmer feel.

Both the methods below preserve the existing backgroundcolor of the object and revert it back after highlighting is done.

function hl_blinker(objID)
{
 var oldBg   = document.getElementById(objID).style.background;
 
 for(i=0; i<=6; i++)
 {
   if (i%2 == 0)
    clr = "#FFFFFF";
   else
  clr = "#FFFFCC";
  
  timeOut = (250+(i*250));
  setTimeout("document.getElementById('"+objID+"').style.background='"+clr+"'",timeOut); 
 }
 
 setTimeout("document.getElementById('"+objID+"').style.background='"+oldBg+"'",(timeOut+100)); 
  
}

function hl_dimmer(objID)
{
    var arrTemp = ["0","1","2","3","4","5","6","7",
    "8","9","A","B","C","D","E","F"];

 var oldBg   = document.getElementById(objID).style.background;
 
 var timeOut;
 for(i=0; i<arrTemp.length; i++)
 {
  clr = "#FFFF"+arrTemp[i]+""+arrTemp[i];
  timeOut = (i*100);
  setTimeout("document.getElementById('"+objID+"').style.background='"+clr+"'",timeOut); 
 }
 
 setTimeout("document.getElementById('"+objID+"').style.background='"+oldBg+"'",(timeOut+100)); 
}

examples:

suppose theres an html table row object with id "row1", and we need to highlight this.

hl_blinker(document.getElementById('row1'));


hl_dimmer(document.getElementById('row1'));