Thursday, April 23, 2009

ie6 + position:fixed nugget

Anyone who hates css expressions .. feel free to leave now, and end up doing the same thing in a more convoluted manner in 'regular' javascript. If it eases your conscience any -- I know it does mine -- this css is sourced in a conditional comment just for ie6


#my-fixed-position-element{
    top:expression(Math.max(document.documentElement.scrollTop + (document.getElementsByTagName('html')[0].offsetHeight / 2), 20) + 'px');
}

Wednesday, April 22, 2009

Don't Leave Keyboarders in the Cold

A handy jQuery plugin to make it easier to play nice with the keyboard-centric folks and improve accessibility

This code assumes the definition of a 'keys' object that identifies keycodes by more readable names, such as keys = {space:32, enter:13};


    // make a new plugin that handles click + keypress,
    // assuming that hitting space or enter counts as a 'click'.
    $.fn.klik = function(f){
        return this.bind('click keypress', function(e){
            if(!e.keyCode || e.keyCode == keys.space || e.keyCode == keys.enter){
                return f.call(this, e);
            }
        });
    };

Thursday, April 16, 2009

Close on MouseOut, Except .. Related Target

For a mouseout event, the event target is the thing you're leaving - mousing out of - the event relatedTarget is the thing you're leaving to, or entering.


        jQuery('#something').mouseout(function(e){
            /*
                don't close the subnav if we've moused out -> onto an autocomplete resultset.
            */
            var targ = e.relatedTarget, i = 0;
            //we're only checking the most recent 5 parents (ancestors).
            while(targ && ++i<5){
                //don't close the subnav if we're mousing over an autocomplete list.
                if(targ.className && targ.className.indexOf('ac_results')>-1){
                    return;
                }
                targ = targ.parentNode;
            }
            /**/
           
            //ok, close me..
            $(this).hide();
        });

YUI-Like Javascript Namespaces

I really like the idea of Javascript namespaces for projects that have a lot of javascript (or even a little javascript on a lot of pages). YUI has a really good implementation, so I took a look at how they did theirs and ripped out the namespace creation part so I could use it on any project I wanted without having to include the YUI library.

The biggest benefit to using namespaces is avoidance of collisions. When using namespaces, you can be sure that no 3rd-party library or other coder is overwriting your functions or properties. Also, you can also use a javascript compresser / combiner to combine a lot of JS files into 1 JS file in order to reduce the amount of requests you make to the server. If you use namespaces, you can be sure that when you put all of the JS files together, you won't have any collisions.

To use the code, first put the following code in a globl js file:

if (typeof YourSite == "undefined") {
   var YourSite = {};
}

YourSite.namespace = function() {
    var a = arguments, o = null, i, j, d;
    for (i = 0; i < a.length; i = i + 1) {
        d = a[i].split(".");
        o = window;
        for (j = 0; j < d.length; j = j + 1) {
            o[d[j]] = o[d[j]] || {};
            o = o[d[j]];
        }
    }
    return o;
};

Then for each page or section of your site you can create a namespace:
YourSite.namespace("YourSite.Section1");
Then when creating functions or properties, you can write:

YourSite.Section1.myProperty = "blah";

YourSite.Section1.myFunction = function(){
    alert(YourSite.Section1.myProperty);
}

YourSite.Section1.myFunction();


Wednesday, April 15, 2009

What's the body's height?

Written jQuery-style, but only mildly dependent.

I needed/wanted this code because I was making a modal overlay and wanted the modality to exactly cover the body. The 'modality' is what I've termed the click-proof smoked-glass panel (div).

Note: this is not intended to give you the viewport diemensions, but rather the entire [scrollable] document dimensions.


    // var docSize is declared elsewhere
    $(window).resize(function(){
        var h = $('body')[0];
        docSize = {
            width: h.scrollWidth
            ,height: Math.max(
                $('html')[0].scrollHeight, //webkit
                h.scrollHeight, //ff
                document.documentElement.offsetHeight //ie
            )
        };
    });