Question

document.addEventListener("orientationChanged", updateOrientation);

I am trying to call a function on updateOrientation, but the function is just not called. I am using javascript code for the same.

Can anyone help me with orientationChange using javascript code.

Thanks in advance.

Answer 1

It’s not so easy: I played around it a lot too 🙂

First you might have noticed that some android devices (for example samsung galaxy tab) will be detected as portrait while they are landscape and viceversa. So first you need to build functions to detect the orientation based on screen.width and screen.height if ipad is not detected (ipad will always show the orientation correctly .. I’m not a fun of it anyway).

Then you have to fire the callback function after a while that the orientation change is detected with a timeout to let the whole environment change accordingly to the new orientation.

So here is how I do .. happy to share it 🙂

function orientation_changed ()
{
    if ( is_portrait() )
    {
        //do something
    }
    else if ( is_landscape() )
    {
        // do something else
    }
    clearTimeout(window.t);
    delete window.t;
}

window.t = undefined;
window.onorientationchange = function (event)
{
    window.t = setTimeout('orientation_changed();', 250);
}

function is_landscape()
{
    var uagent = navigator.userAgent.toLowerCase();
    if ( uagent.search('ipad') > -1 )
    {
        var r = ( window.orientation == 90 || window.orientation == -90 );
    }
    else
    {
        var r = ( screen.width > screen.height );
    }
    return r;
}

function is_portrait()
{
    var uagent = navigator.userAgent.toLowerCase();
    if ( uagent.search('ipad') > -1 )
    {
        var r = ( window.orientation == 0 || window.orientation == 180 );
    }
    else
    {
        var r = ( screen.width < screen.height );
    }
    return r;
}