X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

jQuery Mobile Orientation Event


jQuery Mobile orientationchange Event

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





Mobile


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 »

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



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates FREE Website Templates Free HTML Templates

SHARE THIS PAGE

facebook