GC

Handling Screen Orientations with xUI

Handling cross device screen orientations with the xUI framework is a breeze. xUI handles all the hard stuff for you all you need to do is register for an event change and react to it, xUI takes care of all the cross-device complexities for you.

x$('body').orientationchange(function() {
    alert('Orientation changed to: '.window.orientation);
});

Above attaches the body to the ‘orientationchange’ event, within in here your free to do what you like to react to the change.

What I have been doing is toggling a css class on the body tag and adjusting fixed width elements in my style sheet where I need to. Of course if you can devise a layout which doesn’t have any fixed width elements and everything is in %’s then you can leave this bit out. Your probably still need to react to the change however if you need to change the width of any full screen images for example. Below changes the css class of the attached element (body) when the orientation changes.

var current_orientation; // Cache orientation.

x$('body').orientationchange(function() {
    var newOrientation;

    switch (window.orientation) // Switch out the windows orientation
    {
        case 0:
        case 180: // Upside down.
            newOrientation = 'portrait';
            break;
        case -90:
        case 90:
            newOrientation = 'landscape';
            break;
    }

    if (current_orientation != newOrientation) // Ensure the new orientation isn't the same as the current.
    {
        x$('body').addClass(newOrientation);
        x$('body').removeClass(current_orientation);

        orientation_str = newOrientation; // Cache current orientation for comparison,
    }
});

The above code will change the class of the ‘body’ tag when the orientation changes from landscape to portrait. Using this you can alter the layout of your application depending on the devices orientation.