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-options="{initiallyZoomedOut: true}">
<!-- The zoomed-in view. -->
<div id="listview-in"
data-win-options ="{layout: {type: WinJS.UI.GridLayout}}"
<!--- The zoomed-out view. -->
<div id="listview-out"
data-win-options ="{layout: {type: WinJS.UI.GridLayout}}"
<div id="player-container">
<iframe id="player" height="100%" width="100%" type="text/html"></iframe>
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