Polyesterhat.js

ziggy quicklook

noreply@blogger.com (Daniel W) — Fri, 14 Nov 2008 16:10:00 +0000

no spiders from mars though

Centering

noreply@blogger.com (Daniel W) — Wed, 02 Jul 2008 05:58:00 +0000

This is Part 2 in my Series on the Living Web.

There are many ways of centering things in a webpage. We'll start with the basics: say we've got a div for some reason:


<div id="blob"></div>

The blob is shown as the cirlce in this diagram:

Now, we must place it somewhere. There are two easy ways to do this:

1. We could float it, and use margins to control it's placement. The css could be:


div#blob {
    float: left;
    width: 151px;
    height: 151px;
    margin-left: 200px;
    margin-top: 200px;
}

2. We could use absolute or relative positioning.


div#blob {
    position: absolute;
    width: 151px;
    height: 151px;
    top: 200px;
    left: 200px;
}

Here is what that would look like positioned absolutely or floated with margins:

Here is an example page showing this in real life.

Please note that if the window is resized, the offsets stay the same; in other words, when you make your browser window really big, the blobs will stay put:

Centering the Blob


div#blob {
    /* we do not float it this time */
    width: 151px;
    height: 151px;
    
    /* the 0 is for top and bottom
      * while the auto gets assigned to either side */
    margin: 0 auto;
}

The margin: 0 auto; method only centers within the parent element. One great use for it would be to center a container div in the browser window. Interestingly, another way to do practically the same thing is:


div#blob {
    position: relative;
    left: 50%;
    top: 15px;
    margin-left: -75px;
}

The other way is using absolute positioning. If you need to keep something, like an overlay in the middle of the window, then take the code above, and change relative to absolute:


div#blob {
    position: absolute;
    left: 50%;
    top: 15px;
    margin-left: -75px;
}

We are telling the blob to align itself to the top left corner of the window; then we make it offset to the left by 50%, halfway across. But then we must do a margin-left of negative half of the width of the blob. In this case our blob is 151px so half is about 75px. Using this method, the blob will always stay in the middle, on top of other elements. Like this:

Remember to account for any padding and borders in the negative margin-left. Now we have a div which is always centered horizontally relative to the browser window.

Here is a real life example.

THE CRUX!

Sometimes you want your overlay to stay relative to the content. An example. Image you have a div with a scrollbar; but instead of a scrollbar, you have a javascript scroller, which controls the scrolling via animations, like the black triangles in this screenshot:

(for the programatical side of these scrollers read my article)

When Javascript places the scroll buttons on the page, it could just position them absolutely where they need to go. This would be fine; however, if the div they need to scroll for is centered to the window, we'll need to figure something else out. If a user stretches the window, this is what happens:

In the above diagram, the scrollers are represented by the little blue rectangle inside of the larger blue rectangle. The faded scroller is the ghost image of where the scroller should end up after a window resize.

So, we must extend the centering method mentioned above which used the absolute positioning and the negative margin. We need to have some logic which will figure out the right margin-left so that our scroller div will always stay relative to the middle of the window or document. Here is a diagram:

Here is the Javascript code I came up with. It's a method called safeCenter; if anyone else has already thought of this, and furthermore named this method something else, too bad.


dw.safeCenter = function(item, region) {
    var halfWidth = Dom.getViewportWidth() / 2;
    var sWidth = cos.stripPx(Dom.getStyle(item, 'width'));
    var sHeight = cos.stripPx(Dom.getStyle(item, 'height'));
    var right = region['right'];

    /* item on right half of window                                                 : or item on left half */
    var marginLeft = ((right-sWidth) > halfWidth) ? ((right-sWidth) - halfWidth) : (0 - (halfWidth - (right-sWidth)));

 var marginalAdjustments = {
     'vert'    : dw.stripPx(Dom.getStyle(item, 'marginBottom')),
     'horz'    : dw.stripPx(Dom.getStyle(item, 'marginRight'))
 };

 dw.setStyles(item, {
     'top'         : (region['bottom'] - sHeight  - marginalAdjustments['vert']) + 'px',
     'marginLeft'  : (Math.floor(marginLeft) - marginalAdjustments['horz']) + 'px'
 });
};

It has some dependancies (some are obvious):


var dw = {};
var Dom = YAHOO.util.Dom;

dw.stripPx = function(str) {
    return parseInt(str.substring(0, str.indexOf('p')));
};


dw.setStyles = function(el, style) {
    for(var i in style) {
        Dom.setStyle(el, i, style[i]);
    }
};

You may not be able to tell by looking, but dw.safeCenter has some odd qualities.

It takes an element as a parameter (item)
It also takes the region of another element, the 2nd param (region)
It checks whether item has margin on bottom or right
It will place the item in the lower right hand corner of the region it's given
Item will be offset from region by marginalAdjustments

Oddly, my favorite line is


    /* item on right half of window                                                 : or item on left half */
    var marginLeft = ((right-sWidth) > halfWidth) ? ((right-sWidth) - halfWidth) : (0 - (halfWidth - (right-sWidth)));

Number one, this is a ternary operator. But also, it's a pretty cool math operation which determines whether to make the margin-left negative or positive. sWidth is the width of the item which the function was given. The reason the second argument is a region is just in case you need to modify the region first (otherwise I would have made the function get the region for you). The type of region I am talking about is YAHOO.util.Dom.getRegion(), which returns a region object.

Here is a live example of safeCentering.

Make sure to look at the examples. As always, let me know if you have any questions about this stuff (or if you find an error).
Enjoy.

XHTML 1.0 Strict

noreply@blogger.com (Daniel W) — Thu, 05 Jun 2008 05:32:00 +0000

Everyone needs to be denied freedom at some point. Here is your chance, with my new XHTML 1.0 Strict template set.

There is a:

Fancy Version (97 kilobytes)
Basic Version (376 bytes)

Now, it is a fact; everyone and their mom has their own strict template.

It would be sin to leave you without the corresponding TextMate snippet:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    
    <title>${1:Title}</title>
    
    ${2:<link rel="stylesheet" href="/css/base/base.css" type="text/css" media="screen" charset="utf-8" />}
    <style type="text/css" media="screen">
    <!--
        body { background-color: #f0f0f0; color: #333; font: 12px 'trebuchet ms', sans-serif; }
        h1 { font: 300% 'trebuchet ms', verdana; }
        a { color: #3875D7; font-size: 14px; }
        a:hover { color: orange; }
        pre { width: 100%; }
    -->
    </style>

    ${3:<script type="text/javascript" src="/js/base/base.js"></script>}
    ${4:<script type="text/javascript">
    <!--
        $0
    //-->
    </script>}
</head>
<body>
    <div id="doc">
        
        <div id="hd">
            <h1>$1</h1>
        </div>
        
        <div id="bd">
            
        </div>
        
        <div id="ft">${5:
            <a href="http://blog.polyesterhat.com">Polyesterhat's Blog</a>
        }</div>
        
    </div>
</body>
</html>

I got this idea from a post by Dustin Diaz. The Basic XHTML Strict template is already built into TextMate; that's where I got it.

CSSStyleRule DOM Object Helpers

noreply@blogger.com (Daniel W) — Tue, 11 Mar 2008 20:13:00 +0000

"Totally PWN CSS with Javascript"

I found this article after realizing that EXT-JS's CSS class really was not what I wanted. There was some problem in the IE's (of course I forget now what it was). I found this guy Patrick Hunlock who writes some awesome code (I would suggest reading the article I linked to, and not stopping there). I like really clean-looking code, sorry Pat; so I cleaned it a bit and minimized it for you all.

Here is the file.
Here is the class api:


var CSS = {
  [CSSStylerule] addCSSRule  : function([selector]),
  [CSSStylerule] getCSSRule  : function([selector]),
  [boolean]      killCSSRule : function([selector])
};

So, when you say:


   var pBold = CSS.addCSSRule('p.bold');

pBold will literally be a CSSStyleRule (as the DOM calls it). Furthermore to modify it:


   pBold.style.fontWeight = 'bold';
   pBold.style.fontSize = '115%';

Hunlock has even more examples on his original post; I also will urge you to Go Forth In Style!

Console dot what?

noreply@blogger.com (Daniel W) — Sat, 16 Feb 2008 20:03:00 +0000

By now we have all began to use console.log. Today, I want to remind you that there is more to Firebug's console function. Here is a list from the documentation. Joe Hewitt has provided us with a treasure chest of web development goodies; but not everyone has firebug. I like to test my scripts on other browsers in parallel with Firefox, and sometimes my console statements stay in the code. Calling console.log will give a fatal error if console is not found, so put this snippet somewhere in your base javascript file:


/*****************************
*
* window.console fix
*
****************************/
window.console = (typeof console == 'undefined') ? {
 log: function(t) { alert(t); },
 info: function() { },
 debug: function() { }
} : console;

From what I have seen, it is the most reliable way to accomplish this. If you use such methods as console.count, simply add that function into my snippet. I got this idea from dustin diaz in this post in his comment to Felix. He said to use:


window.console = console || {
   log: function() { },
   info: function() { },
   debug: function() { }
};

However, this does not work, as it tries to access console before his custom object, giving fatal errors in browsers such as IE 6.

I encourage you to find new ways to let firebug help you, because to become great, you must build on the work of others.

Exciting Frontend Form Validation

noreply@blogger.com (Daniel W) — Thu, 14 Feb 2008 00:31:00 +0000

This is part one in my new series, The Living Web: bringing the boring to life

Here is my idea. When a user enters information into a contact form, or some other form, (like a survey) if they screw up, I want red arrows to fly down and show them what they messed up on. This will happen every time they hit the submit button until they figure out what the crap they are doing wrong.

The design pattern:

The form submit button gets hi-jacked by custom validation methods
Each input is assigned a new red arrow which is hidden from view
User hits submit button
The form submit event is stopped with YAHOO.util.Event.stopEvent(e);
Each input's value is checked against a unique validation method
If they all check out, the form is submitted
If even one input's value is invalid, the red arrow flies down
The input flashes red
A new event is made waiting for focus on the input box
When the new event is fired, the arrow disappears, we assume user will fix problem
The arrow is reset
The new event waiting for focus on that input box must be deleted
The user "fixes" the problem
The user tries submitting the form again

This must work unlimited times in a row.

Here is the code I came up with:


(function(el) {

    /* GLOBAL Variables
     * invalid : will be an array of id's of inputs which did not validate
     * form: will contain name of form i.e. document.formName */
    var invalid, form;
    
    /* these are the properties of our red arrow image */
    var arrowImage = {
        'url' : 'images/arrow.png',
        'width' : 66,
        'height' : 28
    }

    /* inputs is the set of unique validation methods */
    var inputs = {
        'input_1': {
            'message': 'string',
            'validates': function(value) {
                return (value.length > 0);
            }
        },

        'input_2': {
            'message': 'string',
            'validates': function(value) {
                return (value.length > 0);
            }
        },

        'input_3': {
            'message': 'must be an email address',
            'validates': function(value) {
                /* taken from http://www.quirksmode.org/js/mailcheck.html, thankyou! */
                var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                return filter.test(value);
            }
        }
    };

    var validateForm = function(e) {
        
        /* we can't have the form submitting yet */
        Event.stopEvent(e);

        /* reset this array, because each time the
         * user clicks submit, we assume there is
         * nothing wrong */
        invalid = [];
        
        for(var i in inputs) {
            /* save a reference to actual html element */
            inputs[i]['el'] = $(i);
            
            /* clearly, this is the value of the curent input */
            var value = inputs[i]['el']['value'];
            
            /* this is where we test each input's value with that
             * input's specific validation method */
            if(!inputs[i]['validates'](value)) {
                invalid.push(i);
            }
        }
        /* if invalid is empty
         * i.e. it's length is 0,
         * there was nothing wrong,
         * meaning form can be submitted */
        if(invalid.length > 0) {
            
            /* announce is another word meaning
             * red arrows will fly down */
            announceErrors();
        }
        else {
            /* we got the form name in the
             * Event.onAvailable callback earlier (below),
             * so submit the form */
            document.eval(form).submit();
        }
    };

    var announceErrors = function() {
        for(var i = 0; i < invalid.length; i++) {
    
            /* get the id of the input which has the invalid value */
            var input = inputs[invalid[i]];
            var region = Dom.getRegion(input['el']);
            
            /* begin to show the arrow to the user */
            Dom.setStyle(input['arrow'], 'visibility', 'visible');
    
            /* use math to figure out where the arrow should go */
            var slideArrow = new Anim(input['arrow'], {
                'top' : { 'to' : region['top'] - (arrowImage['height'] * 3/4)},
                'left' : { 'to' : region['left'] - arrowImage['width']}
            }, 0.25, YAHOO.util.Easing.bounceOut);
    
            /* when the arrow stops sliding, the input box should flash red */
            slideArrow.onComplete.subscribe(flashInputs, i);
            slideArrow.animate();
    
            /* here is where we make the new
             * event to wait for user's focus
             * please study what is happening here
             * we are saying, when the html element gets focus,
             * call fadeArrow, because the arrow should go away not, 
             * because we assume the user will fix the issue
             * Then we say, when you call fadeArrow, give it some stuff
             * give it an object with two things,
             * 1) the html element itself
             *    (so we can remove it's focus listener)
             * 2) give it the arrow element
             * then the true signifies that that object
             * with the two things should be the scope of
             * fadeArrow, in other words, when fadeArrow gets
             * called, this['arrow'] will be same as saying,
             * input['arrow'] here, whew */
            Event.on(input['el'], 'focus', fadeArrow, {
                'obj': input['el'],
                'arrow': input['arrow']
            }, true);
        }
    };

    var flashInputs = function(e, o, i) {
        
        /* we allow e,o, and i,
         * only because we need to use i,
         * can you figure out why we did not want
         * i to be the scope aka, 'this' ? */
        var id = invalid[i];
        
        var red = new ColorAnim(inputs[id]['el'], {
            'backgroundColor': { 'to' : '#B91309' },
            'color' : {'to' : '#FFF'}
        }, 0.2);
        
        red.onComplete.subscribe(function() {
            var white = new ColorAnim(inputs[id]['el'], {
                'backgroundColor': { 'to' : '#FFF' },
                'color' : {'to' : '#000'}
            }, 0.2);
            white.animate();
        });
        red.animate();
    };
    
    var fadeArrow = function() {
        
        /* input box has recieved focus,
         * recall that 'this' refers to
         * the object with 'obj' and 'arrow'
         * remove that listener */
        Event.removeListener(this['obj'], 'focus', fadeArrow);
        
        var fadeOut = new Anim(this['arrow'], {
            'opacity' : { 'to' : 0 }
        }, 0.5);
        
        fadeOut.onComplete.subscribe(resetArrow, this['arrow'], true);
        fadeOut.animate();
    };

    var resetArrow = function() {
        setStyles(this, {
            'top' : '0px',
            'left': '0px',
            'visibility': 'hidden',
            'opacity' : 1
        });
    };

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

    /* basically the constructor */
    Event.onAvailable(el, function() {

        for(var i in inputs) {
            /* give each input its own arrow element */
            var arrow = document.createElement('div');
            $('doc').appendChild(arrow);
            Dom.addClass(arrow, 'arrow');
            setStyles(arrow, {
                'width': arrowImage['width'] + 'px',
                'height': arrowImage['height'] + 'px',
                'backgroundImage' : 'url(\''+ arrowImage['url'] +'\')'
            });
            inputs[i]['arrow'] = arrow;
        }

        /* note that el is html element id (a string)
         * of the submit button, but we temporarily
         * reference it with form, this save a tiny bit
         * of processing time */
        form = $(el);
        Event.on(form, 'click', validateForm);
        
        /* bubble up the dom tree to find the html form element
         * starting at the submit button */
        while(form.tagName.toUpperCase() != 'FORM') {
            form = form.parentNode;
        }
        /* get name of form */
        form = form['name'];
    });
/* this anonymous function self-invokes itself, and gives itself a string
 * this string becomes el, which is the html element id of the submit button */
}('submit_button'))

A working example. My questions for you:

Why is the whole thing an anonymous function?
If it were not anonymous, what public properties or methods could it offer for interaction with other javascript classes?
What css rules would need to be applied to the arrow, for the class div.arrow?
Do you like the way I got the name of the form in order to call the submit() method, is there a better way?
How could the code be modified to enable multiple forms?
How could the code be modified to allow abstracted validation methods?
What would you have done differently?

Feel free to leave comments answering any or all of my questions for you. Also, if you want, I can explain more of a certain part for you, no matter who you are.

Thank you!

SetStyles

noreply@blogger.com (Daniel W) — Wed, 13 Feb 2008 23:12:00 +0000

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

Cheating at life!

noreply@blogger.com (Daniel W) — Sat, 08 Dec 2007 18:33:00 +0000

I found some amazing websites this afternoon, via stumble upon.

The first is the one which prompted me to post,

cheat sheets

list of helpful web 2 stuff

design patterns

Portable Image Viewer

noreply@blogger.com (Daniel W) — Thu, 18 Oct 2007 05:12:00 +0000

Like I said, I planned to work on some fun applications of the YUI Anywhere idea.

I sat down after school for a minute and decided it would be cool to be able to click a button on my bookmarks bar which would give me a slideshow of all the images on any web page. Then I discovered the yui-loader, which is designed to load the other yui modules, such as the animation utility. The yui-loader is still in beta phase, but it works fine in Firefox.

Here is what I came up with: (working example)


var DW = (typeof DW == 'undefined') ? {} : DW;

/* When someone clicks the bookmark, if the class is already defined, it will display the viewer */
if(typeof DW.imageViewer != 'undefined') {
    DW.imageViewer.show();
} else {
    DW.imageViewer = function() {
        
        var Event;
        var Anim;
        var Dom;
        var Overlay;
        
        var _item;
        var _image;
        var _src;
        var _current;
        var _imageViewer;
        
        var init = function() {
            Event = YAHOO.util.Event;
            Anim = YAHOO.util.Anim;
            Dom = YAHOO.util.Dom;
            Overlay = YAHOO.widget.Overlay;

            _src = Dom.batch(_item, function(o){
                return o.src;
            });

            _current = 0;

            _imageViewer = new Overlay('imageViewer', {
                effect: {effect:YAHOO.widget.ContainerEffect.FADE,duration:0.30},
                zIndex: 90,
                width: Dom.getViewportWidth() + 'px',
                height: Dom.getDocumentHeight() + 'px',
                visible: false,
                x: 0,
                y: 0
            });
            
            setUpHeader();
            setUpBody();
            
            _imageViewer.render(document.body);
            
            setStyles('imageHolder', {
                'width': '100%',
                'textAlign': 'center',
                'marginTop': '10px'
            });
            
            setStyles(_image, {
                'padding': '5px',
                'border': '1px solid #7E7E7E'
            });
            
            setStyles('imageViewer', {
                'textAlign': 'center',
                'backgroundColor': '#000'
            });
            
            Event.on(_image, 'click', linked);
            Event.on(_image, 'mouseover', checkLinked);
            
            setUpButtons();
            putCurrentImage();
            show();
        };

        var setUpHeader = function() {
            
            var closeButton = newEl({
                'el': 'input',
                'id': 'closeButton',
                'type': 'button',
                'value': 'close'
            });
            
            _imageViewer.appendToHeader(closeButton);
            
            var headerButtons = newEl({
                'el': 'div',
                'id': 'headerButtons'
            });
            
            var prevButton = newEl({
                'el': 'input',
                'type': 'button',
                'value': 'previous',
                'id': 'previousButton'
            });
            
            var nextButton = newEl({
                'el': 'input',
                'type': 'button',
                'value': 'next',
                'id': 'nextButton'
            });
            
            headerButtons.appendChild(prevButton);
            headerButtons.appendChild(nextButton);
            
            _imageViewer.appendToHeader(headerButtons);
        };

        var setUpBody = function() {
            var imageHolder = newEl({
                'el': 'div',
                'id': 'imageHolder'
            });
            
            _image = newEl({
                'el': 'img',
                'id': 'currentImage',
                'src': _src[0]
            });
            
            imageHolder.appendChild(_image);
            
            _imageViewer.appendToBody(imageHolder);
        };

        var newEl = function(attrs) {
            var el = document.createElement(attrs.el);
            for(var i in attrs) {
                el[i] = attrs[i];
            };
            return el;
        };

        var setStyles = function(el, style) {
            for(var i in style) {
                Dom.setStyle(el, i, style[i]);
            }
        };

        var setUpButtons = function() {
            var b = ['previousButton', 'nextButton', 'closeButton'];
            Event.on(b[0], 'click', changeImage, {delta: -1});
            Event.on(b[1], 'click', changeImage, {delta: 1});
            Event.on(b[2], 'click', hide);
            
            setStyles(b[2], {
                'position': 'absolute',
                'top': '10px',
                'left': '10px'
            });
            
            setStyles('headerButtons', {
                'marginTop': '10px'
            });
            
            setStyles(b, {
                'color': '#2C2C2C',
                'border': '1px solid #2C2C2C',
                'backgroundColor': '#000',
                'padding': '5px',
                'margin': '5px'
            });
            
            Event.on(b, 'mouseover', function() {
                Dom.setStyle(b, 'color', '#FFF');
                Dom.setStyle(b, 'border', '1px solid #FFF');
            });

            Event.on(b, 'mouseout', function() {
                Dom.setStyle(b, 'color', '#2C2C2C');
                Dom.setStyle(b, 'border', '1px solid #2C2C2C');
            });
        };

        var changeImage = function(e, o) {
            _current += o.delta;

            if(_current < 0) {
                _current = (_src.length - 1);
            }
            else if(_current > (_src.length - 1)) {
                _current = 0;
            }
            putCurrentImage();
        };

        var putCurrentImage = function() {
            var fadeOut = new Anim(_image, {
                opacity: { to: 0 }
            }, 0.25, YAHOO.util.Easing.easeOut);
            fadeOut.onComplete.subscribe(putCurrentImageHelper);
            fadeOut.animate();
        };

        var putCurrentImageHelper = function() {
            _image.src = _src[_current];

            var fadeIn = new Anim(_image, {
                opacity: { to: 1 }
            }, 0.25, YAHOO.util.Easing.easeOut);

            fadeIn.animate();
        };
        
        var flashBack = function() {
            var flashBack = new YAHOO.util.ColorAnim(_image, {
                backgroundColor: { to: '#000'}
            }, 0.30);
            flashBack.animate();
        };
        
        var getPar = function() {
            return Dom.getAncestorByTagName(_item[_current], 'A');
        };
        
        var checkLinked = function() {
            var found = false;
            var par = getPar();
            if(par !== null) {
                for(var i = 0; i < extensionTest.length; i++) {
                    if(extensionTest[i].test(par.href)) {
                        found = true;
                    }
                }
                if(!found) {
                    /* yellow */
                    var flashYellow = new YAHOO.util.ColorAnim(_image, {
                        backgroundColor: { to: '#FAEB31'}
                    }, 0.30);
                    flashYellow.onComplete.subscribe(flashBack);
                    flashYellow.animate();
                }
                else {
                    /* green */
                    var flashGreen = new YAHOO.util.ColorAnim(_image, {
                        backgroundColor: { to: '#54A14E'}
                    }, 0.30);
                    flashGreen.onComplete.subscribe(flashBack);
                    flashGreen.animate();
                }
            }
            else {
                /* blue */
                var flashBlue = new YAHOO.util.ColorAnim(_image, {
                    backgroundColor: { to: '#06e'}
                }, 0.30);
                flashBlue.onComplete.subscribe(flashBack);
                flashBlue.animate();
            }
        };
        
        var extensionTest = [new RegExp('.jpg$', 'i'), new RegExp('.gif$', 'i'), new RegExp('.png$', 'i'), new RegExp('.jpeg$', 'i')];
        
        var linked = function() {
            var found = false;
            var par = getPar();
            if(par !== null) {
                for(var i = 0; i < extensionTest.length; i++) {
                    if(extensionTest[i].test(par.href)) {
                        found = true;
                    }
                }
                if(!found) {
                    window.location = par.href;
                }
                else {
                    _image.src = par.href;
                }
            }
            else {
                /* blue */
                var flashBlue = new YAHOO.util.ColorAnim(_image, {
                    backgroundColor: { to: '#06e'}
                }, 0.30);
                flashBlue.onComplete.subscribe(flashBack);
                flashBlue.animate();
            }
        };

        var stripPx = function(str) {
            return parseInt(str.substring(0, str.indexOf('p')));
        };

        /* resizeImage is not used */
        var resizeImage = function(ratio) {
            var w = stripPx(Dom.getStyle(_item[_current], 'width')) * ratio;
            var h = stripPx(Dom.getStyle(_item[_current], 'height')) * ratio;
            Dom.setStyle(_item[_current], 'width', w + 'px');
            Dom.setStyle(_item[_current], 'height', h + 'px');
        };

        var show = function() {
            Dom.setStyle('imageViewer', 'display', '');
            _imageViewer.show();
        };

        var hide = function() {
            Dom.setStyle('imageViewer', 'display', 'none');
            _imageViewer.hide();
        };

        var loaded = function() {
            _item = YAHOO.util.Dom.getElementsBy(function(){return true;},'img');
            if(_item.length !== 0) {
                init();
            }
        };

        return function() {
            loader = new YAHOO.util.YUILoader();
            loader.require('animation', 'container');
            loader.loadOptional = true;
            loader.insert(loaded);
            
            return {
                show : show,
                hide : hide
            };
        }();
    }();
}

Don't let me hog all the fun! Just drag these links to your bookmarks bar, or make a bookmarks group for "YUI Anywhere"; that may be a wise approach, because I feel that these types of things are going to get very popular.

YUI Loader

DW.imageViewer

Here is a direct link to the bookmark page.

Originally I wanted to only have to click one button, but it turned out to be complicated. Plus, the two buttons provide greater extendability. The first button prepares the loader to load in the scripts that other modules will need. Then, the DW.imageViewer button will simply load itself, nothing more.

In the code, you may notice that all quotes are single quotes or escaped single quotes, this was for when I minified it to make it a link.

DW.imageViewer :
I thought I would list some features:

It sets the mood by fading in a dark screen.
If there are no images on the page, it bluntly does nothing, bluntly.
It allows you next/previous your way through each image on the screen.
When you hover the mouse over the image it will flash one of three colors:
Green, the image was inside of a link
Clicking a green flashing image will load the linked image into the viewer
Yellow: The image links to an external page
Clicking a yellow flashing image will go to that page
Blue: When there is no link, the image will flash blue
To close the viewer, click close in the top left
To reopen it, click the bookmark again.

There you have it.

YUI Anywhere

noreply@blogger.com (Daniel W) — Mon, 15 Oct 2007 14:33:00 +0000

This is among the coolest items I have lately seen. My buddy Mike G. showed it to me, and it was originally posted on phpied.com. Now, you can bring your web2 tool kit with you everywhere.

(function(){
var yui = document.createElement('script');
yui.src='http://yui.yahooapis.com/2.3.1/build/utilities/utilities.js';
yui.type='text/javascript';
document.getElementsByTagName('head')[0].appendChild(yui);
})();

Drag this to your bookmarks bar: YUI Anywhere

The question is... what can we do with this?

The famous example: Make everything draggable:

var all = document.getElementsByTagName('*');

for(var i = 0; i < all.length; i++) {
    new YAHOO.util.DD(all[i]);
}

The point is to run this code in firebug after clicking your new YUI Anywhere button.

I am currently working on a fun example of what can be done with YUI Anywhere.

My Singleton Instance Dom Hijacker

noreply@blogger.com (Daniel W) — Mon, 15 Oct 2007 03:57:00 +0000

var DomHijacker = function(el) {

 var init = function() {
 };

 return function() {

     Event.onAvailable(el, init);

     return {

         /* public functions here */

     };

 }();

}('htmlElementId');

What is so special about this? After all, it looks just like what we are all used to. It uses closure, it uses self invoking functions, and like everything else, it uses the YUI. The only new and cool thing about it is that it is completely self contained. It calls its own init function. Note: A full example of this function is posted here.

The point of the whole thing is that the function will only begin to modify DOM elements after they are ready. Allow me to explain each line:

var DomHijacker = function(el) {

This line simply declares a variable DomHijacker, which will be a function. It takes one parameter, a string called el (element) which is the id of a Dom element on the page.

var init = function() {
};

Within DomHijacker, there is an init function. Init stands for initialize, because this function will run procedures on the Dom element with the id 'el'

return function(){

The function, or 'class' in this case called DomHijacker will return a function. This is called closure. Any objects that are not in this returned function will not be given back so to speak. For instance, you could not try DomHijacker.init() somewhere else. Now, DomHijacker is actually this anonymous function. This function will not be called until someone says DomHijacker(); it will simply be stored in DomHijacker, but not invoked.

Event.onAvailable(el, init);

We will use YUI's event utility to wait for our html element with the id 'el'. You can see how onAvailable works here. When our html element is ready, the init function will be called. Although I do not use it, it is important to note that the keyword 'this' will refer to the Dom element with id 'el' within init after YAHOO.util.Event.onAvailable calls it.

return {
 /* public functions here */
};

Let's just perform another closure. Why not. This is the final closure, and will contain any public functions. For example, within the big brackets, we could say:

hide: function (){
 Dom.setStyle(el, 'display', 'none');
}

This is a public function which uses YAHOO.util.Dom.setStyle to make our Dom element with id 'el' go away. To used it we would say DomHijacker.hide(); The naming convention of my DomHijacker is a little weird, but I will give a better example below. If I was going to 'hijack' a list and turn it into some sort of dynamic menu, I would have called DomHijacker, CustomMenu. Then saying CustomMenu.hide(); would sound a lot more acceptable.

}();

Of course, if we want init to Event.onAvailable(el, init); to get called, we must invoke the anonymous function which we were returning in the first place. Now that code will get run by JavaScript, and YAHOO.util.Event will start waiting on 'el'. This is good. The whole reason that we have to wait on 'el' is because the JavaScript gets started before the rest of the Dom elements are actually... well... Dom elements (in the Dom). If you are still with me, you are freakin' awesome! If not, well, congrats on even reading this far. Feel free to ask questions.

}('htmlElementId');

This is the final line in the function. Remember how on the first line, DomHijacker wanted a string for the 'el' which is the id of the html element? Well, we are self invoking DomHijacker and at the same time passing it that very string. 'htmlElementId' gets squished into the variable we called 'el' and is available all throughout DomHijacker, our 'class'. Remember? This is the id that onAvailable was waiting for.

The whole idea here is that our big class called DomHijacker wants to modify an html element. We cannot do that until that element is in the Dom; which is why we must wait on it; which is why YUI comes in so handy.

Lets add some functionality to our class.
We'll call it customList. First let's get a namespace to work in.

var DanW = {};

This will help keep things clean.

DanW.customList = function(el) {

I want to make that 'better example' I mentioned earlier.

var Event = YAHOO.util.Event;
var Anim = YAHOO.util.Anim;
var Dom = YAHOO.util.Dom;

var _item;

Establish some shortcuts for ease of typing. Also, make a 'private' variable, with the underscore prefixed naming convention called _item. This will be an array of the LI items in the list on the page. They will be references to the actual Dom nodes or elements.

var init = function() {
 _item = Dom.getChildren(el);
 Event.on(_item, 'click', action);
};

This is the init function, in all its glory. All we do is get the items in the list called el, and assign a function, action to their respective clickage.

var action = function() {
 /* keyword this refers to
    the li which was clicked on */
 Dom.setStyle(this, 'color', '#FBB104');

 var attributes = {};

 attributes.fontSize = {
     from: 100,
     to: 200,
     unit: '%'
 };

 var sizeUp = new Anim(
     this,
     attributes,
     0.2,
     YAHOO.util.Easing.easeOutStrong);

 sizeUp.animate();
 Event.purgeElement(this, false, 'click');
};

If you have been with me so far, I should really not need to explain all this. Although I will say that since I only want the items to be clicked once for the animation, I simply removed the click listener after one click. I did this by calling: Event.purgeElement(this, false, 'click');

Here is the entire function: customList, showing the self invokers at the bottom.

var DanW = {};

DanW.customList = function(el) {

 var Event = YAHOO.util.Event;
 var Anim = YAHOO.util.Anim;
 var Dom = YAHOO.util.Dom;

 var _item;

 var init = function() {

     _item = Dom.getChildren(el);

     Event.on(_item, 'click', action);

 };

 var action = function() {
   /* keyword this refers to
      the li which was clicked on */
   Dom.setStyle(this, 'color', '#FBB104');

   var attributes = {};

   attributes.fontSize = {
       from: 100,
       to: 200,
       unit: '%'
   };

   var sizeUp = new Anim(
       this,
       attributes,
       0.2,
       YAHOO.util.Easing.easeOutStrong);
  
   sizeUp.animate();
   Event.purgeElement(this, false, 'click');
};

return function() {

   Event.onAvailable(el, init);

}();

}('customList');

It has been a pleasure explaining this. Feel free to ask questions. A full example of this function is posted here.