Intel AppFramework - sidemenu not working

I am having problems with the Intel AppFramework. I can not seem to get the sidemenu working.

It is working fine on the demo you can download from the AppFramework website, but no matter how well I am trying to mimic it - I can't get the sidemenu to work on my project.

Everything is working fine until I add tags as that is how you make a sidemenu. When those tags are added the whole app will render blank / white and an error pops up into console saying "Uncaught TypeError: Cannot read property 'hideScrollbars' of undefined".

It has something to do with appframework.ui.js' line 1100 that saysthis.scrollingDivs.menu_scroller.hideScrollbars();

So it seems like this menu_scroller is undefined for some reason.

This is as much code as I can give you, it is the index.html of my AppFramework / Phonegap app: http://pastebin.com/dXtTeiKx

Console does not say about any missing files (except cordova.js which is fine because PC) nor does it throw any other JavaScript errors other than the one I told you, so I would assume there is no need for me to post the code in every other file.

I have tried the tags with AppFramework version 3.0.

I have also tried switching the JavaScript includes around a bit, including appframework.ui before appframework and putting some includes to the bottom of the index.html, but none if these have resolved the issue so far.

I also tried removing all excess css and js includes but that did not work either.

This has lead me to believe there is some kind of bug within the AppFramework itself or I am just doing something horribly wrong or have overseen something.

Here is the documentation for the AppFrameworks sidemenu: http://app-framework-software.intel.com/documentation.php#afui/afui_side and as you can see, it should not require anything else than including that nav thing to the source, hell I even tried copying the whole

<nav id="leftMenu" class="view"> <header><h1>Left Menu</h1></header> <div class="pages"> <div class="panel active"> This is the left menu </div> </div> </nav>

...but that changed nothing.

So I have successfully resolved the issue by myself. I don't know what kind of wizardry AppFramework does on the background, but the issue that caused the nav not work for me was that I had a panel defined like so:

<div data-title="Main menu" id="menu" class="panel" data-footer = "main_footer" data-header = "main_header" data-nav = "main_leftmenu">
    This is the main menu
</div>

The nav was correctly defined like so:

<nav class = "view" id = "main_leftmenu">
    <ul class = "list">
        <li><a href = "#">asd</a></li>
        <li><a href = "#">asd</a></li>
        <li><a href = "#">asd</a></li>
    </ul>
</nav>

The problem was with the panel like I said; as you can see it has an id of "menu" - this is what broke the nav. "Menu" as an id for a panel is most likely a preserved word or something, so it should not be used.

I am suggesting that if you use AppFramework, you should prefix everything (especially panels) with something like so:

<div data-title="Main menu" id="f_main_menu" class="panel" data-footer = "main_footer" data-header = "main_header" data-nav = "main_leftmenu">
    This is the main menu
</div>

Here I prefixed the "main" panel with "f_" prefix (there is "_main" as well, but that's just extra so it tells about the panel more).

So in short

Prefix your panel ids and do not give any of them an id of "main" or "menu". Use something like "x_main" and "x_menu" instead.