Monaca Onsen UI Discord Chat Github Repo

Unable to show navbar on Android via Phonegap



  • 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.