Navigation

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

    rcpinheiro

    @rcpinheiro

    1
    Reputation
    32
    Posts
    1697
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    rcpinheiro Follow

    Posts made by rcpinheiro

    • RE: How to prevent a page from scrolling?

      @markus said in How to prevent a page from scrolling?:

      $(".page__content").css(“overflow”,“none”);

      Thanks! That alone won’t work but led me to a solution:

      var height;
      
      function lockScroll()
      {
         height=$(".page__content").css("height");
         $(".page__content").css("height","100%");
         $(".page__content").css("overflow","none");
      }
      
      function unlockScroll()
      {
         $(".page__content").css("height",height);
         $(".page__content").css("overflow","auto");
      }
      

      Problem solved!

      posted in Onsen UI
      R
      rcpinheiro
    • How to prevent a page from scrolling?

      Hi!
      I have a project when the user clicks on a link, a fix div is shown over the page. The problem is that I couldn’t find a way to stop the content underneath from scrolling, which can be distracting.
      Here’s what I tried:

      $(".page__content").on('scroll',function(ev) { ev.preventDefault(); });
      

      That didn’t work so I tried another strategy:

      var divScroll=$(".page__content").scrollTop();
      
      $(".page__content").on('scroll',function(ev) {
          $(".page__content").scrollTop(divScroll);
          ev.preventDefault();
      });
      

      On a desktop this works great but on mobile when the user scrolls, the page starts scrolling and then jumps. It’s very distracting.

      Anyone found a way to solve this? Thanks in advance!

      posted in Onsen UI
      R
      rcpinheiro
    • RE: Change animation of ons-splitter

      @emccorson Thanks a lot!

      posted in Onsen UI
      R
      rcpinheiro
    • Change animation of ons-splitter

      Hi!
      Is there a way to change the animation of the ons-splitter menu?
      If not, anyone knows what functions needs to be changed to change the splitter behaviour? Thanks in advance.

      posted in Onsen UI
      R
      rcpinheiro
    • RE: Integrating Monaca with API.AI

      Just a quick reminder to whomever sees this: this tutorial uses DialogFlow V1 that it’s not possible to use in new Google projects and will stop working for everyone on October 23th, 2019.
      For more information: https://github.com/dialogflow/dialogflow-cordova-client

      posted in Monaca & Onsen UI Articles
      R
      rcpinheiro
    • RE: Deploying Onsen UI to android through Cordova

      @nightrobin Index.html is your entry point, where all the action is :)
      You’ll have to include Onsen Javascript, CSS, etc.
      Cordova apps are almost the same as a regular website, you just have to include cordova.js and only use local relative paths. The rest is the same.

      Here’s an example of a valid Cordova index.html using Onsen:

      <!DOCTYPE html>
      <html>
      <head>
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
        <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
        <script src="cordova.js"></script>
      </head>
      <body>
        <ons-button onclick="alert('Hello World!')">Click Me</ons-button>
      </body>
      </html>
      

      If you’re lost, give Monaca.io a spin, it does all the nitty-gritty work for you.

      posted in Developer Corner
      R
      rcpinheiro
    • cordova-plugin-googlemaps: error on browser

      Hi!
      I’m trying to develop an app that uses cordova-plugin-googlemaps to access Google Maps but in the browser preview I always get the error “Cannot read property ‘google’ of undefined”.
      Here’s the JS:

      document.addEventListener("deviceready", function() {
          console.log("This is never called in browser");
      });
      
      document.addEventListener("init", function (event) {
        if (event.target.id=='home') {
            var mapDiv = document.getElementById("map");
            // Next lines = error "Cannot read property 'google' of undefined"
            window.plugin.google.maps.environment.setEnv({
              'API_KEY_FOR_BROWSER_RELEASE': '<KEY>',
              'API_KEY_FOR_BROWSER_DEBUG': ''
            });
            var map = window.plugin.google.maps.Map.getMap(mapDiv);
        }
      });
      

      The HTML:

      <ons-navigator swipeable id="myNavigator" page="home.html"></ons-navigator>
      
      <ons-template id="home.html">
      	<ons-page id="home">
      		<ons-toolbar>
      			<div class="center" class="white">Map App</div>
      		</ons-toolbar>
                      <p>Hi, Onsen with Google Maps!</p>
      		<div id="map" style="width:100%;height:500px"></div>
      	</ons-page>
      </ons-template>
      

      Since deviceready() also is not called, I think the problem must be with the plugin although the documentation says browser is supported (it uses Google Maps V3 API)

      Note: this is a brand new project and besides cordova-plugin-googlemaps, no other third-party plugin are installed.

      I haven’t tested yet on a real device but I need desperately browser preview or the development will be a pain…
      Thanks in advance!

      posted in Monaca Tools
      R
      rcpinheiro
    • Onsen and Google's AMP

      Is it possible to create valid AMP pages using Onsen?
      If not, is it planned for future versions?

      posted in Onsen UI
      R
      rcpinheiro
    • Autocomplete for ons-search-input

      Hi!
      Has anyone been able to use a autocomplete feature with ons-search-input? I’ve tried a few scripts and don’t work or the results require quite a bit of CSS kludges.
      Thanks in advance!

      (Note to Onsen developers: autocomplete would be great in the next release)

      posted in Onsen UI
      R
      rcpinheiro