Debug HTML, CSS, and JavaScript sample code

  • Article

Note

This article applies to Visual Studio 2015. If you're looking for the latest Visual Studio documentation, see Visual Studio documentation. We recommend upgrading to the latest version of Visual Studio. Download it here

Applies to Windows and Windows Phone](../Image/windows_and_phone_content.png "windows_and_phone_content")

The code in this topic is the sample file for Quickstart: Debug HTML and CSS. The errors present by design in the QuickStart are fixed in this version of the code.

Sample Code

The following HTML code is used in the <body> tag in the QuickStart.

<div id="flipTemplate" data-win-control="WinJS.Binding.Template"  
         style="display:none">  
    <div class="fixedItem" >  
        <img src="#" data-win-bind="src: flipImg" />  
    </div>  
</div>  
<div id="fView" data-win-control="WinJS.UI.FlipView" data-win-options="{  
    itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">  
</div>

The following CSS shows the additions made to default.css.

#fView {  
    background-color:#0094ff;  
    height: 500px;  
    margin: 25px;  
}

The following code example shows the complete JavaScript code in default.js. The references to WinJS namespaces for this code are in the template’s default.html file.

(function () {  
    "use strict";  
  
    var app = WinJS.Application;  
    var activation = Windows.ApplicationModel.Activation;  
  
    var myData = [];  
    for (var x = 0; x < 4; x++) {  
        myData[x] = { flipImg: "/images/logo.png" }  
    };  
  
    var pages = new WinJS.Binding.List(myData, { proxy: true });  
  
    app.onactivated = function (args) {  
        if (args.detail.kind === activation.ActivationKind.launch) {  
            if (args.detail.previousExecutionState !==  
            activation.ApplicationExecutionState.terminated) {  
                // TODO: . . .  
            } else {  
                // TODO: . . .  
            }  
            args.setPromise(WinJS.UI.processAll());  
  
            updateImages();  
        }  
    };  
  
    function updateImages() {  
  
        pages.setAt(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });  
        pages.setAt(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });  
        pages.setAt(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });  
    };  
  
    app.oncheckpoint = function (args) {  
    };  
  
    app.start();  
  
    var publicMembers = {  
        items: pages  
    };  
  
    WinJS.Namespace.define("Data", publicMembers);  
  
})();

See Also

Quickstart: Debug HTML and CSS