CODEWITHSUNDEEP
javascriptiphoneipadcordova
axooh
axooh

Reputation: 137

Javascript Orientation Change doesn't work with PhoneGap on iPad

I'm adapting a small HTML/CSS/Javascript driven web magazine as an iApp for the iPad with the great mobile framework PhoneGap. Everything works great, except the orientation change from portrait to landscape mode.

I use the following Javascript code in the header of the index.html (portrait):

  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;

  function updateOrientation() {
   if (isiPad || isiPhone) {
    switch (window.orientation) {
     case 90:
      window.location = "index_landscape.html";
      break;
     case -90:
      window.location = "index_landscape.html";
      break;
    }
   }
  }

with the following body tag:

<body onorientationchange="updateOrientation();">

If I rotate the iPad to landscape mode, it doesn't change to index-landscape.html.

Does anybody know where the problem is? Isn't it possible to change the HTML file, while changing orientation within the PhoneGap framework? With other words, can I only use one HTML file (index.html) with PhoneGap and have to use CSS for the orientation change?

If I check out the app as a website with the iPad Safari browser, the orientation change works properly.

Thanks for any help!

Upvotes: 3

Views: 13315

Answers (1)

axooh
axooh

Reputation: 137

I just found an other solution to the problem. I use the body onload function with the onDeviceReady function from phonegap.js to check the orientations:

The following javascript code works properly now:

    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    function onDeviceReady() {
        document.addEventListener("orientationChanged", updateOrientation);
    }

    function updateOrientation(e) {
        switch (e.orientation) {
            case 90:
                window.location = "index_landscape.html";
                break;
            case -90:
                window.location = "index_landscape.html";
                break;
        }
    }

UPDATE: This worked more than two years ago with old versions of Phonegap and iOS SDK, but according some users, it doesn't work anymore.

Upvotes: 3

Related Questions