title: document vs. window objects on android and phonegap - jquery mobile
body: <p>i have a simple example that does something when the user changes the orientation of the mobile device:  </p>
  
  <pre><code>&lt;script&gt;
  $(document).on("orientationchange", function(event) {
  if (event.orientation === "landscape") {
      // We have changed to landscape orientation, so we have more room
      // Make the headers and footers longer!
      $("header h1").text("jQuery Mobile Demonstration Application")
      $("footer h3").text("O'Reilly Multimedia Services")
  } else {
      // Back in portrait orientation, so return header and footer to original length.
      $("header h1").text("jQuery Mobile")
      $("footer h3").text("O'Reilly")
  }
  })
  &lt;/script&gt;
  </code></pre>
  
  <p>i downloaded this example (example-3) from <a href="https://github.com/jreid01/jqm-api" rel="nofollow">https://github.com/jreid01/jqm-api</a><br>
  which is the source code for <code>O'Reilly Webcast: The jQuery Mobile API In-Depth</code>  <a href="http://www.youtube.com/watch?v=I6Y4a0hA8tI" rel="nofollow">http://www.youtube.com/watch?v=I6Y4a0hA8tI</a><br>
  i loaded this example with PhoneGap:</p>
  
  <pre><code>public class MainActivity extends DroidGap {
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          super.loadUrl("file:///android_asset/www/example-3.html");
      }
  }
  </code></pre>
  
  <p>now, this example doesn't work nigher on my nexus-one nor on an android emulator. after making some experiments, the example did work when i changed <code>document</code> to <code>window</code>.<br>
  what is the reason <code>document</code> object doesn't work? what concept am i missing here?</p>
  
  <p>thanks!</p>