Unable to show navbar on Android via Phonegap

Benny Yo

Hello,

I am trying to get a navbar going at the top of the app without luck.
In the chrome browser it shows but not via Phonegap, any idea why please?
I can get the swipe bar to work when I move my finger from left to right but no navbar not even the message “swipe right to open the menu” on the home page. I don’t get it.
All my CSS and JS files are linked correctly.

Here is my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="css/onsenui.min.css">
    <link rel="stylesheet" href="css/onsen-css-components.min.css">
    <link rel="stylesheet" href="css/ionicons/css/ionicons.min.css">
    <script src="js/onsenui.min.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>

</head>

<body>
<ons-splitter>
    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
        <ons-page>
            <ons-list>
                <ons-list-item onclick="fn.load('index.html')" tappable>
                    Home
                </ons-list-item>
                <ons-list-item onclick="fn.load('sendreport.html')" tappable>
                    Send Report
                </ons-list-item>
                <ons-list-item onclick="fn.load('contact.html')" tappable>
                    Contact
                </ons-list-item>
                <ons-list-item onclick="fn.load('login.html')" tappable>
                    Login
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-splitter-side>
    <ons-splitter-content id="content" page="index.html"></ons-splitter-content>
</ons-splitter>

<template id="index.html">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button onclick="fn.open()">
                    <ons-icon icon="md-menu"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">
                Home
            </div>
        </ons-toolbar>
        <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
            Swipe right to open the menu!
        </p>
    </ons-page>
</template>

<template id="sendreport.html">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button onclick="fn.open()">
                    <ons-icon icon="md-menu"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">
                Send a Report
            </div>
        </ons-toolbar>
    </ons-page>
</template>

<template id="contact.html">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button onclick="fn.open()">
                    <ons-icon icon="md-menu"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">
                Contact us
            </div>
        </ons-toolbar>

    </ons-page>
</template>

<template id="login.html">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button onclick="fn.open()">
                    <ons-icon icon="md-menu"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">
                Login
            </div>
        </ons-toolbar>
    </ons-page>
</template>

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script>
    window.fn = {};

    window.fn.open = function() {
        var menu = document.getElementById('menu');
        menu.open();
    };

    window.fn.load = function(page) {
        var content = document.getElementById('content');
        var menu = document.getElementById('menu');
        content.load(page)
            .then(menu.close.bind(menu));
    };
</script>
</body>
</html>

Any idea why please? I have been on this for a good 8 hours without luck :-(

Thanks.