giuliohome

giuliohome

@Sergey Hi! I’m not an expert but I’ve tried something with responsive grid: why do you say it is not possible to hide some blocks? This was the first option I easily achieved with CSS3 only. For example here on SO there is a description about how to hide the headers, but I’d say the concept is applicable to any block: just define a

display: none

in the CSS3 class with the specified media queries. An example:

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 50%;
    }
    [class*="colhead-"] {
        display: none;
    }
}

I’ve also tried with OnsenUI and pure JS or Angular, etc… and of course it works as expected.

Sorry if I misunderstood your question, anyway I imagine you may want a more advanced solution.

giuliohome

Finally solved as explained here on SO.

Find also the corresponding version implemented with OnsenUI and React in the end of this article

giuliohome

Everything seemed to work in my desktop dashboard with the Preview but when I try it with Monaca Debugger on my galaxy Android phone, it fails with the error in the Log showing that querySelector is null

document.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));

Please help me :sweat:

By the way, I’ve also noticed that the following button is not shown in the menu when I run the app on the Android phone, while - again - I can see it as expected from the dashboard Preview.

    <ons-toolbar-button id="resptab" ><ons-icon icon="ion-pie-graph" size="28px"></ons-icon>Table</ons-toolbar-button>

giuliohome

Solved with a Navigator! :ok_hand: :thumbsup:

      <ons-splitter-content>
          <ons-navigator id="myNavigator" animation="slide" page="list.html"/>
      </ons-splitter-content>

and the following script

        callback: function(label) {
            document.querySelector('#myNavigator').pushPage('table.html')
        }.bind(this)

giuliohome

I’ve fixed the first part as

document.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));

I had to use document of course :smile:

Still looking how to build the event handler.

This is what I’ve tried now:

todo.setRespTable = function() {
    ons.notification.prompt('Switch to responsive table view',{
        title: 'Responsive Table',
        cancelable: true,
        
        callback: function(label) {
            document.querySelector('#splitter-menu').page = "table.html"
        }.bind(this)
    });    
}

When debugging, I see that the page property is changed from menu.html to table.html, but no effect in the rendering (is a refresh missing somewhere?)

P.S Maybe should this be posted in the developer corner section?

giuliohome

Sorry for the very simple question, please consider I’m a beginner :smile: in designing Onsen/Monaca :sparkles:
I’m starting from the todo-list example where I have an index.html containing

<body>
  <ons-splitter id="splitter">
      <ons-splitter-side id="splitter-menu" page="menu.html" side="left" width="220px" collapse swipeable></ons-splitter-side>
      <ons-splitter-content page="list.html"></ons-splitter-content>
  </ons-splitter>
</body>

in the menu under the responsive header

    <ons-list>
        <ons-list-header>Default</ons-list-header>
        <ons-list-item data-filter="all" tappable>All</ons-list-item>
        <ons-list-header>Status</ons-list-header>
        <ons-list-item data-filer="uncompleted">Pending</ons-list-item>
        <ons-list-item data-filter="completed">Completed</ons-list-item>
        <ons-list-header>Responsive</ons-list-header>
    </ons-list>

I’d like to add the possibility to tap and set the ons-splitter-content to a different html page, which I’m building to test a responsive table (more info here, so let’s say I already have the html5 and the css3 to link).

How can I change that content page when I tap on the menu, thanks :interrobang:

I guess I have to add

        <ons-list-header>Responsive</ons-list-header>
        <ons-toolbar-button id="resptab">Table</ons-toolbar-button>

in the menu e something like

target.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));

in the scripts (but the above querySelector doesn’t work, it’s null :confused: ) with a function

todo.setRespTable = function() {
    
    
}

to be defined…

giuliohome

@munsterlander Thank you very much for your prompt and accurate reply, for the very interesting doc reference to the plugin development (exactly what I was looking for) and your final suggestion about the IDE :smirk: that I’ll try to follow.
Much appreciated! :smiley:

giuliohome

I’d like to modernize my Android App on Google Play into a new one, built using Monaca tools. My idea is to integrate Monaca and the free Visual Studio Community edition.
I am new at Monaca development and I have a few questions.

Can I sell the new app on Google Play or have I to distribute it free?
Does “using Monaca tools” mean that the whole app has to be rewritten in JavaScript, Html5, etc… or is it possibile to build also Android code in a hybrid web/native app?

Thank you.

giuliohome

@giuliohome

Posts made by giuliohome