Jackson

Jackson

I’ve contacted them twice and no response at all!

Is this normal with Monaca?

I’m a paying member so I expect a reply when I have raised an issue!

Jackson

I’m having the same issue!

have you found any solution for this?

is this happening in a real device as well?

Jackson

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.

Jackson

@Fran-Diox said:

@Jackson ons-splitter just 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 use ons-navigator. You can combine both as explained in the tutorial.

Also, resetToPage is 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?

Jackson

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.

Jackson

@munsterlander you are a god send mate… I love you and I love onsen ui… :)

Jackson

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.

Jackson

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.

Jackson

@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!

Jackson

@Jackson

Posts made by Jackson