JAVA SCRIPT - Displaying a Flash of Color to Signal an Action

Displaying a Flash of Color to Signal an Action

Problem

Based on some action, you want to display a visual cue to signify the success of the action.

Solution

Use a flash to signal the success or failure of an action. While a red flash is standard for signaling either a successful deletion or an error, a yellow flash is typically used to signal a successful update or action:

var fadingObject = {
 yellowColor : function (val) {
 var r="ff"; var g="ff";
 var b=val.toString(16);
 var newval = "#"+r+g+b;
 return newval;
 },
 fade : function (id,start,finish) {
 this.count = this.start = start;
 this.finish = finish;
 this.id = id;
 this.countDown = function() {
 this.count+=30;
 if (this.count >= this.finish) {
 document.getElementById(this.id).style.background=
 "transparent";
 this.countDown=null;
 return;
 }
 document.getElementById(this.id).style.backgroundColor=
 this.yellowColor(this.count);
 setTimeout(this.countDown.bind(this),100);
 }
 }
};
...
// fade page element identified as "one"
fadingObject.fade("one", 0, 300);
fadingObject.countDown();

EXPLAIN

A flash, or fade as it is frequently called, is a quick flash of color. It’s created using a recurring timer that gradually changes the background color of the object being flashed. The color is varied by successively changing the values of the nondominant RGB colors, or colors from a variation of 0 to 255, while holding the dominant color or colors at FF. If, for some reason, the color can’t be perceived (because of color blindness or other factor), the color shows as successions of gray. 

As you progress down the figure, the color gets progressively paler, as the nondominant red and blue values are increased, from initial hexadecimal values of 00 (0) to FF (255). The color yellow used in the solution kept the red and green values static, while changing the blue. A red flash would keep the red color static, while adjusting both the green and blue. In the solution, 

I’m setting the beginning and ending colors for the flash when the application calls the fade method on the object, fadingObject. Thus, if I don’t want to start at pure yellow or end at white, I can begin or end with a paler color. A color flash is used to highlight an action. 

As an example, a red flash can signal the deletion of a table row just before the row is removed from the table. The flash is an additional visual cue, as the table row being deleted helps set the context for the flash. A yellow flash can do the same when a table row is updated. 

A flash can also be used with an alert message. In the following code snippet, I created an alert that displayed a solid color until removed from the page. I could also have used a red flash to highlight the message, and left the background a pale pink at the end: 

function generateAlert(txt) {
 // create new text and div elements and set
 // Aria and class values and id
 var txtNd = document.createTextNode(txt);
 msg = document.createElement("div");
 msg.setAttribute("role","alert");
 msg.setAttribute("id","msg");
 // fade
 obj.fade("msg", 0, 127);
 obj.redFlash();
 msg.setAttribute("class","alert");
 // append text to div, div to document
 msg.appendChild(txtNd);
 document.body.appendChild(msg);
}

The only requirement for the solution would be to either make the color-fade effect more generic, for any color, or add a new, specialized redFlash method that does the same as the yellow.

Also note the use of the ARIA alert role in the code snippet. Including an accessible effect ensures all your users will benefit, and as the code demonstrates, it doesn’t add any extra effort.