O'Reilly logo

JavaScript Cookbook by Shelley Powers

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

14.6. 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. The use of a red flash is standard to signal either a successful deletion, or an error; the use of 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();

Discussion

A flash, or fade as it is frequently called, is a quick flash of color. It’s created using a recurring timer, which 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. Figure 14-4 shows how this color variation works with the color green. If for some reason the green color can’t be perceived (such as this figure being in a paper copy of this book, or because of color blindness), 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, 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 I call 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 with a paler color, or end with a paler color.

Demonstrating how a color flash effect changes

Figure 14-4. Demonstrating how a color flash effect changes

A color flash is used to highlight an action. When used with Ajax, a red flash can single 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 Recipe 14.2, 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");
   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.

Previously, if the color flash hasn’t been considered an accessibility aid, it’s also not considered an accessibility hindrance, either. As I mentioned earlier, it should be paired with some other event or response that provides information about what’s happening. In the code snippet, when the alert message is displayed, it’s done with a flash, but the ARIA alert role is also assigned so that those using a screen reader get notified.

How about other accessibility concerns, though, such as photosensitive epilepsy? Or those with cognitive impairments where page movement or light flickering can disrupt the ability to absorb the page content?

A simple color flash as demonstrated should not result in any negative reaction. It’s a single progressive movement, rather than a recurring flicker, and over quickly. In fact, the WebAIM website—which is focused on accessibility—makes use of a yellow flash in an exceedingly clever and accessible way.

If you access one of the WebAIM articles, such as the one on keyboard accessibility, and click one of the links that takes you to an in-page anchor, the page (once it has scrolled to the anchor location) gives material associated with the anchor a subtle and quick yellow flash to highlight its location.

In the site’s JavaScript, the author of the JavaScript writes:

// This technique is a combination of a technique I used for
// highlighting FAQ's using anchors
// and the ever popular yellow-fade technique used by
// 37 Signals in Basecamp.

// Including this script in a page will automatically do two
// things when the page loads...
// 1. Highlight a target item from the URL (browser address bar)
// if one is present.
// 2. Set up all anchor tags with targets pointing to the current
// page to cause a fade on the target element when clicked.

In other words, when the page is loaded, the author accesses all anchors in the page:

var anchors = document.getElementsByTagName("a");

The author then traverses this array, checking to see if the anchor has a fragment identifier (#):

if (anchors[i].href.indexOf('#')>-1)

If so, then clicking that link also causes the section to highlight:

anchors[i].onclick = function(){Highlight(this.href);return true};

I haven’t seen a flash used for this effect before, and it demonstrates how accessible a flash can be when used for good effect. If you’ve ever clicked an in-page link that goes to a page fragment located toward the bottom of the page, you know how frustrating it can be to find exactly which section is referenced by the link when there is not enough page left to scroll the item to the top.

Now, with the use of page-fragment link highlighting, you can immediately locate the linked section. And since the highlight fades, once the section is located, you don’t have to put up with the colored background, which can impact on the amount of contrast between color of text and color of background.

See Also

Gez Lemon has an excellent article on photosensitive epilepsy at http://juicystudio.com/article/photosensitive-epilepsy.php.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required