5 Replies Latest reply on Jun 25, 2012 5:38 AM by sola1

Orientation Changes Across Devices

lholmquist May 16, 2012 9:01 AM

Recently i converted a flash application to a web app so it could also run on tablets. My main focus was the iPad, but it also needed to work on other tablets. The other tablet i was testing on was a galaxy tab.

When the app is turned to landscape/portrait i need to run some javascript.

The probelm i ran into was in my orientation change event listener. The Tab's default orientation is landscape(window.orientation == 0) and the iPad's is portrait(window.orientation == 0). Fortunatly the css media queries still work correctly

the solution i came up with was to create a div, that is position:absolute, right after the body tag. when the landscape, i switch to display:none and in portrait it switches to display:block

I'm currently checking the div's display property during the orientation change event to determine if its landscape/portrait, but i needed to use a setTimeout(function(){},1000) to wait for things to load on the Tab.

here is some example code:

@media screen  and (orientation:landscape){

      #orientationMarker
    {
          display:block;
     }
  }

@media screen and (orientation: portrait)
{

   #orientationMarker
    {


        display:none;
    }
}


if(!DetectIpad())
    {
        setTimeout(function()
        {

           if($j("#orientationMarker").css('display') == 'none')
            {
                //this should be portrait
                windowOrientation = 0;


            }
            else
            {
                //this should be landscape
                windowOrientation = 90;
              }
  
            onMyOrientationChange(windowOrientation);
        },1000);
    }
    else
    {
        onMyOrientationChange(windowOrientation);
    }

i'm thinking of removing this and just checking once after the document is ready and have a global variable that will work as an offset.

Has anyone come up with a better way of doing this? I feel like i'm hacking for IE again.

-Luke

1. Re: Orientation Changes Across Devices

kborchers May 16, 2012 5:06 PM (in response to lholmquist)

Could you provide some more information? Why do you need to listen for the orientation change? Maybe a more complete sample of your code would be helpful as well.
Actions

2. Re: Orientation Changes Across Devices

lholmquist May 17, 2012 8:34 AM (in response to kborchers)

A little background: The app is a course for doctors to take to get a discount on there liability insurance. There is a case study section where they need to read the study then answer some questions, the study is in a somewhat small scrollable div. when the user turns to portrait, the study takes up the whole screen and you can swipe to change the case study.

I listen for orientation change because i need to create the full screen case study and apply the iScroll framework stuff to it.

i've changed it up a little from the previous post. instead of checking everytime i do the orientation change, i check at first load and use a global offset variable.

I'm just wondering if there is a better way to do this, or if this is it

here is some more code:

This is the div i use as my marker:

<body onorientationchange="updateOrientation();">
.....
<div id="orientationMarker" style="position: absolute;z-index: -5;"></div>
......

The css:

@media screen and (orientation: portrait)
{

      #orientationMarker
    {
          display:none;
    }
    
}


@media screen  and (orientation:landscape){

     #orientationMarker
    {
          display:block;
    
    }


}

The intial javascript(using jQuery), run after the dom has loaded:

function checkOrientationOffset()
{


    if($j("#orientationMarker").css('display') == 'block')
    {


        //this should be landscape


        if(window.orientation == 0 || window.orientation == 180)
        {
            orientationOffset = 90;
        }


    }
    else
    {
        //this should be portrait
        if(window.orientation == 90 || window.orientation == -90)
        {
            orientationOffset = 90;
        }
      
    }
}

The update orientation javascript

function updateOrientation()
{
  
    var windowOrientation =  window.orientation + orientationOffset;
   

    onMyOrientationChange(windowOrientation);
   

}


function onMyOrientationChange(windowOrientation)
{
    switch(windowOrientation)
    {
        case 0:
        case 180:
            //do portrait stuff
        case 90:
        case -90:
       //do landscape stuff
     }

3. Re: Orientation Changes Across Devices

lholmquist May 17, 2012 7:41 PM (in response to lholmquist)

This article is basically what I'm asking. http://www.fettblog.eu/blog/2012/04/16/robust-(but-hacky)-way-of-portrait/landscape-detection/

Might be helpful to others.
1 of 1 people found this helpful
Actions
4. Re: Orientation Changes Across Devices

jbalunas May 21, 2012 4:42 PM (in response to lholmquist)

Thanks for the link!

Sorry we could not get back to you sooner, we're working on getting M4 released this week.
Actions
5. Re: Orientation Changes Across Devices

sola1 Jun 25, 2012 5:38 AM (in response to lholmquist)

yeah that link i needed too, thank you my friend ..
Actions

Go to original post