jQuery mobile window.orientationchange

http://benalman.com/

by 5TDg9

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<div data-role="page" id="page">
    <div id="#hidethis" data-role="header" data-position="fixed">
        <h1>Page One</h1>
    </div>
    <div data-role="content">    
        <p><div id="status">Change the orientation...</div></p>
        
        <p><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu magna orci. Pellentesque blandit metus quis arcu pharetra nec aliquam justo pretium. Duis euismod congue dictum. Cras ac turpis tortor. Integer tincidunt lectus vitae eros blandit nec elementum enim semper. Pellentesque lacinia mattis orci, in aliquet erat rhoncus eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam pulvinar nulla ut quam egestas viverra. Aliquam erat volutpat. Integer mattis dignissim nunc, eu vestibulum nulla mattis ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis a augue sit amet velit dapibus consectetur. Suspendisse potenti. Nam vitae turpis purus. Duis risus mi, interdum ut interdum euismod, tincidunt ut sapien. Vivamus consectetur odio et felis imperdiet vitae porttitor nibh tincidunt. Suspendisse eros nisl, tincidunt vel accumsan in, bibendum mollis libero. Pellentesque eget orci dui. Nulla quis viverra leo. Donec ac sapien ac tellus fermentum dapibus at vel enim. Mauris tristique vestibulum ante, vitae aliquam elit auctor nec. In lorem eros, faucibus et condimentum vel, porta nec tellus. Suspendisse a sem dapibus massa pharetra auctor quis nec arcu. Vestibulum egestas commodo eros luctus imperdiet. Duis nulla erat, volutpat eget ullamcorper sed, posuere sed odio.
Donec vitae dui in lorem dapibus aliquet sed eu augue. Ut viverra ultricies ante eget sagittis. Nunc non tortor sem, ut dignissim ante. Nam eget aliquet risus. Aliquam ut nisi...

CSS

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

}

/* landscape */
@media screen and (orientation:landscape) {
  /* landscape-specific styles */
    #hidethis {
        display:none;
    }    
}

body {
    font-size: 20px;
}

#status {
    color: #FF0000;
}

JavaScript

$(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;
    };        
});