locked
Displaying the nav buttons in flip view

    Question

  •  Hi Team,

     I have implemented the flip view in my windows app.

    prev and nav buttons are visible only when the we hover the mouse on the image.

    My manager want me to display the buttons every time , so kindly let me know how to make those buttons visible.

    I see that the visibility property has been set for the .win-leftnav and .win-navright classes.

    Thanks & Regards

    Sai krishna

    Tuesday, September 30, 2014 2:22 PM

Answers

  • Hi Sai595,

    Looks you are correct, seems I mislead you. I tested my suggestion it does not work. Sorry for the wrong direction.

    I looked into ui.js, I found that the FlipView button visibility is programmatically controlled by code. If we disable some function (_fadeOutButton() method) in the _pageManager, buttons will not be hidden.

    I looked further into the code, that seems _pageManager will be called everywhere when the page is reload, remove or change. Probably remove the code in _pageManager seems to be a good choice.

    Looks like it is a mechanism for FlipView. I think you may modify the ui.js file to remove the FlipView button hidden code, and then ref your js file manually.

        <script src="/js/myui.js"></script>
        <!--<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>-->

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, October 03, 2014 2:40 PM
    Moderator

All replies

  • Hi Sai,

    It's easy, in the documentation: FlipView object there is a section Styling the ListView

    We could display the win-navbutton by setting its CSS as visible.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, October 01, 2014 1:52 AM
    Moderator
  • Hi Jamles,

    I have already mentioned the below CSS but it still set the visibility:hidden for the navright and navleft buttons of flip view

     below code is mention in the css file of the page

    .win-navleft, .win-navright{

    }

    In the javascript page I tried to get the object of the navright and change the aria-hidden attribute but still no luck.

    var navright = document.queryselector(".win-navright").winControl;

    navright.setAttribute("aria-hidden",false);

    Kindly let me know where I am going wrong

    thanks & Regards

    sai krishna

       


    • Edited by Sai595 Wednesday, October 01, 2014 1:56 PM
    Wednesday, October 01, 2014 5:26 AM
  • Hi Sai595,

    Looks you are correct, seems I mislead you. I tested my suggestion it does not work. Sorry for the wrong direction.

    I looked into ui.js, I found that the FlipView button visibility is programmatically controlled by code. If we disable some function (_fadeOutButton() method) in the _pageManager, buttons will not be hidden.

    I looked further into the code, that seems _pageManager will be called everywhere when the page is reload, remove or change. Probably remove the code in _pageManager seems to be a good choice.

    Looks like it is a mechanism for FlipView. I think you may modify the ui.js file to remove the FlipView button hidden code, and then ref your js file manually.

        <script src="/js/myui.js"></script>
        <!--<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>-->

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, October 03, 2014 2:40 PM
    Moderator