locked
How to Detect change in Mobile Device Orientation RRS feed

  • Question

  • User1428043550 posted

    Hi Everyone,

    I'm looking for some advice on how to detect a change in orientation when a user visits my website with a mobile device.

    For the most part I am using CSS and media queries to deal with the presentational differences between potrait and landscape modes but I have a requirement to make some of these changes in code.  I basically have a gridview which needs to hide certain columns when in potrait mode but to show all columns when in landscape mode.  I don't actually know how I detect this change in orientation from code (and whether this can be achieved from client side and/or server side) so was wondering if you could help.

    I have searched the internet and found a way of doing this using a mix of client side and server side code with hidden fields but this only works on a postback, I actually need it to happen when the user rotates the mobile device.

    My website has been developed using Visual Studio and coded in VB.Net.  I also have JQuery installed.

    Any ideas.

    Thanks

    Steven

     

    Thursday, July 17, 2014 4:01 AM

Answers

  • User1428043550 posted

    After further researching this on the internet I found a solution.  So for all of you who are interested the detection of the change in mobile device orientation can be achieved with this snippet of Javascript:

    function readDeviceOrientation() {
                     		
        if (Math.abs(window.orientation) === 90) {
            // Landscape
        } else {
        	// Portrait
        }
    }

    window.onorientationchange = readDeviceOrientation;

    Thanks to William Malone for this from his article which can be seen at: http://www.williammalone.com/articles/html5-javascript-ios-orientation/

    To show the full gridview in landscape mode but hide a particular column in potrait mode I had to add the following javascript into the Landscape and Potrait parts of the If, else clause above respectively:

     rows = document.getElementById("mainmiddle_leaguetable").rows;
                    for (i = 0; i < rows.length; i++) 
                    {rows[i].cells[9].style.display = "block";}
      rows = document.getElementById("mainmiddle_leaguetable").rows;
                    for (i = 0; i < rows.length; i++)
                    {rows[i].cells[9].style.display = "none";}

    One further point to make is that my gridview had an ID of 'leaguetable' but when I used this as the ElementID it didn't work.  It took me a few minutes to realise that you had to use the ID given to the gridview when the HTML was actually rendered.  To do this I had to look at the page source where I found that it had actually been rendered with an ID of 'mainmiddle_leaguetable'.

    I hope this helps others out there

    Stark8352

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 17, 2014 3:00 PM

All replies

  • User1428043550 posted

    After further researching this on the internet I found a solution.  So for all of you who are interested the detection of the change in mobile device orientation can be achieved with this snippet of Javascript:

    function readDeviceOrientation() {
                     		
        if (Math.abs(window.orientation) === 90) {
            // Landscape
        } else {
        	// Portrait
        }
    }

    window.onorientationchange = readDeviceOrientation;

    Thanks to William Malone for this from his article which can be seen at: http://www.williammalone.com/articles/html5-javascript-ios-orientation/

    To show the full gridview in landscape mode but hide a particular column in potrait mode I had to add the following javascript into the Landscape and Potrait parts of the If, else clause above respectively:

     rows = document.getElementById("mainmiddle_leaguetable").rows;
                    for (i = 0; i < rows.length; i++) 
                    {rows[i].cells[9].style.display = "block";}
      rows = document.getElementById("mainmiddle_leaguetable").rows;
                    for (i = 0; i < rows.length; i++)
                    {rows[i].cells[9].style.display = "none";}

    One further point to make is that my gridview had an ID of 'leaguetable' but when I used this as the ElementID it didn't work.  It took me a few minutes to realise that you had to use the ID given to the gridview when the HTML was actually rendered.  To do this I had to look at the page source where I found that it had actually been rendered with an ID of 'mainmiddle_leaguetable'.

    I hope this helps others out there

    Stark8352

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 17, 2014 3:00 PM
  • User1428043550 posted

    One further point again is that this appears to be a solution for ios.  I haven't tried it on other mobile devices but it's a start!

    Thursday, July 17, 2014 3:05 PM