Answered by:
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.
- Proposed as answer by Bryan Thomas Monday, March 19, 2012 4:51 PM
- Edited by Bryan Thomas Monday, March 19, 2012 4:52 PM
- Marked as answer by hssint Wednesday, March 28, 2012 9:01 AM
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.
- Proposed as answer by Bryan Thomas Monday, March 19, 2012 4:51 PM
- Edited by Bryan Thomas Monday, March 19, 2012 4:52 PM
- Marked as answer by hssint Wednesday, March 28, 2012 9:01 AM
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;
- Edited by Bryan Thomas Thursday, March 22, 2012 10:15 PM
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