Check Screen Orientation with jQuery in W3C Widget

Here is a small tip for your W3C Widget on how you can identify when screen orientation have changed.

Screen rotation tutorial

It’s simple to use additional JavaScript libraries in widgets so it makes sense to use something like jQuery in your widgets. You can do so by downloading the latest jQuery library from their site and adding that to your ZIP file as separate js file.

With jQuery you can add an event handler for the screen resize event. In the event you can easily check the window dimensions and with those you can define the screen orientation. This makes it easy to change the overall UI to match the landscape and portrait views. Like in some apps you may want to have your toolbar in left side in landscape view and on the bottom when on portrait view.

Here is the code how this can be done with jQuery:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Rotation Test</title>
  <link type="text/css" href="css/style.css" rel="stylesheet"></style>
  <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">

  $(window).resize( function(){
    var height = $(window).height();
    var width = $(window).width();

    if(width>height) {
      // Landscape
      $("#mode").text("LANDSCAPE");
    } else {
      // Portrait
      $("#mode").text("PORTRAIT");
    }

   });
  </script>
 </head>
 <body>
   <div id="mode">LANDSCAPE</div>
 </body>
</html>

You can download the whole widget here: Rotate.wgt

Here is a sample how widget works in action on Nokia N900:

  • http://www.avinash.ws Avinash

    Pretty neat trick, Tommi! I purchased an N900 couple of weeks ago and have been finding ways to build apps for it. During my search for WRT support on N900, I came across your blog and am glad to discover QT WRT for N900.

    Very interesting & useful blog!

  • http://twitter.com/rajeshlalnokia Rajesh Lal

    very clever way of doing this.

  • abhinav rathore

    what if i have to disable portrait mode i.e i want to fix my application for landscape mode only. 

  • Rajkumar

    Great Post Tommi

  • White Rabbit

    very good, i tried orientationchange but it was very inconsistent throughout the different Device Softwares. This way makes much more sense and always correct!

  • Jekewa

    Your code shows no use of the widget, and on other devices, that jQuery works fine…what gives?

  • Mohammad

    Thank you.

  • Самуил Горанов

    Its bugy under old Android browsers. Resize event is called even on scrolling. :/