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);
            }
        });
    };

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();

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
            )
        };
    });

'Dynamic' Image Headers

Sure, sifr is probably the way to go. Unless it's not. Or the client says no.

Prerequisite: A text file listing all the headers to be made.

So, first off, I tried ImageMagick. It worked like a charm for OPAQUE gifs. Then stirred in some fancy masking stuff to clear out all white pixels. Now I had very nice 22pt headers. But the small headers looked miserable. 13pt looked just fine, but 12pt looked terrible. And it had to be 12pt. I tried smoothing commands to no avail.

So I decided to create one tall image with all the headers by just pasting the text file into fireworks and saving as png8 with transparency. That way, they *look* perfect. And I wrote a processing script, or "sketch" to create all the headers from the master headerlist-image.

Processing Code Snippet

String[] headlineStrings = {
"HOME",
"ABOUT US",
"ETCETERA",
"THESE ARE NOT THE HEADERS I WAS GIVEN",
"THE LIST WAS 168 HEADERS"
};

int LARGE = 1;
int SMALL = 2;
int usingSize = LARGE;
String mySize = usingSize == LARGE ? "large" : "small";
String prefix = usingSize == LARGE ? "lrg" : "sm";
int myWidth = usingSize == LARGE ? 391 : 213;
int myHeight = usingSize == LARGE ? 16 : 9;
int myOffsetHeight = usingSize == LARGE ? 22 : 12;

PGraphics pg = createGraphics(myWidth, myHeight, JAVA2D);
PImage a = loadImage("c:\\documents and settings\\dennish\\desktop\\columbia headers\\headers-" + mySize + ".png");
//PFont font = loadFont("DispatchCond-Bold-48.vlw");
//PFont font = createFont("DispatchCond-Bold", 12, true);

//String[] fontList = PFont.list();
//println(fontList);

//size(440, 900);
//fill(0);
smooth();

for(int i = 0; i < headlineStrings.length; i++){
    //textFont(font, 12);
    //text(headlineStrings[i], 0, i*12);
    pg.beginDraw();
    pg.background(0,0);
    pg.image(a, 0, 0 - (i * myOffsetHeight)); //12px because the font-size is 12px, and therefore each line of text will occupy 12px vertically.
    pg.endDraw();
    pg.save("c:\\dev\\headlines\\20090317\\hdr-" + prefix + "-" + headlineStrings[i] + ".png");
    pg.dispose();
}

One last problem: these have to be GIFs, and the only way the technique would work so far is by making them PNGs.

So .. back into fireworks for a batch export. Final gotchya: have to click "edit" next to the filetype export selection dropdown, and make sure the GIF has (alpha) transparency enabled.

LinkMania

I plan to post more links here over time. Linkrot commence!

• Web Design Ledger:
  • tooltips
• Script And Style
• XtraNormal "if you can type, you can make a movie" (maybe useful for storyboarding [real] video shoots?)

Have I just become a tool?

Can you detect font availability?

Speaking of Fonts...

jquery-fontavailable