title: orientation change jquery help needed
body: <p>Basing myself on the code at this URL : <a href="http://api.jquerymobile.com/orientationchange/" rel="nofollow">http://api.jquerymobile.com/orientationchange/</a></p>
  
  <p>I tried changing it so it could display a different image per orientation. That works fine using <code>$("#someID").html(&lt; img src.../ >);</code>
  but for some reason I can't get it to work as well using .addClass</p>
  
  <p>Could someone please tell me why the following doesn't seem yield anything but a blank screen?</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;orientationchange demo&lt;/title&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"&gt;
  &lt;script src="http://code.jquery.com/jquery-1.10.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
      .landscape {
          background-image:url('images/landscape.jpg');
      }
      .portrait {
          background-image:url('images/portrait.jpg');
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="orientation" class="landscape"&gt;&lt;/div&gt;
  &lt;script&gt;
  // Bind an event to window.orientationchange that, when the device is turned,
  // gets the orientation and displays it to on screen.
  $( window ).on( "orientationchange", function( event ) {
      if (event.orientation=="landscape") {
          //$("#orientation").removeClass("portrait");
          $("#orientation").addClass("landscape");
          return false;
      } else if (event.orientation=="portrait") {
          //$("#orientation").removeClass("landscape");
          $("#orientation").addClass("portrait");
          return false;
      }
  });
  // You can also manually force this event to fire.
  $( window ).orientationchange();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Ok, I got it to work now with dimensions definitions and combining addClass(class).removeClass(otherclass) but could someone please show me how I apply this same change to the body instead of the a div? </p>