HTML and CSS Reference
In-Depth Information
height: 338px;
width: 450px;
border: solid 1px #111;
background: -ms-linear-gradient(left, #111 0%,#444 50%,#444 51%,#111 100%);
}
As you can see, the
listview
is set to 240 pixels of height and items are 320 pixels wide, which it is
good to have just one item show up per row in snapped mode. Now open up
default.html
and fix the
markup as follows. Remove the entire
TABLE
element you find next to the
H1
element with the page
title. Replace it with the following markup:
<div class="flexible-container">
<div id="semantic-zoom-container"
data-win-control="WinJS.UI.SemanticZoom"
data-win-options="{initiallyZoomedOut: true}">
<!-- The zoomed-in view. -->
<div id="listview-in"
data-win-options ="{layout: {type: WinJS.UI.GridLayout}}"
data-win-control="WinJS.UI.ListView"></div>
<!--- The zoomed-out view. -->
<div id="listview-out"
data-win-options ="{layout: {type: WinJS.UI.GridLayout}}"
data-win-control="WinJS.UI.ListView"></div>
</div>
<div id="player-container">
<iframe id="player" height="100%" width="100%" type="text/html"></iframe>
</div>
</div>
Finally, open up
Videos.js
and add the following line to the
VideosApp.init
function:
// Register handler for resize events
window.onresize = addEventListener('resize', VideosApp.onResize, false);
The extra line will register a handler for the resize event. By handling this event, you can switch the
layout of both
listviews
of the semantic zoom component to the list layout when the application is
snapped. Here's the code for the
VideosApp.onResize
function:
VideosApp.onResize = function (e) {
var detailView = document.getElementById("listview-in").winControl;
var masterView = document.getElementById("listview-out").winControl;
var viewState = Windows.UI.ViewManagement.ApplicationView.value;
switch (viewState) {
Search WWH ::
Custom Search