jQuery Mobile - Orientation Event

Description

You can trigger the orientation event when the user rotates the device vertically or horizontally using orientationchange event. It uses the window.orientation property to specify whether the window or the device is set to vertical or horizontal orientation.

Example

Following example describes the use of orientation event in the jQuery Mobile Framework.

Live Demo

<!DOCTYPE html>
   <head>
      <title>Orientation Event</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      
      <script>
         $(document).on("pagecreate","#page1",function(event) {
            $(window).on("orientationchange",function() {
               if(window.orientation == 0) {
                  $("p").text("portrait orientation!!!");
               } else {
                  $("p").text("landscape orientation!!!");
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>To see the orientation effect, you must rotate your window...</p>
         </div>

         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      
      </div>
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

Save the above html code as jqm_orientation_event.html file in your server root folder.
Open this HTML file as http://localhost/jqm_orientation_event.html and the following output will be displayed.

jquery_mobile_events.htm

Kickstart Your Career

Get certified by completing the course

Get Started