Hide Onsen Toolbar
-
I have ran into a somewhat interesting issue, I am sure I am just passing this incorrectly, but I have ran into an issue. I have a small app that uses Onsen Navigator. It consists on 3 pages, index.html, locate.html, and error.html. I am attempting to hide the toolbar on locate.html if the user has an iPhoneX. I had it working as long as the index.html DOES NOT have a Onset Toolbar itself. When I would push the locate.html, it would determine if the device was an iPhoneX and successfully hide the toolbar without issue. However, if the index.html has a Onset Toolbar, when I push the locate.html, the toolbar will no longer hide itself. It defiantly has something to do with the fact that there is now a toolbar in the index.html, if I remove that toolbar (which I actually need for the simple reason of having a toolbar-button), the hiding of the toolbar on locate.html again works as it should. I am baffled as to how to correct this issue. If anyone has any suggestions, I would appreciate it. Thanks in advance.
-
Hi,
This is a quite difficult question, I modify the onsenui example ‘Stack Navigation’ as follows.
<ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator> <template id="page1.html"> <ons-page id="page1"> <ons-toolbar> <div class="center">Page 1</div> </ons-toolbar> <p>This is the first page.</p> <ons-button id="push-button">Push page</ons-button> </ons-page> </template> <template id="page2.html"> <ons-page id="page2"> <ons-toolbar modifier="transparent"> <div class="left"><ons-back-button>Page 1</ons-back-button></div> <div class="center"></div> </ons-toolbar> <p>This is the second page.</p> <ons-button onclick="document.querySelector('#myNavigator').popPage()">Pop Page</ons-button> </ons-page> </template>
document.addEventListener('init', function(event) { var page = event.target; if (page.id === 'page1') { document.querySelector('ons-toolbar').show(); page.querySelector('#push-button').onclick = function() { document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}}); }; } else if (page.id === 'page2') { if (true) { page.querySelector('.toolbar').hide(); } else { page.querySelector('ons-toolbar').setAttribute('modifier', '') } } });
You can set the condition from true to false, you will find the page 2 toolbar will display and not display accordingly.
if everything is fine, you now change if(true) to if (ons.platform.isIPhoneX()) as follows:
if (ons.platform.isIPhoneX()) { page.querySelector('.toolbar').hide(); } else { page.querySelector('ons-toolbar').setAttribute('modifier', '') }
Best Regards
Gobi
-
Hi
document.querySelector(‘ons-toolbar’).show() is not necessary.
document.addEventListener('init', function(event) { var page = event.target; if (page.id === 'page1') { page.querySelector('#push-button').onclick = function() { document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}}); }; } else if (page.id === 'page2') { if (true) { page.querySelector('.toolbar').hide(); } else { page.querySelector('ons-toolbar').setAttribute('modifier', '') } } });
Best Regards
Gobi