locked
Can't next item flipview javascript html5?

    Question

  • I am using http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/8537064f-816e-4f20-9782-637c30cf465a/

    and write a sample. With my sample,start with semulator resolution 1366 x 768 when i am using flipview inside article,i can't next item in flipview. Here is my code.

    default.html

    <body>
    <div id="content" class="content" aria-label="Main content" role="main">
            <article id="art">
                <div>
                <div id="TemplateTest" class="TemplateTest" data-win-control="WinJS.Binding.Template">
                    <span id="TextSpan" data-win-bind="innerText: name;style.color: color"/>        
                </div>
                <div id="nameDiv" style="background-color:aqua">
                    Welcome, <span id="nameSpan" data-win-bind="textContent: name" style="font-size:30px"></span>
                </div> 
                <div id="myFlipView" data-win-control="WinJS.UI.FlipView" style="width:  500px; height:  500px; background-color: red;"></div>
    
                <div id="someTemplate" data-win-control="WinJS.Binding.Template">
    
                    <h2 data-win-bind="textContent: someProperty"></h2>                    
    
                </div>
                    </div>
                </article>
    
        </div>
    </body>

    default.js

    (function () {
    "use strict";
    
    WinJS.Binding.optimizeBindingReferences = true;
    
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    
    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
                var person = { name: "Test sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdf Fran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdfFran sfsdfsdfsdf" };
                var nameElement = document.getElementById("nameDiv");
                WinJS.Binding.processAll(nameElement, person);
                initialize();
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };
    
    app.oncheckpoint = function (args) {
    };
    
    app.start();
    var myDatas;
    
    var Data = WinJS.Binding.define({
    
        someProperty: ''
    
    });
    
    function initialize() {
    
        WinJS.UI.processAll().then(function () {
    
            var flipView = document.getElementById("myFlipView").winControl;
    
            myDatas = new WinJS.Binding.List();
    
            flipView.itemDataSource = myDatas.dataSource;
    
            flipView.itemTemplate = document.getElementById('someTemplate');
    
            for (var i = 0; i < 10; i++) {
    
                addPage(i);
            }
        });
    
    }
    
    function addPage(i) {
    
        myDatas.push(new Data({ someProperty: 'Test' + i }));
    
    }
    })();

    default.css

    .content {
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        display: block;
        height: 100%;
        overflow-x: auto;
        ;
        width: 100%;
        z-index: 0;
    }
    
    .content article {
            /* Define a multi-column, horizontally scrolling article by default. */
            column-fill: auto;
            column-gap: 80px;
            column-width: 480px;
            height: calc(100% - 183px);
            margin-left: 120px;
            margin-top: 133px;
            width: 480px;
            color: black;
    }

    I can't understand why? I want to use flipview inside article. Can you help me?

    Wednesday, April 17, 2013 3:25 AM

Answers

  • Try placing #myFlipView into container with css rule "break-inside: avoid;"

    Sample:

     <div style="break-inside: avoid;">

     <div id="myFlipView" data-win-control="WinJS.UI.FlipView" style="width:  500px; height:  500px; background-color: red;"></div>

    </div>


    It fixed this problem for me.

    Sunday, September 22, 2013 12:04 PM

All replies

  • I am taking a look at this....The issue only seems to happen if there is no text above the flipview control, if there is text above the flipview control, then the flipping works fine. I will get back to you on this...

    Thanks,

    Prashant.


    @prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog, Windows Store & Phone Developer Solutions

    Friday, April 19, 2013 1:13 AM
    Moderator
  • I think the issue because flipview inside article,because if i put flipview outside article ,flipview works fine. But i want flipview inside article so i don't know why.
    Friday, April 19, 2013 2:59 AM
  • Up                                                             .
    Wednesday, May 08, 2013 7:56 AM
  •  In your code "myDatas" seem to be empty at the time of assigning it s datasource to the flipiew. try placing the for loop before

    flipView.itemDataSource = myDatas.dataSource;.

    Thursday, May 09, 2013 2:46 PM
  • Try placing #myFlipView into container with css rule "break-inside: avoid;"

    Sample:

     <div style="break-inside: avoid;">

     <div id="myFlipView" data-win-control="WinJS.UI.FlipView" style="width:  500px; height:  500px; background-color: red;"></div>

    </div>


    It fixed this problem for me.

    Sunday, September 22, 2013 12:04 PM