Hello,
Today I’ve experienced an issue with iPhone XS Max.
I’ve noticed that the top toolbar goes under the iPhone’s status bar.
So, I’ve put this code in my app:
if (ons.platform.isIPhoneX()) { // Utility function
// Add empty attribute to the <html> element
document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
}
But this will create a huge white bar at the top of the screen and pushes the whole ```
ons-page
is there a way to resolve this issue?
Thanks in advance.@Fran-Diox said:
@Jackson
ons-splitterjust wraps your app in a frame that gives you a side menu. It’s not its purpose to offer animations. For that, you will need to useons-navigator. You can combine both as explained in the tutorial.Also,
resetToPageis navigator’s method, not splitter’s.
Thank you for the reply. is there any way to hide that ‘scrollbar’ that appears at the bottom of the page between the page transitions?
maybe using jquery or CSS?
Hello,
I’m just trying to add a slide animation between my page transitions but I can’t seem to be able to get it to work for some reason.
The javascript that I’m using is like this:
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));
content.resetToPage(page, { animation: 'slide' });
};
and this is my entire page:
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable>
Home
</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>
About
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>
<ons-template id="home.html">
<ons-page modifier="main">
<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">
Main
</div>
</ons-toolbar>
<p style="text-align: center; opacity: 0.6; padding-top: 20px;">
</p>
</ons-page>
</ons-template>
<ons-template id="about.html">
<ons-page modifier="main">
<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">
About
</div>
</ons-toolbar>
</ons-page>
</ons-template>
could someone please advise on this issue?
any help would be apprecitaed.
Thanks in advance.
@munsterlander you are a god send mate… I love you and I love onsen ui… :)
Hi,
I’m trying to trigger the back button by clicking on another button.
I’m simplly using jQuery click function to do this.
issue that i have is that my code only works in browsers but when I create a phonegap APP, the code doesn’t work at all!
This is my code:
document.addEventListener("show", function(event){
if(event.target.id=='page2') {
$(".bak").on('click', function(){
/*$( ".back-button" ).trigger( "click" );*/
$('#backing').click();
});
}
});
and this is my Back button:
<ons-back-button id="backing">Back</ons-back-button>
and finally this is my button that I click on to trigger the back button:
<img class="bak" width="70%" src="back-btn.png" style="float:left;">
Could someone please advise on this issue?
Thanks in advance.
Hell,
I’ve created an app and everythign works absolutely fine.
However, when I load my APP and then play around with it and then close it and re-open it, it looks like the styling (css stuff) loads a bit slow or something in that relation because I see the html page (index.html) without any styling for a second or 2 and then everything goes back to normal!
This issue only happens if I load the app the second time i load the app. I assume that this happens all the time but the first time I load my APP, there is my splashscreen which displays for 10 seconds which allows my entire html page including all the js and css files to load properly thus I won’t see the un-styled app/page but the second time I load the app, I don’t see the splashscreen and the first thing I see is the main page of the app (inde.html) and as I said above, it is un-styled for a second or two!
I hope that makes sense.
Has anyone encountered this issue and what are the solutions for this?
Thanks in advance.
@munsterlander Currently I’m doing it exactly what you’ve shown in your answer in other thread which is using localstorage etc… But i thought there must be an easier way of doing this which is accessing the page attribute!
Hi,
I’m trying to set the ons-navigator page attribute dynamically using jQuery/Javascript but the attr doesn’t really work for some reason!
This is my code:
var currentPage = localStorage.getItem('curPage');
if(currentPage =='' || curPage ===null ){
var ba = $("#navi").attr("page");
alert(ba);
}else{
}
But I always get undefined in the **alert(ba); **and it never changes the navi’s page attribute!
Is this even possible and if so how?
Thanks in advance.
Hello,
I’m trying to open the ons-modal in my page using jquery but I really don’t know why I’m getting the following error:
ReferenceError: modal is not defined
This is a working Fiddle with my code: https://jsfiddle.net/u3wy27s7/3/
And when i add ons.bootstrap(); to the top of my code, I get the following error:
TypeError: ons.bootstrap is not a function
Could someone please point me in the right direction?
Thanks in advance.