locked
listview and fullscreen display

    Question

  • Does anyone know, how to display fullscreen a selecton from listview.

    This i working. I have a list from listview, and I can select one entry from the list. Through addeventlistener and function 'getclick,

    I can now display the phtoto at the bottom of the list. I would like to have it displayed in fullscreen, and nothing around it.

    Thanks

    <div id="host">

      <div id="host">
        <div id="lv" data-win-control="WinJS.UI.ListView"
                     data-win-options="{ itemDataSource: data.items.dataSource,
                                         itemTemplate: select('#tmpl'),
                                         layout: {type: WinJS.UI.GridLayout} }" />
        </div>

        <img id="picphoto" src="images/logo.png" />

            var lis = addEventListener("click", getclick, false);

        function getclick() {
            var esrc = window.event.srcElement;
            document.getElementById("picphoto").src = esrc.src;
        }

    Saturday, April 27, 2013 6:54 PM

Answers

  • Used flipview instead.

    • Marked as answer by my-ped01 Saturday, May 11, 2013 10:25 PM
    Saturday, May 11, 2013 10:25 PM

All replies

  • try add the image control into a popup of the size same as the screen and assign the source of the image control of the item clicked and the open the popup.

    Hope this solves your problem

    Sunday, April 28, 2013 2:53 AM

  • Hi my-ped01,

    You can just define a custom <div> which use absolute or fixed position mode to occupy the entire screen and show it (so that it will hide the other UI elements) as a full-screen popup. The custom splashscreen sample has used this means for display a custom splash screen(a full-screen <div>). You can take a look at it for some ideas:

    #Splash screen sample
    http://code.msdn.microsoft.com/windowsapps/Splash-screen-sample-89c1dc78


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, April 29, 2013 1:43 AM
    Moderator
  • How do I make it a 'full screen div'?  It took up half the screen and was hidden below the under the listview row of pictures.

    <body role="application">>
        <div id="extendedSplashScreen" class="divnam">
            <img id="extendedSplashImage" src="images/splash-sdk.png" alt="altphoto"/>
        </div>

      <div id="tmpl" data-win-control="WinJS.Binding.Template">
        <section>
          <img src="#" data-win-bind="src: url" />
          <div>
            <span class="name" data-win-bind="innerText: name"></span>
            <br />
            <span class="date" data-win-bind="innerText: date"></span>
          </div>
        </section>
      </div>

      <div id="host">
        <div id="lv" data-win-control="WinJS.UI.ListView"
                     data-win-options="{ itemDataSource: data.items.dataSource,
                                         itemTemplate: select('#tmpl'),
                                         layout: {type: WinJS.UI.GridLayout} }" />
      </div>
    </body>
    </html>

    Monday, April 29, 2013 5:23 AM
  • Hi my-ped01,

    From the markup you pasted above, seems you've tried the splashscreen sample, correct?

    If so, you need to copy the css styles also. For example, the sample uses the following html fragment for the splashscreen div (in the default.html file):

    <div id="extendedSplashScreen" class="extendedSplashScreen hidden">
            ......    
    </div>

    and in the default.css file, you can find that it uses absolute position  to make the div occupy the entire screen:

    .extendedSplashScreen {
        background-color:#00b2f0;
        height: 100%;
        width: 100%;
        ;
        top: 0px;
        left: 0px;
        text-align: center;
    }
    
    .extendedSplashScreen.hidden {
        display: none;
    }
    


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, April 29, 2013 6:58 AM
    Moderator
  • Yes, I copied css

    .extendedSplashScreen {
        background-color:#00b2f0;
        height: 100%;
        width: 100%;
        ;
        top: 0px;
        left: 0px;
        text-align: center;
    }
    #extendedSplashImage {
        ;
    }

    .extendedSplashScreen.hidden {
        display: none;
    }

    Monday, April 29, 2013 7:25 AM
  • .extendedSplashScreen {
        background-color:#00b2f0;
        height: 100%;
        width: 100%;
        ;
        top: 0px;
        left: 0px;
        text-align: center;
    }
    #extendedSplashImage {
        ;
    }

    .extendedSplashScreen.hidden {
        display: none;
    }

    Monday, April 29, 2013 7:26 AM
  • Used flipview instead.

    • Marked as answer by my-ped01 Saturday, May 11, 2013 10:25 PM
    Saturday, May 11, 2013 10:25 PM