Orientation change event implementation by jquery mobile in phone gap

Question

Could someone please let me know the right code for orientation change event by jquery mobile in phone gap? Where and how do I implement this orientationChange function?

Answer 1

The following code should work across all the browsers to detect orientation change. It doesnt uses jquery mobile event but seems to work for most of devices.

1. var isIOS = /safari/g.test(navigator.userAgent.toLowerCase());
2. var ev = isIOS ? 'orientationchange' : 'resize'; 
3. var diff = (window.innerWidth-window.innerHeight);
4. $(window).bind(ev,function(){
5.     setTimeout(function(){
6.         if(diff*((window.innerWidth-window.innerHeight)) < 0)
7.             orientationChanged();
8.     },500);
9. });

Line 2 takes up the resize event for any non-safari browsers since other browsers in other devices take up resize event more consistently than orientation change event. http://www.quirksmode.org/m/table.html

Line 5 performs the check in a timeout since some of the android native browser dont take up the new width immediately.

Line 6 For the orientation change to take place the product of the differences of old and new height and width should be negative.

Answer 2

$(window).bind( 'orientationchange', function(e){
    if ($.event.special.orientationchange.orientation() == "portrait") {
        //Do whatever in portrait mode
    } else {
        //Do Whatever in landscape mode
    }
});

You can add the resize event in the event parameter of the bind function, if you're targeting iOS and orientationchange doesn't work. Since changing orientation fires the resize event too.

Answer 3

I'm using this in my mobile templates, as the orientationchange event wasn't triggered on iOS 7 Safari:

    // ORIENTATION CHANGE TRICK
    var _orientation = window.matchMedia("(orientation: portrait)");
    _orientation.addListener(function(m) {
        if (m.matches) {
            // Changed to portrait
            $('html').removeClass('orientation-landscape').addClass('orientation-portrait');
        } else {
            // Changed to landscape
            $('html').removeClass('orientation-portrait').addClass('orientation-landscape');
        }
    });
    //  (event is not triggered in some browsers)
    $(window).on('orientationchange', function(e) {
        if (e.orientation) {
            if (e.orientation == 'portrait') {
                $('html').removeClass('orientation-landscape').addClass('orientation-portrait');
            } else if (e.orientation == 'landscape') {
                $('html').removeClass('orientation-portrait').addClass('orientation-landscape');
            }
        }
    }).trigger('orientationchange');
    // END TRICK

Answer 4

$(window).bind('orientationchange', _orientationHandler);

then in the _orientationHandler function, have something like:

if(event.orientation){
      if(event.orientation == 'portrait'){
                  //do something
      }
      else if(event.orientation == 'landscape') {
                    //do something
      }
}