The jQuery Mobile framework triggers an orientationchange
event when the orientation (portrait or landscape) of the mobile device is changed. This recipe shows you how to use the orientationchange
event.
Copy the full code of this recipe from the code/08/orientation
sources folder. You can launch this code by using the URL http://localhost:8080/08/orientation/main.html
Carry out the following steps:
Create
main.html
as follows:<div id="main" data-role="page" data-theme="e"> <div data-role="header" data-theme="a"> <h1>Orientation Events</h1> </div> <div data-role="content"> <p>Change orientation</p> </div> </div>
Add script to handle the
orientationchange
event in the<head>
section:$(window).bind("orientationchange", function(event, data) { $("h1").html(data.orientation); });