By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,640 Members | 2,167 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,640 IT Pros & Developers. It's quick & easy.

Orientation change setection only works from Portrait to Landscape

P: 7
I need to detect mobile browser screen orientation change. It's interesting that the following javascript can detect the orientation change from portrait to landscape but not the opposite. Why?

Expand|Select|Wrap|Line Numbers
  1. <script type='text/javascript'>
  2.     detectOrientation();
  3.     window.onorientationchange = detectOrientation;
  4.     function detectOrientation() {
  5.         var panel2CleinetID = '<%= Panel2.ClientID %>';
  6.         var panel2 = document.getElementById(panel2CleinetID);
  7.         var panel3CleinetID = '<%= Panel3.ClientID %>';
  8.         var panel3 = document.getElementById(panel3CleinetID);
  9.  
  10.         //if (typeof window.onorientationchange != 'undefined') {
  11.         if (window.orientation) {
  12.             if (orientation == 0) {
  13.                 //Do Something In Portrait Mode
  14.                 if (panel2) {
  15.                     panel2.style.display = 'inherit';
  16.                 }
  17.                 if (Panel3) {
  18.                     panel3.style.display = 'none';
  19.                 }
  20.                 //alert('orientation == 0');
  21.             }
  22.             else if (orientation == 90) {
  23.                 //Do Something In Landscape Mode
  24.                 if (panel2) {
  25.                     panel2.style.display = 'none';
  26.                 }
  27.                 if (Panel3) {
  28.                     panel3.style.display = 'inherit';
  29.                 }
  30.                 //alert('orientation == 90');
  31.             }
  32.             else if (orientation == -90) {
  33.                 //Do Something In Landscape Mode
  34.                 if (panel2) {
  35.                     panel2.style.display = 'none';
  36.                 }
  37.                 if (Panel3) {
  38.                     panel3.style.display = 'inherit';
  39.                 }
  40.                 //alert('orientation == -90');
  41.             }
  42.             else if (orientation == 180) {
  43.                 //Do Something In Portrait Mode
  44.                 if (panel2) {
  45.                     panel2.style.display = 'inherit';
  46.                 }
  47.                 if (Panel3) {
  48.                     panel3.style.display = 'none';
  49.                 }
  50.                 //alert('orientation == 180');
  51.             }
  52.             else {
  53.                 // Get the screen size and determine if it is in portrait
  54.                 // or landscape mode by comparing the width and height.
  55.                 var wid = screen.width;
  56.                 var ht = screen.height;
  57.                 if (wid > ht) {
  58.                     if (panel2) {
  59.                         panel2.style.display = 'none';
  60.                     }
  61.                     if (Panel3) {
  62.                         panel3.style.display = 'inherit';
  63.                     }
  64.                     //alert('wid > ht');
  65.                 }
  66.                 else {
  67.                     if (panel2) {
  68.                         panel2.style.display = 'inherit';
  69.                     }
  70.                     if (Panel3) {
  71.                         panel3.style.display = 'none';
  72.                     }
  73.                     //alert('wid < ht');
  74.                 }
  75.             }
  76.         }
  77.     }
  78. </script> 
Sep 7 '13 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.