Navigation

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

    Best posts made by IliaSky

    • RE: Tabbar above Toolbar in Android?

      I don’t think that type of behaviour is currently officially supported. Since the tabbar is supposed to act as a container element having some part of the page going outside might cause some strange behaviour.

      The current “normal way” of achieving what you want would be:

      <ons-page>
       <ons-toolbar>
         <div id="tabbarTitle" class="center"></div>
       </ons-toolbar>
       <ons-tabbar>
         ...
       </ons-tabbar>
      </ons-page>
      

      and then changing tabbarTitle's content with javascript.


      Alternatively the “css hack” way would be something like this (codepen):

      .tab-bar--material {
        top: 51px;
      }
      .tab-bar--top__content {
        top: 0;
      }
      .tab-bar--material__content .navigation-bar--material ~ .page__content {
        top: 102px;
      }
      
      posted in Onsen UI
      IliaSky
    • RE: How to refresh the items from the on-list?

      Hi. The refresh method comes from the ons-lazy-repeat, it’s not a method of the ons-list. (also don’t forget the s)

      If you could provide us with some code (or codepen) where you can show us what you’re trying it would probably be helpful.

      By default a normal list will auto-refresh itself from angular’s ng-repeat directive. Here’s a demo to see it in action.

      Since ons-lazy-repeat is supposed to be an infinite list I would advise against actually changing the items inside it. If you want to change the items then it is better to use a normal list. (from the users perspective too - imagine you scrolled 1000 items down and then suddenly the list changes to something different)

      If I still failed to convince and you want to refresh the infinite list nonetheless then here’s how to do it:

      $scope.myDelegate.refresh(); // refreshes the list
      $scope.$apply(); // use this only if you're seeing `{{ item }}` or sth similar
      

      If I remember you were using angular 1, so this is how to do it there.
      The first line refreshes the list - it’s a method of the delegate which you provided.
      The second line should be avoided if possible. In general angular tries to automagically update everything - as long as you’re doing actions as a result of ng-click or something else which angular is aware of then you won’t need to do anything more. But if for some reason you are unable to properly inform angular then you can force it to update itself by calling $apply.

      posted in Onsen UI
      IliaSky
    • RE: Scroll event on ons-page, or any other element inside ons-page

      Hi @davidfherrerar.

      Onsen UI shouldn’t be blocking the scroll event. The scroll event just doesn’t bubble (even without Onsen UI).

      And since there is a specific element which is being scrolled, probably you’re just not attaching your listener to that element. In this case ons-page isn’t actually the element which is being scrolled. ons-page has a child .page__content which is the one which is being scrolled.

      So if you just attach the listener to the element which is being scrolled everything will be fine.

      Here’s a simple Demo of what you want to do if I understood correctly.

      posted in Developer Corner
      IliaSky
    • RE: Speed dial overlay with labels next to buttons

      I am not completely sure that I understand what you mean. I’m guessing something similar to the left canvas in the middle of this article. We don’t have anything specifically like that as technically it can be achieved with a simple fab and a div. WIth the speed-dial which we’re providing we have some specific logic for the sequence of the animations of the items.

      If you just want labels next to the inner fabs you can just add the labels together with the following css:

      .speed-dial__item {
        overflow: visible;
      }
      .speed-dial__item div {
        position: absolute;
        top: 0;
        right: 45px;
      }
      

      If you want an overlay you could add that too and just toggle it when you press the main fab.

      Here’s a Demo of both features together.

      Actually I think I’ve seen more apps with something similar to this demo rather than design in the article.

      And about your last question - yes you could show and hide the mask based on the result of isOpen(). If you use angular you could do that using the ng-show directive. However in the most basic case where you write something like ng-show="dial.isOpen()" it will change the display property directly, so even though it will work you won’t be able to create a simple transition in the opacity without more code.

      About how to make the overlay not cover the speed-dial - you need to make sure that the css property z-index of the speed-dial is higher than that of the overlay. Alternatively you could just put the overlay inside the speed-dial and it may be easier to manage in that case. You could even cheat it purely with the css :before selector, so that you don’t need an element for it. (I actually modified the demo that way in the end :D )

      posted in Onsen UI
      IliaSky
    • RE: javascript no working in <ons-template>

      Oh I didn’t know that you wanted the feature in all pages - i thought it was only for a specific page. In that case you can do something like

      document.addEventListener('pageinit', function(e) {
        var page = e.target;
        if (/* check whether there should be page scrolling functionality */) {
          var content = page.querySelector('.page__content');
          var horizontalScroll = page.querySelector(".horizontalScroll");
          var verticalScroll = page.querySelector(".verticalScroll");
      
          content.addEventListener("scroll", function(e) {
            horizontalScroll.innerHTML = "Scroll X: " + content.scrollLeft + "px";
            verticalScroll.innerHTML = "Scroll Y: " + content.scrollTop + "px";
          });
        }
      });
      

      Hint: you could use something like .onsen-sliding-menu__main to check for main content pages.

      PS: My battery is dying so this is it for today.
      PS2: I agree with @munsterlander - you should try to migrate to v2 - it’s much better :)

      posted in Onsen UI
      IliaSky
    • RE: ons-keyboard-active

      @mailpravink there might be easy way to do it (like in some way e.preventDefault()), so you could try listening for some focus-like events, but since the behaviour may be somwhat platform dependent (I remember there being some platform inconsistencies) it may not work out of the box. I could be wrong but you could still try that. If it works then everything is perfect.

      A somewhat related topic can also be found here.

      So maybe there are plugins which may help, otherwise a hacky way would be trying to focus it again, but it may not work very well either.

      And a final option would be thinking if you really need the feature - I think skype and most other chat apps do hide their keyboard when the user focuses out. On some phones the keyboard takes almost the whole screen (especially in landscape), so you should probably still give the user at least some way to hide it imo.

      Sorry if my answer wasn’t very helpful. I hope you find a solution - if you do feel free to share it here again :) Good luck! ;)

      posted in v1.x
      IliaSky
    • RE: ons-switch methods have changed?

      @munsterlander It became a simple boolean property of the switch - it’s not a function anymore. Demo (^_^)

      document.getElementById('switchID').checked = (switchVar === 'true');
      

      This should do it. If it doesn’t work it may be some sort of timing issue.

      posted in Onsen UI
      IliaSky
    • RE: Layout with ons-col and ons-row

      @gentle-ben ons-row and ons-col are useful mostly when you want a table-like layout.

      If you would like to have just some text at the bottom like copyrights or something small I would suggest trying out the ons-bottom-toolbar component - it does exactly that (docs). You may need to add some css like

      ons-bottom-toolbar { text-align: center; }
      

      but that’s pretty much it. Here’s a demo.

      You can probably get a similar result if you specify the row heights or something similar, but I think the bottom toolbar is much simpler.

      posted in Developer Corner
      IliaSky
    • RE: ons lazy repeat delegate when getting response from database

      I’m glad you managed to solve the issue.

      When you specify the delegate it must be an object and it should contain at least the countItems and configureItemScope methods.

      You seem to have already found your solution, in my opinion that is probably the best one out there.

      Alternatives may include things like loading the page with the lazy repeat only after you receive the data or calling it from configureItemScope but in a smart way.

      In general if you’re using lazy repeat it makes sense only when the number of items is around 1000+, in which case maybe you could get them from the server in chunks rather than all of them from the beginning.

      Also if you’ve already gotten something from the server you should remember it rather than making another request for it.

      So you could do something like

      var chunks = [];
      var chunkSize = 1000;
      var wordCount = chunkSize;
      
      dbService.getChunkFromDB(0).then(function(chunk){
          chunks[0] = chunk;
      });
      
      dbService.getWordCount().then(function(count){
          wordCount = count;
      });
      
      function configureItem(src, dest) {
          dest.wordFrom = src.wsource;
          dest.wordTo = src.wtranslation;
      }
      
      offw.delegate = {
          configureItemScope: function(index, itemScope) {
              var i = Math.floor(index / chunkSize);
              var j = index % chunkSize;
      
              if (i > chunks.length) {
                  dbService.getChunkFromDB(i).then(function(chunk){
                      chunks[i] = chunk;
                      configureItem(chunks[i].item(j), itemScope);
                  });
              } else {
                  configureItem(chunks[i].item(j), itemScope);
              }
          },
          countItems: function() {
              return wordCount;
          }
      };
      

      But you can see that these things look a little ugly and need changes to the server/dbService, so maybe you try out things like these only at a later point and only if you think that it’s necessary.
      It all depends on the amount of data which you’re working with.

      Anyway for now I think what you have should be enough. Just don’t forget to unindent properly ;)

      posted in Developer Corner
      IliaSky
    • RE: Hide Bars (Tab Bar and Toolbar) On Scroll

      @tbrcrl As the others mentioned we aren’t sure if and when a feature like this may be added to the core. In the meantime feel free to use something like this.

      It’s just a basic demo showing some minor tweaks in classes and styles. It may depend on your app, but I think something like it should be sufficient for most basic cases.

      Looking at the behaviour of skype and youtube android apps it seems there are minor differences. In both you can actually drag the toolbar between being shown or not and when you stop dragging it chooses its preferred state. To implement the dragging part you would need to listen for start, movement and end of the drag. So in order to keep things relatively simple I omitted that logic and only made 2 states with a small transition between them.

      As for hiding the tabbar menu - in both apps the tabs would always persist regardless of the circumstances, so maybe you shouldn’t try to hide yours. If you still want to the logic would be similar to what is shown in the upper example.

      Also the example shows js logic on the scroll event - if you just want a simple solution without any code in which the toolbar scrolls as if it’s part of the content then you can just add the attribute inline to it and you’re good to go.

      posted in Onsen UI
      IliaSky
    • RE: icon src dynamic with Angular JS

      Hi @Luis-Guilherme-Pires-Moura - it should be doable.

      Have you tried inspecting it to see the result?

      Here’s a demo of your code working.

      If I remember correctly there might be a bug where an extra fa- may be added to the icon name. I think it’s been fixed on master, but we haven’t released in a while.

      posted in Onsen UI
      IliaSky
    • RE: how to keep page scroll position ?

      To get current scroll position:

      var scroll = document.querySelector('#page1 .page__content').scrollTop;
      

      To set it:

      document.querySelector('#page2 .page__content').scrollTop = scroll;
      

      or

      document.querySelector('#myNavigator').pushPage('tempRegister', {data: '...'}).then(function(page) {
        page.querySelector('.page__content').scrollTop = scroll;
      });
      posted in Onsen UI
      IliaSky
    • RE: How to dynamically calculateItemHeight or set it to the height of the content on Lazy Repeat?

      Hi Norton,

      Lazy repeat is meant to be used for thousands of items. In the cases when you use it it will probably be a bad idea to have dynamic sizes for each item. It’s better if the size is either a constant for all items or you have several possible values (for example coming from 2 or 3 possible image sizes).

      Having dynamic sizes for each element based on text or something similar can be a hard thing to calculate without first putting it in the dom, which is a very expensive operation and would defeat the purpose of the lazy repeat. There is one exception to this rule - if all of your items are expected to have the same size you can omit providing the calculate function (in Onsen 2).

      So if you’re using Onsen 2 and expect to all items to have the same height, but don’t know the value you can leave it to Onsen to calculate it automatically.

      Otherwise you can provide a function which returns whatever height you want.

      Lets say you have 3 types small, medium and big which are changing:

      var items = [
      	{size: 'small', text: 'lorem ipsum...'},
      	{size: 'medium', text: 'dolor sit ...'},
      	{size: 'big', text: 'amet aleq...'}
      ];
      
      var sizes = {
      	small: 40,
      	medium: 70,
      	big: 100
      };
      
      something.delegate = {
      	// ...
      	calculateItemHeight: function(index) {
      		var item = items[index];
      		return sizes[item.size];
      	}
      };
      

      Or something similar. Since this function will be called an obscene amount of times it should be as simple as possible. Having only a handful of values is suggested.

      Anyway you never mentioned what your items would look like. If you want each item to have a somewhat random height I suggest just using something like ng-repeat where the items will be placed in the dom in a normal fashion. With lazy repeat only items around the visible part of the screen are in the dom the others are not, which is why this function is necessary. If all items had dynamic heights then the function would lose its meaning.

      If you still want to try to use it with completely dynamic values for each item it would not be impossible, but it would probably be relatively hard and the performance may become worse than simply adding all items in some cases (with say a couple hundred items).

      posted in Onsen UI
      IliaSky
    • RE: Need Help on Using Infinite List with Lazy Repeat

      @john-salazar Actually the code which @Leonardo-Augusto provided should work on pretty much both versions.

      Here’s a Demo of the code working with version 2 (splitter and lazy list).

      We strongly recommend using version 2, but if you decide you still want to use version 1 then instead of all ons-splitter* elements you can just use ons-sliding-menu.

      Here’s a Demo of the code working with version 1 (sliding menu and lazy list).

      You can see that there is practically no difference between the two.

      In both demos I put everything in the html tab so you can copy it just replacing the script and link tags to point to your local js and css files.

      I don’t have experience with the VS templates, but if you’re having issues about just using the version which you want you can just download the files linked in the demo provided here to make sure you have the correct versions.

      posted in Onsen UI
      IliaSky
    • RE: Getting error message in Monaca debug mode with onsen ui react

      Hmm… As long as you are using es6 this should not occur. I guess in your case it wasn’t polyfilled and you tried to use it.

      When you use it in monaca preview you’re loading it in a browser which already has proper support for it, but the device you are using (with monaca debug) does not.

      The error doesn’t come from neither onsen nor monaca, rather if you want to use es6 you should either transpile it with babel, webpack etc, or you should polyfill the things you want to use (if you can). In this case the polyfill is actually really simple.

      Here’s a one from the mozilla docs:

      if (typeof Object.assign != 'function') {
        Object.assign = function(target) {
          'use strict';
          if (target == null) {
            throw new TypeError('Cannot convert undefined or null to object');
          }
      
          target = Object(target);
          for (var index = 1; index < arguments.length; index++) {
            var source = arguments[index];
            if (source != null) {
              for (var key in source) {
                if (Object.prototype.hasOwnProperty.call(source, key)) {
                  target[key] = source[key];
                }
              }
            }
          }
          return target;
        };
      }
      

      Just load it before you want to use Object.assign and you’re good to go.

      posted in Onsen UI
      IliaSky
    • RE: The styling loads a bit slow when the app loads the second time!

      Hi. Well you could always make a splashscreen and hide it when everything is loaded. I suspect the splashscreen which you see the first time might be something more OS/App related - you can make a second one (you can prob make it look the same as the first one), however this one will be from the app code itself.

      So something like

      <div id="splash"></div>
      
      #splash {
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: 9001;
        background: url("path/to/splash") #999;
        opacity: 1;
        pointer-events: none;
        transition: opacity 0.3s ease-in-out;
      }
      

      And then something like:

      ons.ready(function(){
        document.getElementById('splash').style.opacity = 0;
      });
      

      I added some opacity transitions etc - if you want you can simply do document.getElementById('splash').style.display = 'none'; and ignore the last 3 css lines.

      Also make sure to add the splash at the root of the app. If you want you could also even inline the styles for it if you’re scared they could fail to load on time.

      That being said if you or anyone else finds a better solution for this feel free to write it here :)

      posted in Onsen UI
      IliaSky
    • RE: What are the extra input elements does onsenui contain?

      Hi @Taymindis. With Onsen UI you can still use anything from html5, so don’t worry about those.

      For extra provided elements we have a few:

      • ons-button
      • ons-range
      • ons-switch
      • ons-fab (Floating Action Button)
      • ons-input - wrapper for multiple types of <input> (including checkbox and radio etc)

      You could also checkout this section of the guide.

      And finally while they may not be form elements you may be also interested in:

      • ons-ripple
      • ons-icon
      • ons-progress-bar
      • ons-progress-circular

      Also it is possible that I missed something, which is why @Fran-Diox gave you a link to the whole reference :)

      posted in Onsen UI
      IliaSky
    • RE: Connection to a remote server

      Hm… Only with this amount of information it’s a little hard to determine the problem.

      There are a couple of things which I can think of which might be of some use though:

      1. Make sure that you’re checking the log on the server and not in the browser
      2. Currently you’re saying that you’re calling this when you submit the form - maybe you forgot to prevent the default behaviour.
      3. You could try just to make a simple request without the form (just write $http.post('url', {a: 1}) when you click a div or something similar) and see if it works.

      If even the third one doesn’t work I would think that there might be a problem with your server (in that case try to test it with a simple http request :D without any other code).

      posted in Developer Corner
      IliaSky
    • RE: ons-lazy-repeat won't realize the changes on the model if the size of the list did not change.

      Even though it may be changed in the future, right now maybe it doesn’t seem realistic to expect it to do that.

      Currently the API receives 2 functions - one for creating an item (scope or content) and one for getting the length of the list. Since we never receive the list itself trying to watch the functions for all the available items is likely to cause a very bad performance loss.

      Lazy-repeat was designed for very large lists (from thousands to million items) and thus watching the items for changes doesn’t make much sense. Watching the list size is probably not even really that necessary, but I guess it doesn’t cause any issues. Since the most likely use of the lazy-repeat is an infinite list which makes api calls for the next items it’s just a small bonus for it.

      I guess we aren’t really providing an easy API for your case. There is a refresh() method which would be the easiest solution. So something like lazyRepeat._provider.refresh(). I guess there are some potential changes for this component, but I guess revealing information may be misleading at this point.

      If you need this case working right now I guess your options are things like $scope.apply(), calling the aforementioned refresh, or doing a hack with changing the length temporarily.

      posted in Onsen UI
      IliaSky
    • RE: ons-tab

      @Vincent-Bastos Well actually they are centered by default. Here’s a demo.

      Most likely you have some sort of style which is overriding the default one.
      You should be able to fix it by writing

      .tab-bar__button {
        text-align: center;
      }
      

      in a css file and include it. Alternatively you could just write style="text-align: center" in the ons-tab elements.

      posted in v1.x
      IliaSky