I am not familiar with Canvas, but I see your program, I think it doesn’t matter with Onsen UI, may be it matters with Touch Input.

May be the article Using Touch Events with the HTML5 Canvas can help you.

Best Regards
Gobi

Sorry for late reply, but may be useful for other guys.

I think we should use ons.createElement instead, because it will compile after create.

I write an example here.

HTML File

<ons-page>
  <ons-list id="example">
  </ons-list>
</ons-page>

Javascript File

var items = [
  {"name": "A", "modifier": "chevron", "type":"tappable"},
  {"name": "B", "modifier": "","type":""}
];

var createList = function (item) {
  var modifier = (item.modifier == "") ? "" : 'modifier="'+ item.modifier +'"';
  console.log(modifier)
  return ons.createElement(`
      <ons-list-item ${modifier} ${item.type}>
        <div class="center">${item.name}</div>
      </ons-list-item>
    `
  );
};

for (item of items) {
  var temp = createList(item);
  document.getElementById('example').appendChild(temp);
};

Then it will appear first list A with chevron and can tap, and list B cannot.

Best Regards
Gobi

Recently I am writing with transparent Toolbar. It works fine with using background-image.

<ons-page>
  <ons-toolbar modifier="transparent">
     <div class="left"><ons-back-button></ons-back-button></div>
  </ons-toolbar>
</ons-page> 
<style>
  .page__background {
    background-image: url(..)
  }
</style>

But if when I add div, or carousel in the page__content just like the following code:

<ons-page>
   <ons-toolbar modifier="transparent">
     <div class="left"><ons-back-button></ons-back-button></div>
  </ons-toolbar>
 <img src="images/... " style="width:100%;"> 
</ons-page> 

then it will have a transparent toolbar, under the toolbar it shows the image.

If I put the following css, it goes fine.

<style>
  .page__content
    { 
      top: 0 !important;
    }
</style>

My question is: is this the correct way to do with Transparent Toolbar? If yes, then how to link up toolbar–transparent with page__content?

Best Regards,
Gobi

HI,

Please try the following example.

Please note that for <input> use .focus(), but for <ons-input> use ._input.focus().

<ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator>

<template id="page1.html">
    <ons-page id="page1">
        <ons-toolbar>
            <div class="center">Page 1</div>
        </ons-toolbar>

        <p>This is the first page.</p>

        <ons-button onclick="document.querySelector('#myNavigator').pushPage('page2.html')">Push page</ons-button>
    </ons-page>
</template>

<template id="page2.html">
    <ons-page>
        <ons-toolbar>
            <div class="center">Ons-Input</div>
        </ons-toolbar>
        <div style="text-align: center; margin-top: 30px;">
            <p>
                <ons-input id="username" modifier="underbar" placeholder="Username" float></ons-input>
            </p>
            <p>
                <ons-input id="password" modifier="underbar" type="password" placeholder="Password" float></ons-input>
            </p>
            <p style="margin-top: 30px;">
                <ons-button onclick="login()">Sign in</ons-button>
            </p>
        </div>
        <script>
            ons.getScriptPage().onShow = function() {
                    document.getElementById("username")._input.focus();
            }
        </script>
    </ons-page>
</template>

Best Regards
Gobi

Re: Ons-Speed-Dial Fab does not stay at fixed position.

Today I found some more problems about Ons-Speed-Dial

1. document.querySelector(‘ons-fab’).disabled is not working

2. document.querySelector(‘ons-fab’).setAttribute(‘disabled’)
   document.querySelector(‘ons-fab’).setAttribute(‘disabled’, ‘true’)
   These two scripts work fine.

3. document.querySelector(‘ons-fab’).setAttribute(‘disabled’, ‘false’)
   But this script also sets ons-fab disabled, so how to enable it again?

Best Regards
Gobi

Thanks for your prompt reply, looking forward the upgrade version.

I tried the following code, and found that the FAB will move upward when scrolling. I was using
https://unpkg.com/onsenui/css/onsenui.css, https://unpkg.com/onsenui/css/onsen-css-components.min.css, https://unpkg.com/onsenui/js/onsenui.min.js.

<ons-if platform="android">
  <ons-fab>
    ...
  </ons-fab>
</ons-if>

<ons-if platform="ios other">
  <ons-fab>
    ...
  </ons-fab>
</ons-if>

But it is normal when using https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.6/css/onsenui.css, https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.6/css/onsen-css-components.css, https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.6/js/onsenui.js.

Is there a bug in the version 2.10 when using ons-if platform together with ons-fab?

Please found the samples

1 https://codepen.io/gobiyau/pen/KKzgWjq (There’s problem)
2 https://codepen.io/gobiyau/pen/PoNGpvq (it’s OK)

Best Regards,
Gobi

@emccorson

Thank you very much, I tried and found that, I should change the ion names and the icons will appear.

But the example in Onsen Playground is wrong, it is funny.

I found out the reason, because I put the '<ons-toast> inside <ons-page>, put outside ons-page, everything become normal.

I found that using components is differ from using notifications. Using notifications is normal, but using components, toast will fall down from the bottom of the ons-toolbar, and rising from the top of the ons-bottom-toolbar.

You can check by the following code or check the example here.

HTML:

<ons-page>
    <ons-toolbar>
        <div class="center">Title</div>
    </ons-toolbar>
  
    <ons-list>
        <ons-list-header>Components</ons-list-header>  
        <ons-list-item tappable modifier="longdivider" onclick="toastDown.toggle()">
            <div class="center">
                Toast Down from the bottom of the ons-tootlbar
            </div>
        </ons-list-item>      
        <ons-list-item tappable modifier="longdivider" onclick="toastUp.toggle()">
            <div class="center">
                Toast Up from the bottom of the ons-bottom-tootlbar
            </div>
        </ons-list-item>  
     <ons-list-header>Notifcations</ons-list-header>     
        <ons-list-item tappable modifier="longdivider" onclick="showToastDown()">
            <div class="center">
                Toast Down
            </div>
        </ons-list-item>      
         <ons-list-item tappable modifier="longdivider" onclick="showToastUp()">
            <div class="center">
                Toast Up
            </div>
        </ons-list-item>        
     
    </ons-list>
    <ons-bottom-toolbar>
    </ons-bottom-toolbar>
  
    <ons-toast id="toastUp" animation="ascend">
        FABs down!
        <button onclick="toastUp.hide()">ok</button>
    </ons-toast>
     <ons-toast id="toastDown" animation="fall">
        FABs down!
        <button onclick="toastDown.hide()">ok</button>
    </ons-toast> 
</ons-page>

JS:

var showToastDown = function() {
    ons.notification.toast('Toast!', {
        buttonLabel: 'Dismiss', 
        animation: 'fall', 
        timeout: 2000
    });
};

var showToastUp = function() {
    ons.notification.toast('Toast!', {
        buttonLabel: 'Dismiss', 
        animation: 'ascend', 
        timeout: 2000
    });
};