I have a login page and a signup page for my app. Whenever I navigate from the login to signup, I want the animation to be a simple slide. This happens, however on the right-hand side of the screen a shadow is thrown all the way down the screen. It goes away after the animation is over, but it looks really bad. This happens while navigating to the signup page, and when I hit cancel and go back to login. Does anyone have any clue why this could be?

Also, the documentation is incomplete. I was wondering if it might be something to do with the options. animationOptions. I was wondering if it had anything to do with the “ease-in” value for the “timing” key. Problem is, I can’t find any alternatives to “ease-in” anywhere. What are the other options for “timing”?

@munsterlander @Fran-Diox Moving the event listener for ‘init’ to be outside the ‘deviceReady’ event listener worked. I find that strange since I was under the impression the ‘init’ event will register as fired even if you add the listener after the event actually fired.

But it’s working now, so thank you for the assistance! Both of you.

@munsterlander sadly that didn’t work either.

The weird thing is, if I do that in the browser, it works. I.e. no “deviceReady” event. In the browser the init event is received, just not on the emulator or on my device. There are no errors in the console(browser) about libraries or functions clashing or any of that.

@munsterlander here is my implementation of my onDeviceReady event(s):

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    // - Event Listeners for main screen buttons(divs).
    document.addEventListener('init', function(event) {
    if (event.target.matches('#main')) {
            mainPageEvents();
        } else if(event.target.matches('#page1')) {
            page1PageEvents();
        } else if(event.target.matches('#page2')) {
            page2PageEvents();
        }
    });	
}

I’ve tried uninstalling and reinstalling the plugin, tried removing and reading the platform, but nothing works.

When the plugin is not installed, the above code works. When I install it, it doesn’t. If I do the following, the speak fires:

function onDeviceReady() {
    // - Event Listeners for main screen buttons(divs).
    speak(params);
    document.addEventListener('init', function(event) {
    if (event.target.matches('#main')) {

But if I do the following, it doesn’t:

function onDeviceReady() {
    // - Event Listeners for main screen buttons(divs).
    document.addEventListener('init', function(event) {
        speak(params);
    if (event.target.matches('#main')) {

Which to me says that the ‘init’ event never actually fires. Again, it does fire with no plugin installed, but with plugin installed, it doesn’t.

@munsterlander I’m not sure on the console, will check in just a bit. The plugin I’m using is the Text-to-Speach plugin.

I am loading the Onsen library separately, i.e. I’m not using Monaca. If I’m not mistaken, that allows me to use 3rd party plugins.

Without the plugin, my code works perfectly. After adding the plugin, the following does not fire.

document.addEventListener('init', function(event) { ...

If I call the plugin right before that, from within the onDeviceReady function, the plugin functionality works just fine, but the init function does not work. Thus, it’s not the onDeviceReady event that does not work, it does work, it’s the init event that does not fire.

Any ideas as to why this is?

@munsterlander
Thanks again! Sorry, I saw you answered my question on the other thread as well.

Downloaded it, will implement it now.

Thanks!

@munsterlander
Thanks, I have been breaking my brain for the last week trying to figure this one out!

How then can I simply add Onsen-UI 2.0 to my existing Cordova project?

Well as the title asks, does Onsen-UI 2.0 force you to use promises when calling asynchronous functions?

Also, how would I add Onsen-UI 2.0 to an existing Cordova application?