Question

I need to able to hide the header/footer when the device orientation event is called (I’d also settle for changing their data-position=”fixed” attribute to not-fixed)

I’ve tried:

$(window).bind('orientationchange resize', function(event){

            if(event.orientation == 'portrait') {
                //do something
            } 
            if (event.orientation == 'landscape') {
                $.mobile.fixedToolbars.show(false);
            }
    });

I’ve also used:

$.mobile.fixedToolbars.hide(true);

But neither seems to do the trick. Has this been removed from JQM 1.1?

Answer 1

With css media queries it’s very simple to hide elements depending on the device orientation:

/* portrait */
@media screen and (orientation:portrait) {
  /* portrait-specific styles */
}

/* landscape */
@media screen and (orientation:landscape) {
  /* landscape-specific styles */
}

here is working example:

http://jsfiddle.net/5TDg9/bwzdr/show/

(be sure to open this link with your mobile device)

---

EDIT:

I improved the above sample with a javascript-based detection of the orientation (added to the css), theoretically you could pass anything after “case”:

$(window).bind( 'orientationchange', function(e){
    var orientation="portrait";
    if(window.orientation == -90 || window.orientation == 90) orientation = "landscape";

    $("#status").html(orientation);  

    switch(orientation){
      case 'portrait':
        // alert('portrait');
        $.mobile.fixedToolbars.setTouchToggleEnabled(true);
        break;
      case 'landscape':
        // alert('landscape');        
        $.mobile.fixedToolbars.setTouchToggleEnabled(false);
        break;
      default:
        break;
    };        
});

Example here