Load different in separate divs / show & hide with media queries
<p>I am creating a cross platform web app that will allow access to content in portrait and other interactive features in landscape. These will actually be two different HTML 5 apps.</p>

<p>I want to have two divs on index.html. One will load content/index.html and the other interactive/index.html.</p>

<p>Interactive will be hidden in portrait and content will be hidden in landscape.</p>

<p>Is it possible to use the jQuery load() method to accomplish this? I want them to both to load so that the user is able to return to where they left off in each view after each change in orientation.</p>

<p>Will something like the following work?</p>

<pre><code>/* show portrait content only */
/* hide it landscape content */

@media screen and (min-device-width: 0px) and (max-device-width: 768px) and (orientation: portrait) {
  #content { display: block; } 
  #interactive { display: none; }
}


/* show landscape content only */
/* hide portrait content */

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  #content { display: none; }
  #interactive { display: block; }   
}



&lt;div id="content"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
$(function()
{
        $("#content").load("content/index.html");
});
&lt;/script&gt;

&lt;div id="interactive"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
$(function()
{
        $("#interactive").load("interactive/index.html");
});
&lt;/script&gt;
</code></pre>
