Phonegap OrientationChange event

Currently phonegap doesn’t support raising the orientationchange javascript event that gets fired by most browsers. The result for my mobile web application is that it works nicely in Safari on the iPad, but once wrapped up in phonegap it’s unable to detect the device orientation being changed.

In the phonegap roadmap the orientationchange is marked as being fixed this month, but until that happens i needed a workaround.

There are quite a few posts on various forums that suggest using various permutations of window.onresize event and changing the panel width manually with panel.setSize() or calling panel.setOrientation().

E.G.

window.onresize = function(event) {
  myPanel.setOrientation(Ext.getOrientation(), windows.innerWidth, window.innerHeight);
}

Unfortunately, it this code only works the first time the orientation is changed. For subsequent orientations, the event doesn’t fire.

The solution

After a couple of hours of tweaking and further searching i found this post, which details a solution which works perfectly.

if(Ext.is.iOS && navigator.userAgent.match(/safari/i) == null) {
         Ext.EventManager.onWindowResize(function(){
               if(nativeAppOrientation != Ext.getOrientation()) {
                    var e = document.createEvent('Events');
                    e.initEvent('orientationchange', true, false);
                    document.dispatchEvent(e);
                    nativeAppOrientation = Ext.getOrientation();
               }
       }, this, {buffer: 500});
    }