Settings Flyout and jQuery


  • Hi.  I am having an issue with WinJS and jQuery.  When jQuery is added to the page, it seems to be appending my settings Flyout div to the bottom of the page, rather than using an actual flyout from the side.

    I have added my settings to the with WinJS like so:


    WinJS.Application.onsettings = function (e) {    e.detail.applicationcommands = {        "about": { title: "About", href: "/www/about/about.html" },        "settings": { title: "Settings", href: "/www/settings/settings.html" }    };    WinJS.UI.SettingsFlyout.populateSettings(e);};


    <div data-win-control="WinJS.UI.SettingsFlyout" id="settingsSettingsFlyout" aria-label="Options" data-win-options="{settingsCommandId:'settings', width:'narrow'}">

    Has anyone else experienced this?

    www.techtronic.us - My App www.spaceweatherapp.com

    Wednesday, August 07, 2013 2:53 PM

All replies

  • Hello,

    As you described, I also create a sampe for Settings Flyout with jquery function working and I was not able to reproduce the same issue. Could you share a simple sample that can reproduce the issue for us to troubleshotting?

    For more details about WinJS.UI.SettingsFlyout object please refer MSDN article

    #WinJS.UI.SettingsFlyout object



    Yanping Wang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, August 08, 2013 10:04 AM
  • I actually have to append WinJS to my pages like so:

    var winJsBaseScript = document.createElement('script');
    winJsBaseScript.src = '///Microsoft.WinJS.1.0/js/base.js';

    var winJsUiScript = document.createElement('script');
    winJsUiScript.src = '//Microsoft.WinJS.1.0/js/ui.js';

    i feel like this may be the cause but not sure.

    www.techtronic.us - My App www.spaceweatherapp.com

    Thursday, August 08, 2013 2:13 PM
  • This is the problem.  If I append WInJS to my head of each new page using  document.head.appendChild..... , then jQUery is loaded after, it appends the Flyout to the bottom of the page rather than from the right.  

    www.techtronic.us - My App www.spaceweatherapp.com

    Friday, August 09, 2013 2:51 PM