Sometimes a designers finds the need to draw attention to an element on the page, perhaps some new content was dynamically added or made available to the user. There are many tricks to draw a users attention to this new content, but one of my favorites is to flash a light background color. For this purpose,
flashBackgroundColor was added to "/yahoo-ext/dom.js" and a helper function
getBackgroundColor.
Example 1: flashBackgroundColor and getBackgroundColor
flashBackgroundColor: function(node, color) { if (! (node || color)) {return;} var attr = {backgroundColor: {to: color}}, anim = new YAHOO.util.ColorAnim(node, attr), oColor = Dom.getBackgroundColor(node); anim.onComplete.subscribe(function() { setTimeout(function() { var attr = {backgroundColor: {to: oColor}}, anim = new YAHOO.util.ColorAnim(node, attr); anim.animate(); }, 250); }); anim.animate(); }, getBackgroundColor: function(node) { if (! node) {return;} var backgroundColor = Dom.getStyle(node, backgroundColor); if (transparent=== backgroundColor) {return Dom.getBackgroundColor(node.parentNode);} var rgb = backgroundColor.replace(/rgba?\((.*?)\)/,$1).split(,); return String.RGBtoHex(rgb[0], rgb[1], rgb[2]); },
The flashBackgroundColor requires two parameters: the node to animate and the color to animate to. The method first defines the fade in animation and fetches the current background color, so it can be restored later. Properly fetching the current background color required the helper method
getBackgroundColor, because "YAHOO.util.Dom.getStyle" is very accurate, returning
transparent when the background is transparent, instead of a color. When the background is transparent the
getBackgroundColor method iterates up the DOM tree, until it returns the background color of an element with a non-transparent background. Once the a valid background color is found, its
rgb value must be convert to a hexadecimal, requiring the use of the
RBGtoHex method in "native-ext/string.js". Lastly, the
flashBackgroundColor method animates to the provided color and once the
onComplete event fires, it will wait 250ms before animating out to the original background color.