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 ..