ColorFlashing with jQuery Enchant Posted on March 28th, 2008 by Joe Lencioni

When developing web applications, it can be difficult to draw the visitor’s attention to an important element or message. Widgets, buttons, and doodads are always vying for one’s attention. So, if something is very important, what options does a developer have that will effectively and unobtrusively grab the user’s focus? Using jQuery and the still-beta jQuery Enchant, we crafted a simple and effective color flash.

Here’s the JavaScript that makes the magic happen:

jQuery(function() {
   $('.colorFlash').each(function() {
      var color	= this.className.match(/#([0-9a-fA-F]{3}){1,2}/);
      color		= (color != null) ? color[0].toString() : null; // For IE
      $(this).effect('highlight', {color: color}, 3000);
   });
});

And, to use this on a page, simply give your colorflashed element the appropriate classes:

<p class="colorFlash">ColorFlash default color</p>
<p class="colorFlash #ff0000">ColorFlash custom color</p>

This is just another useful tool in our toolbelts that help us easily give visitors important and meaningful visual cues.