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.