Navigation

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

    mcombatti

    @mcombatti

    0
    Reputation
    3
    Posts
    404
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    mcombatti Follow

    Posts made by mcombatti

    • RE: Load external content into Onsen

      @rafaguilarsol said in Load external content into Onsen:

      Hello.
      I’m trying to load the content of an external file (located in a webserver) into an Onsen UI app. I’m using onsenui - v2.10.8 - 2019-04-01.
      This is my page code:
      <ons-page id=“eventos”>
      <script>
      // events list loader
      var xhttp = new XMLHttpRequest();
      var url = “http://manosdemadre.org/app/eventos.txt”;

      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          // Typical action to be performed when the document is ready:
          document.getElementById("noticias").innerHTML = xhttp.responseText;
        }
      };
      xhttp.open("GET", url, true);
      xhttp.send();
      

      </script>

      <img src=“img/eventos.jpg” width=“100%” height=“auto” alt=“eventos” />

      <div class=“page-content”>
      <div class=“title”>¿Qué hacemos?</div>

      <p>Los eventos que se realizan son espacios de encuentro dedicados a la oración de reparación por las faltas, pecados y desagravios cometidos contra el Sagrado Corazón de Jesús, contra el Inmaculado Corazón de María y, especialmente, contra la Sagrada Eucaristía.</p>
      
      <div class="block">
        <ons-list>
          <ons-list-header>Próximos eventos</ons-list-header>
          <div id="noticias">
          </div>
        </ons-list>
      </div>
      

      </div>
      </ons-page>

      Check cross-origin policies.

      posted in Onsen UI
      M
      mcombatti
    • RE: way to add onsearch event for ons-search-input component

      Read the docs…

      <ons-search-input placeholder="Search" onchange="MySearchFunction(this.value)"></ons-search-input>
      

      Can also add the event using addEventListener function. Or add another event such as onkeyup and listen for a specific key to trigger the search event. Could even add a timer to listen for keystrokes and live-update the search… be creative!

      posted in Onsen UI
      M
      mcombatti
    • RE: Extra tall navbar header for OnsenUI/PhoneGap app, with SVG background?

      Try something like this…

      <style>
      #bg1 {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%; 
      background-image: url("![bighd.jpg](https://videohive.img.customer.envatousercontent.com/files/241571641/bighd.jpg?auto=compress%2Cformat&fit=crop&crop=top&max-h=8000&max-w=590&s=eff7aca73a2933133204ac6800f993bf");)
      }
      </style>
      
      <ons-page id="myPage">
      <ons-toolbar style="height: 120px;" id="MainToolbar">
      <div
      	<div class="left" id="MainToolbar_leftDiv">
      		<ons-toolbar-button id="bg1" style="color: #ffffff;"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button>
      	</div>
      </ons-toolbar>
      <div id="hiddenspace" style="height: 72px;"><!--Hidden Space to Account for Header Height Increase--!></div>
      <ons-card>
          <img src="![download_image_onsenui_01.png](https://monaca.io/img/logos/download_image_onsenui_01.png") alt="Onsen UI" style="width: 100%">
          <div class="title">
            Awesome framework
          </div>
            <ons-list>
              <ons-list-header>Bindings</ons-list-header>
              <ons-list-item>Vue</ons-list-item>
              <ons-list-item>Angular</ons-list-item>
              <ons-list-item>React</ons-list-item>
            </ons-list>
        </ons-card>
      </ons-page>
      
      posted in Onsen UI
      M
      mcombatti