WebMess

Just a few days ago, the guys at Mozilla released the first beta version of the incoming Firefox 3.6.

While playing with it, I was wondering, which is the coolest feature introduced in this new release? Well, if you are a user, it should be the full screen support for native HTML5 video. If you are a developer, it may be the new CSS enhancements. But, what if you are a Macbook user?

If you are a Macbook user, it will surely be the detection of the notebook orientation using its integrated accelerometer.

There are a bunch of demo showing this new functionality, they were so exciting I wanted to build one on my own. So, here it is a brand new orientation bookmarklet:

SteerMe

Simply drag and drop the SteerMe button into the bookmarks toolbar of Firefox, or copy its link and manually create a new bookmark. Then, go to a new web page, press the newly created bookmark and begin to rotate your Macbook.

You will see the page still vertical while you rotate the notebook on the left and on the right, you will see it stretched and tightened while you move the keyboard up and down. And you will see the page bounce when, ehm…, you drop your precious notebook!

Tablet-like visualization with Macbook rotated on the left

Stretched page with keyboard upside down

How does it work? This is the bookmarklet code with extra spaces:

1
2
3
4
5
6
7
8
9
10
11
12

window.addEventListener &&
window.addEventListener("MozOrientation", function(e) {
    var h = innerHeight,
        ox = scrollX + innerWidth / 2,
        oy = scrollY + h / 2,
        bs = document.body.style;
    bs.MozTransformOrigin = ox + "px " + oy + "px";
    bs.MozTransform = "rotate(" + (90 * e.x) + "deg) " +
                      "scaleY(" + (e.y + 1) + ") " +
                      "translateY(" + (-h * (e.z + 1)) + "px)";
}, true);
void(0);

As with every bookmarklet, its Javascript code must be as short as possible and tends to be quite obfuscated, but it is very simple. First of all, we will listen to the new MozOrientation event on the window object. Then we will apply a CSS transform to the body of the page using the event orientation data.