23

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?

4 Answers 4

45
$(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
      }
}
4
  • 3
    whatever u want to do on orientation change.
    – ghostCoder
    Apr 5, 2012 at 11:25
  • if u see splitview code, u can see what he does to hide one panel in potrait mode
    – ghostCoder
    Apr 5, 2012 at 11:25
  • yups. add css classes... n all
    – ghostCoder
    Apr 5, 2012 at 11:38
  • 4
    Current jQuery version recommends on event handler: $(window).on( "orientationchange", function( event ) { } Aug 29, 2013 at 21:41
12
$(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.

2
  • please tell me what i have to do in "//Do whatever in portrait mode" and "//Do Whatever in landscape mode" here only i m confuse....??
    – Nishant
    Apr 5, 2012 at 11:22
  • 3
    Whatever you intended to do as the phone is in portait mode or in landscape mode.
    – MauganRa
    Aug 16, 2012 at 10:57
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.

1

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
2
  • with this script you can write css rules easier, based on orientation
    – itsjavi
    Jun 18, 2014 at 10:54
  • Very useful. Thank you.
    – Giuseppe
    Aug 4, 2020 at 3:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.