locked
Extending content after hiding the appbar

    Question

  • Hi

    I have an appbar in my application with an autohide. So if the user right clicks on the content, the appbar appears. Then I wrote a function that sets the content to 0px, in other words: when the appbar hides, the content extends from 72px to 0px to avoid an empty area at the bottom.

    Is there a way, to have the content extended with a float or animation or something else, instead of just from 72px to 0px? It works fine, but it's not attractive.

    Thanks

    Monday, March 19, 2012 3:30 PM

Answers

  • Sounds like a good case for CSS tansitions:

    http://msdn.microsoft.com/library/ie/hh673535.aspx

    Set the transition on the height, top or scale property. e.g.:

    .myContent {
       height: 72px;
       -ms-transition: height 1s ease;
    }
    
    .shrink {
       height: 0;
    }

    Then, in your function, just do a WinJS.toggleClass on your content to add/remove the .shrink class to the .myContent element.

    BTW, I believe the appbar is 88px tall.

    Monday, March 19, 2012 4:51 PM

All replies

  • Sounds like a good case for CSS tansitions:

    http://msdn.microsoft.com/library/ie/hh673535.aspx

    Set the transition on the height, top or scale property. e.g.:

    .myContent {
       height: 72px;
       -ms-transition: height 1s ease;
    }
    
    .shrink {
       height: 0;
    }

    Then, in your function, just do a WinJS.toggleClass on your content to add/remove the .shrink class to the .myContent element.

    BTW, I believe the appbar is 88px tall.

    Monday, March 19, 2012 4:51 PM
  • Sounds like a good case for CSS tansitions:

    http://msdn.microsoft.com/library/ie/hh673535.aspx

    Set the transition on the height, top or scale property. e.g.:

    .myContent {
       height: 72px;
       -ms-transition: height 1s ease;
    }
    
    .shrink {
       height: 0;
    }

    Then, in your function, just do a WinJS.toggleClass on your content to add/remove the .shrink class to the .myContent element.

    BTW, I believe the appbar is 88px tall.

    I've read the article and that's it indeed. But now the problem is, I'm extending the content in a .js file, and not in css. I'm doing it like this:

    var bar = document.getElementById('myAppBar');
            if (bar != null) {
                bar = bar.winControl;
                bar.addEventListener("aftershow", function (e) {
                    document.getElementById('content').style.bottom = "90px";
                });
    I thought I can call -ms-transitions dynamically, but without any results.

    Thursday, March 22, 2012 9:16 AM
  • I'm not sure if CSS transitions are supposed to work with direct programatic changes to the sytle attribute. When I do it I do it by adding or removing a css class.

    If you're animating the "bottom" attribute did you make sure your tansition CSS property is set to animate that? E.g.:

     -ms-transition: bottom 1s ease;

    Thursday, March 22, 2012 10:13 PM
  • Yes, it works. Thank you very much.

    By the way, sorry for my late answer.

    • Edited by hssint Wednesday, March 28, 2012 9:01 AM
    Wednesday, March 28, 2012 7:45 AM