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.