locked
Is there a way to get and/or set the -ms-view-state in JavaScript?

    Question

    1. Can you use JavaScript to get the -ms-view-state? E.g. get "device portrait" if the device it in that position.
    2. Can you set the -ms-view-state via JavaScript? Asking because I don't think our Dell tablet has the capabilities to detect it's been turned so we might need to add a button to do it manually for QA purposes.
    Tuesday, February 14, 2012 10:40 PM

Answers

All replies

  • Hi H,

    You want to use msMatchMedia:

    var mql = window.msMatchMedia("(-ms-view-state: snapped)");
     mql.addListener(function (mql) {
        if (mql.matches) {
           photoLV.layout = new WinJS.UI.ListLayout(); photoLV.refresh();
           zoomedOutLV.layout = new WinJS.UI.ListLayout(); zoomedOutLV.refresh();
        }
        else {
           photoLV.layout = new WinJS.UI.GridLayout(); photoLV.refresh(); 
           zoomedOutLV.layout = new WinJS.UI.GridLayout(); zoomedOutLV.refresh();
        }
     });

    see:

    http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html

    and:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh453838.aspx

    -Jeff


    Jeff Sanders (MSFT)

    • Marked as answer by Harlequin Wednesday, February 15, 2012 3:58 PM
    Wednesday, February 15, 2012 3:14 PM
    Moderator
  • Good stuff, thanks Jeff. Here's what I did in case others need code. I wanted to move divs when in portrait mode, as CSS positioning when in device-portrait wouldn't do for some layouts. Example below, I had to move right-column stuff to the left column, as I wanted to hide the right-column for space purposes.

    WinJS.UI.processAll(elements)
      .then(function () {
          var mql = window.msMatchMedia("(-ms-view-state: device-portrait)");
    
          if (mql.matches) {
            RepositionForPortrait(); // If already in portrait, move 
          }
    
          mql.addListener(function (mql) {
            if (mql.matches) {
              RepositionForPortrait(); // This runs when going from landscape to portrait
            }
          });
    });

    Then I just run this little function to move a div into another div.

    function RepositionForPortrait() {
      var leftColumn = document.getElementById("Left_Column");
      var relatedApps = document.getElementById("Related_Apps");
      leftColumn.appendChild(relatedApps);
    }

    Wednesday, February 15, 2012 10:48 PM
  • Hello guys.

    Stupid question: if the objective is to be notified of view changes (snapped, filled, full screen), why not rely on the layoutchanged event of the ApplicationLayout object?


    Luis Abreu

    Thursday, February 16, 2012 12:37 PM
  • Correct, if you only want to detect if the layout has changed, you can use the the layoutchanged event.

    Jeff Sanders (MSFT)

    Thursday, February 16, 2012 3:31 PM
    Moderator
  • My objective though was: If/when in Portrait mode, we need to make some UI changes.

    So I needed to do this when the layout changed from Landscape to Portrait, and if the users tablet was already in Portrait mode when the app was loaded.

    Thursday, February 16, 2012 3:49 PM