Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. David Hope
    D
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    David Hope

    @David Hope

    1
    Reputation
    17
    Posts
    1028
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    David Hope Follow

    Posts made by David Hope

    • RE: onsen ui 2.6.1 has no styling on Android 4.2.2?

      @Fran-Diox said:

      ons-template

      Even ons-template doesn’t work! still looks the same on Android device!

      why the older android is not supported anymore?

      what version of Android is supported now?

      posted in Onsen UI
      D
      David Hope
    • onsen ui 2.6.1 has no styling on Android 4.2.2?

      I’ve just migrated from the old onsen ui to the 2.6.1.

      Everything works fine in browsers (tested in FF and Chrome) and iOS.

      However, in Android device (phonegap app) it doesn’t have any styling at all! in fact, nothing works properly and I don’t understand why.

      This is exactly what I have in my project:

      https://codepen.io/anon/pen/yzGBzG?&editors=101

      and this is my entire code:

      
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="format-detection" content="telephone=no">
       
      <!--<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">-->
        
        
        <title>Onsen UI</title>
      
        <!-- JS dependencies -->
      <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
      <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css">
      
      <script src="https://unpkg.com/onsenui/js/onsenui.js"></script>
        
        
        <script src="js/jquery.min.js"></script>
       
        
        <script src="cordova.js"></script>
      
      
      <script>
      document.addEventListener("show", function(event){
      
      if(event.target.id ==='Tab2') {
      
      alert();
      
      }
      
      });
      
      </script>
      
      <style>
      
      </style>
      
      </head>
      <body>
      
      <!-- App layout -->
      
      <ons-page>
        <ons-toolbar>
          <div class="center">Tab 1</div>
        </ons-toolbar>
      
        <ons-tabbar swipeable position="auto">
          <ons-tab page="tab1.html" label="Tab 1" icon="ion-home, material:md-home" badge="7" active>
          </ons-tab>
          <ons-tab page="tab2.html" label="Tab 2" icon="md-settings" active-icon="md-face">
          </ons-tab>
        </ons-tabbar>
      </ons-page>
      
      <template id="tab1.html">
        <ons-page id="Tab1">
          <p style="text-align: center;">
            This is the first page.
          </p>
        </ons-page>
      </template>
      
      <template id="tab2.html">
        <ons-page id="Tab2">
          <p style="text-align: center;">
            This is the second page.
          </p>
        </ons-page>
      </template>
      
      
      <script>
      ons.disableAutoStyling();
      </script>
      </body>
      </html>
      

      This is a screenshot of how it looks on my Android device:

      0_1508255543755_Screenshot_2017-10-17-16-41-54.png

      could someone please advice on this?

      Am i missing something?

      This works on iOS and Browsers.

      Thanks in advance.

      posted in Onsen UI
      D
      David Hope
    • RE: ons-toolbar gets pushed to the top and disappears when the keyboard is showing on iOS!

      @Fran-Diox Yeah, i found those before and in fact I tried them (both Javascript solution & the Plugin) but I still don’t get the desired effect!

      When I use the Javascript solution that is mentioned in stackoverflow, the webview is jumpy when the input is focused and the plugin causes the webview to stop shrinking…

      Basically the desire effect is this:

      The ons-toolbar stays in its position which is right at the top of the page and then everything bellow the ons-toolbar (i.e. the page content etc) to shrink as normal.

      This is how any other app that i’ve seen do it.

      posted in Onsen UI
      D
      David Hope
    • RE: ons-toolbar gets pushed to the top and disappears when the keyboard is showing on iOS!

      @munsterlander said:

      Have you tried updating Onsen? It is on version 2.6.1 which is a long way from the rc you are using.

      No, i haven’t tried updating the onsen. so do you think that this issue only exists in the older versions?

      posted in Onsen UI
      D
      David Hope
    • ons-toolbar gets pushed to the top and disappears when the keyboard is showing on iOS!

      Hello,

      I’ve been searching for a while for a solution to this problem and even though others had the same issue but no one actually provided a working solution to this issue!

      Basically, the **ons-toolbar **gets pushed to the top and disappears when the keyboard is showing on iOS.

      I don’t have this issue on Android. its only the iOS that causes this issue.

      I tried the followings and nothing worked so far:

      <ons-toolbar style="position:sticky !important;">
      

      and

      <ons-toolbar style="position:fixed !important;">
      

      i’m using onsenui - v2.0.0-rc.15

      Could someone please be kind enough to advice on this issue ?

      a working solution would be appreciated or is this even possible with onsenui at all?

      Thanks in advance.

      posted in Onsen UI
      D
      David Hope
    • RE: uncaught exception: pushPage is already running.

      @Fran-Diox I create a click function for the class name.

      example:

      $('.className).on... 
      

      @4dnan Yeah, using the class name… i thought about using your suggestion lastnight but I totally forgot about it lol… Clever idea that is…

      posted in Onsen UI
      D
      David Hope
    • RE: uncaught exception: pushPage is already running.

      @misterjunio I just figured it out.

      When I use inline onclick events to navigate to another page using pushPage, everyhting works fine but when I use a global click event that error pops up again.

      That is very strange.

      Any particular reason for it?

      posted in Onsen UI
      D
      David Hope
    • uncaught exception: pushPage is already running.

      Hi,

      I’m constantly getting this error:

      uncaught exception: pushPage is already running.
      

      I have been trying to figure this out and find the source of it for over 5 hours and I can’t and I’m pulling my hair out!

      I’m simply using this code to change pages:

      document.querySelector('#myNavigator').pushPage('individual.html',{animation:'slide'});
      

      Could someone please advice on this issue?

      posted in Onsen UI
      D
      David Hope
    • RE: JavaScript Stops Working After Pushing, Works Again When Resetting Navigator.

      @4dnan No problem.

      I have no idea why to be honest but I spent hours and finally figured that out.

      I suspect its because the DOM doesn’t get removed completely when you change pages! Because when I inspect the elements in the console, I see the old DOM elements in there (greyed out)!

      which means the same ID is in the page a multiple times thus javascript/jquery cannot select the element(s) with an ID so the Class names works.

      There is another thing that I could suggest is to use

      document.addEventListener("init", function(event){
      
      
      if(event.target.id ==='home') {
      
      ///YOUR CODE HERE////
      
      }
      
      });
      

      and if that doesn’t work, you can use

      
      document.addEventListener("show", function(event){
      
      
      if(event.target.id ==='home') {
      
      ///Your code here///
      
      }
      
      });
      

      As @Fran-Diox rightly said it, its all about the timing issue.

      posted in Onsen UI
      D
      David Hope