title: Event to detect orientation (landscape and portrait mode) for "samsung galaxy Android 2.3.5"
body: <p><strong>I want to show different page design for landscape and portrait mode.</strong></p>
  
  <p><strong>I want an event which fire every time when user change the mobile from "landscape to portrait" and "portrait to landscape" and page show different design for both the mode.</strong></p>
  
  <p>Also in my code each time show the landscape design it is not able to detect the portrait mode.Even when I am running the page in portrait mode.</p>
  
  <p>For following mobile device:</p>
  
  <p><strong>Device</strong>: Samsung Galaxy ,</p>
  
  <p><strong>Os version:</strong> Android 2.3.5.</p>
  
  <p>In this I am using:</p>
  
  <p><strong>Jquery mobile version:</strong> 1.1.0. ,</p>
  
  <p><strong>Jquery version:</strong> 1.7.1 </p>
  
  <p>My code is running well for <strong>"iphone,ipad and htc android mobile"</strong> but when I am test this in "Samsung Galaxy" then it is showing landscape page design for both the landscape and portrait mode.</p>
  
  <p><strong>My code is:</strong></p>
  
  <pre><code> $(document).ready(function () {
      $("#pagecontent.ui-content").css({ 'padding': '0px', 'margin': '0px' });
      checkClientTimeZone();
  
      position = $.event.special.orientationchange.orientation();
      pagecontentChanges();
  
      //        $(window).bind("orientationchange", pagecontentChanges);
  
  });
  $.event.special.orientationchange.orientation = get_orientation = function () {
      var elem = document.documentElement;
      //alert(elem &amp;&amp; elem.clientWidth / elem.clientHeight &lt; 1.1 ? "portrait" :       "landscape");
      return elem &amp;&amp; elem.clientWidth / elem.clientHeight &lt; 1.1 ? "portrait" : "landscape";
  };
  window.addEventListener("orientationchange", function () {
      setTimeout(function () {
          position = $.event.special.orientationchange.orientation();
          pagecontentChanges();
      }, 500);
  }, false);
  window.addEventListener("resize", function () {
      setTimeout(function () {
          position = $.event.special.orientationchange.orientation();
          pagecontentChanges();
      }, 500);
  }, false);
  
  
  function pagecontentChanges() {
  
      if (position == "portrait") {
          $("#headertext").css({ "text-align": "center", "margin-top": "-2.6em" });
          $("#login_content").removeClass("landscap_logincontent");
          $("#registerdiv").removeClass("landscap_divwhite");
          $("#tylenol").css({ "width": "100%", "float": "", "margin-right": "0px" });
          $("#button_div .ui-btn").css(" margin-top", ".5em");
          $("#loginbluelink").css("text-align", "center");
          $("#redromantext").css("text-align", "center");
          $('#registerdiv').css({ "float": "" });
          $("#registertext").css({ "margin-top": "0px" });
          $(".divwhite").css({ "width": "60%" });
  
          $("#loginheader").attr("src", "@img_css_scpt/test_mobile/images/logon_header.png");
  
      }
      if (position == "landscape") {
          $("#headertext").css({ "text-align": "left", "padding-left": "5%", "margin-top": "1em" });
          $("#login_content").addClass("landscap_logincontent");
          $("#registerdiv").addClass("landscap_divwhite");
          $("#tylenol").css({ "width": "55%", "float": "left", "margin-right": ".5em" });
          $("#button_div .ui-btn").css(" margin-top", "0px");
          $("#loginbluelink").css("text-align", "left");
          $("#redromantext").css("text-align", "left");
          $("#registertext").css({ "margin-top": "5px" });
          $(".divwhite").css({ "width": "71%" });
  
          $("#loginheader").attr("src", "@img_css_scpt/test_mobile/images/landscap_header_logon.png");
      }
  }
  </code></pre>