0

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.

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

Interactive will be hidden in portrait and content will be hidden in landscape.

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.

Will something like the following work?

/* 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; }   
}



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

<div id="interactive"></div>
<script type="text/javascript">
$(function()
{
        $("#interactive").load("interactive/index.html");
});
</script>
user1914460
  • 1
  • 1

2 Answers2

0

How about 1 JQuery function that checks for whether #content or #interactive is visible and then triggers the appropriate load?

Beyond that, try binding to the orientation change if possible

A good, related answer here: https://codereview.stackexchange.com/a/11701

and here: https://stackoverflow.com/a/2323338/1821473

Community
  • 1
  • 1
mcolley73
  • 91
  • 6
  • I am hoping to load both. The main objective is to just hide one or the other visually. The user will likely change orientation a few times while using the app. – user1914460 Dec 19 '12 at 17:54
0

How about this being supported by most browsers?

$(document).ready(

    function() {

        var screenX = screen.width,
            screenY = screen.height;

        if (screenX == 768 && screenY == 1024) {
            $('div#interactive').css('display','none');
        }

        else if (screenY == 768 && screenX == 1024) {
            $('div#content').css('display','none');
        }
    }
);


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

<div id="interactive">
<script type="text/javascript">
$(function()
{
        $("#interactive").load("interactive/index.html");
});
</script></div>
user1914460
  • 1
  • 1