Google Font API and Directory

Nobody knows why but Google has always been good for developers. They give things to us, we would never expect from a large corporation, at least not for free. Just look at the javascript tools they released, or Google Analytics. Recently I found something that will again ease the pain of webdeveloping: Google Font API and Directory.

A new website design arriving in your mailbox is always a stressfull moment. Will it be complex, or will it have features you’ll strugle with cross-browser wise. Designers also tend to use pretty fonts, instead of widely available fonts, who do look good, but are a pain to implement in a cross browser way. This is where Google comes in with a helping hand.

The API allows you to load font from Google’s font directory, as well as other providers. First thought on this aren’t too positive, the fonts all seem a bit pixilated, and they doesn’t look very high quality when viewing the demo texts. That aside, they have made it very easy to implement them, all you need to do to laod a font from Google font directory is add a link tag.

<head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
        body {
            font-family: 'Tangerine', serif;
            font-size: 48px;
        }
    </style>
</head>

What the link does is send a request for a stylesheet to google, which in turn renders a stylesheet for the specific browser doing the request. And it’s as ready as it’ll ever be.
More information can be found here

jQuery Event Propagating

For a website I helped building at work I had to make some tabs hanging from to top of the browser viewport. When the mouse hovered over any of these tabs, a content pane slides down. I’ve created a plugin to do this which I’ll maybe write up and post some time. For now I’m going to walk through some of the problems I encountered with event propagation.

The whole contruction is pretty standard: a container div containing all content panels, which are hidden and displayed at appropriet times. followed by an ul for the tabs. These are at the bottom for obvious reasons. To let the panel slide down I used the mouseover() function on the li elements of the tabs. To hide the panel again I used the mouseout() function on the container div, this ensures that the panel does not close when moving the mouse to different tabs or over the content of the selected tab. This is where it went wrong, when moving from tab to tab or our of the tabs into the content panel, the panel closed. After some fiddling and debugging I found our that the .mouseout() event comming from the tab elements propagated to the surrounding container, triggering it’s .mouseout() and thus closing the panel.

Now istead of digging into the API and documentation I stubournly searched for any workaround or fixes, without success I might add. I tried stopping the event manually, and setting event target parameters, but nothing seemed to solve the problem. When the frustration took the upper hand I posted my problem on stackvoerflow.com, and the answer came within minutes (!). The problem lies withing the function I chose, as the jQuery documentation appearently clearly states.

This is the last paragraph of the documentation:

This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times. See the discussion for .mouseenter() for a useful alternative.

So all I had to do was replace the .mouseout() with .mouseleave() and all problems solved.