jQuery Mobile changes the direction of the event
May 21, 2021 jQuery Mobile
Table of contents
jQuery Mobile changes the direction of the event
jQuery Mobile's orientation change event
Triggers a orientation change event when the user rotates the mobile device vertically or horizontally.
To use the orientationchange event, attach it to the window object:
alert("The orientation has changed!");
});
The callback function can have an argument, the event object, that returns the orientation of the mobile device: Portrait (the device remains in a vertical position) or Landscape (the device remains horizontal):
alert("Orientation is: " + event.orientation);
});
Try it out . . .
Because the orientationchange event is bound to the window object, we can use the window.orientation property to set different styles to distinguish between portrait and landscape views:
if(window.orientation == 0) // Portrait
{
$("p").css({"background-color":"yellow","font-size":"300%"});
}
else // Landscape
{
$("p").css({"background-color":"pink","font-size":"200%"});
}
});
Try it out . . .
|
The window.orientation property returns 0 for portrait view and 90 or -90 for landscape view. |
|---|
Note: The resize event is bound when the browser does not support the EventChange event.
In the next section, we'll cover the jQuery Mobile page event!