5 Replies Latest reply: Jun 25, 2012 5:38 AM by Jasola komin RSS

Orientation Changes Across Devices

lholmquist Newbie

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
    Kris Borchers Newbie

    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.

  • 2. Re: Orientation Changes Across Devices
    lholmquist Newbie

    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 Newbie

    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.

  • 4. Re: Orientation Changes Across Devices
    Jay Balunas Master

    Thanks for the link! 

     

    Sorry we could not get back to you sooner, we're working on getting M4 released this week.

  • 5. Re: Orientation Changes Across Devices
    Jasola komin Newbie

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