Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Orientationchange - DOM issue

    Hey there! Basing myself on the code from this page (http://api.jquerymobile.com/orientationchange/) I coded the following. It works fine if I try to apply changes to a div element, but not to the body. Could someone please show me how to achieve this? The code below yields only a blankpage. (you don't need to test it on a handheld device to try it out, just manually change the dimensions of the browser window).
    Thanks ! =)

    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>orientationchange demo</title>
    <link rel="stylesheet" href="jquery.mobile-1.3.2.min.css">
    <script src="jquery-1.10.0.js"></script>
    <script src="jquery.mobile-1.3.2.min.js"></script>
    <style type="text/css">
        .landscape {
            background-image:url('images/landscape.jpg');
            width:500px;
            height:375px;
        }
        .portrait {
            background-image:url('images/portrait.jpg');
            width:550px;
            height:787px;
        }
    </style>
    </head>
    <body>
    
    <script>
    // 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") {
            $("body").addClass("landscape").removeClass("portrait");
            return false;
        } else if (event.orientation=="portrait") {
            $("body").addClass("portrait").removeClass("landscape");
            return false;
        }
    });
    // You can also manually force this event to fire.
    $( window ).orientationchange();
    </script>
    
    </body>
    </html>

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    350
    Thanks
    9
    Thanked 51 Times in 50 Posts
    I think it conflicts with the <body> background already defined by the jquery.mobile-1.3.2.min.css; if you're using FF, you may see this with browser's Inspector, < Ctrl-Shift-i >.

    Why don't use a div instead? It may also cover whole screen of the device.

  • Users who have thanked hdewantara for this post:

    kizeryakuza (08-01-2013)

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    yes, I think you're right, it seems to collide with another predefined body background. So I'll just stick with a superimposed div element =) It was just that in trying to simplify the code as much as possible I figured I would just use the body as opposed to additional elements.
    thanks for having had a look for me


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •