jQuery Mobile Orientation Event

## jQ Mobile Tutorial

jQ Mobile HOME jQ Mobile Intro jQ Mobile Install jQ Mobile Pages jQ Mobile Transitions jQ Mobile Buttons jQ Mobile Icons jQ Mobile Toolbars jQ Mobile Navbars jQ Mobile Collapsibles jQ Mobile Grids

## jQ Mobile Lists

jQ Mobile List Views jQ Mobile List Content

## jQ Mobile Forms

jQ Mobile Form Basic jQ Mobile Form Inputs jQ Mobile Form Select jQ Mobile Form Sliders

## jQ Mobile Themes

jQ Mobile Themes

## jQ Mobile Events

jQ Mobile Events jQ Mobile Touch jQ Mobile Scroll jQ Mobile Orientation jQ Mobile Page Events

## Examples

jQ Mobile Examples

## References

jQ Data Attributes jQ Events jQ Icons

# jQuery Mobile Orientation Event

« Previous
Next Chapter »

## jQuery Mobile orientationchange Event

The orientationchange event is triggered when the user rotates the mobile device vertically or horizontally.

To use the orientationchange event, attach it to the window object:

$(window).on("orientationchange",function(){
alert("The orientation has changed!");
});

The callback function can have one argument, the event object, which returns the orientation of the mobile device: "portrait" (the device is held in a vertical position) or "landscape" (the device is held in a horizontal position):

## Example

$(window).on("orientationchange",function(event){
alert("Orientation is: " + event.orientation);
});
Try it yourself »

Because the orientationchange event is bound to the window object, we can use the window.orientation property to, for example, set different styles to distinguish between portrait and landscape views:

## Example

$(window).on("orientationchange",function(){
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 yourself »

| The window.orientation property returns 0 for portrait and 90 or -90 for landscape view.

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE