SetStyles

Among my favorite snippets: setStyles(). Say we have an html div element, and you have the urge to make it fill up the entire width and height of the screen using only YUI's dom class. Meet setStyles(), use it on your html element to modify more than one of its' styles at once.

var setStyles = function(el, styles) {
    for(var s in styles) {
        YAHOO.util.Dom.setStyle(el, s, styles[s]);
    }
};

So, in practice, if we have a loading icon from http://ajaxload.info/:

setStyles('some_id', {
    'top' : '0px',
    'left': '0px',
    'position' : 'absolute',
    'zIndex' : 100, /* make sure it is on top of everything */
    'width' : YAHOO.util.Dom.getViewportWidth() + 'px',
    'height' : YAHOO.util.Dom.getViewportHeight() + 'px',
    'backgroundImage' : 'url("images/loader.gif")',
    'backgroundPosition' : 'center center',
    'backgroundRepeat' : 'no-repeat',
    'backgroundColor' : '#000'
});

Here is a working example. There you have it. Wonderful