@emccorson

Thank you for trying to help me. It didn’t work for me. I’ve tried placing the <script> file reference in my index.html. Then I tried placing it in both pages. The only way I can get the script recognized in the page is to write it out there. I guess I’ll just use the <script> tag and actual javascript within the page and deal with it. I’ll probably stumble onto the solution eventually. I tinker with onsen-ui but I’m a LONG way from knowledgeable.

I appreciate the way your try to help.
-R

Thank you for your reply, but my pages are not templates. They are separate pages. I don’t like having all of the pages and script in one place. It becomes hard to read. I separated the pages and I’d like to separate the code, but I’m not finding a way to do that. I’ve read the docs but probably missed this. TIA -R

If I place the actual script in the separate myPage.html, it works.
…

<script>
 var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
 height: 20
});
canvas.add(rect);
 </script>

If I use a separate script file:

<script src="/js/custom.js"></script>

It doesn’t work.

Hello There,

I think this is a simple question. I have three separate pages. One page needs to reference a custom.js file.

If I put the js in that page using a <script> tag, the js works, but I’ve tried placing the custom.js file in the index and the needed page. It doesn’t work. Any help would be appreciated. I’m sure I’m missing something simple.

-R

Hello,
I’ve read every question on stack overview. I’ve searched this forum extensively and used google to find any possible answers to how I can use standard CSS or modify onsen css. I can find no full source or examples to reference. I’ve spend several days trying to change a simple background color of the checked item input in onsen. I’d like to use the input element. It is currently blue background with a white checkmark. I want to change those two things. I suppose I could just us a regular input element, but I am trying to learn onsen. The CSS in onsen seems to be tied to the javascript, but I can’t find a reference that shows me how to refer to the element’s css. I see things in some few examples like:

<div class="tabbar__label">My Label</div>

There seems to be no place to see how to refer to all of the elements’ CSS. It is very daunting. Especially, when all I want to do is change the color of one element’s background.

My code is as follows:

<ons-list>
  <ons-list-item tappable>
    <label class="left">
      <ons-checkbox name="Q1" input-id="chk-1"></ons-checkbox>
    </label>
    <label for="chk-1" class="center">
      How to use CSS in Onsen?
    </label>
  </ons-list-item>

Thank you for any help you might offer.
-Rachel

OK, thanks again to stack overflow, I found the answer to my question. I’m posting it here because I’ve seen other similar questions in the forum that were never answered. Maybe this will help someone else.

My onsen-ui Html5:

<div style="text-align: center; margin-top: 30px;margin: bottom 0;">
        <ons-input type="text" id="date" >
      </ons-input>
      </div>

      <div style="text-align: center; font-size:small; margin-top: 0px;">
        <ons-input type="text" id="time" >
      </ons-input>
      </div>

The code is pure javascript and was posted by a coder (sorry I don’t have his name) on stack overflow. I do not take credit for it, but I’m grateful for his sharing. 😁

// get a new date (locale machine date time)
var date = new Date();
// get the date as a string
var n = date.toDateString();
// get the time as a string
var time = date.toLocaleTimeString();

// find the html element with the id of "date"
// set the innerHTML of that element to the date a space the time
document.getElementById('date').innerHTML = n; //date
document.getElementById('time').innerHTML = time;
});

-Rachel

It seems that each time I dive into Onsen, I hit a brick wall of some sort. This time, I am having a difficult time using CSS. I’ve seen requests similar to mine documented on Stackoverflow as long ago as 2014. I have tried to apply solutions found there that worked in 2014-2016 but no longer work today. The Playground is second to none in helping teach how to use Onsen. Please consider adding better documentation regarding CSS and demonstrating the changes in a section of the Playground. It would make it so much easier for those of us who would like to use Onsen but need to see concrete examples of how things are done.

Thank you for your consideration.
-Rachel

Hello Gurus,
I’ve searched the forum, but haven’t been able to find an answer to my simple question. I’m trying to create an Activity Log. The log uses <ons-input> forms. I am not good at javascript and have tried solutions found both via stack overflow and the internet, but nothing seems to work.

I know this is a simple thing. I’d like to have the ```
<ons-input type=“date”> </ons-input>

As it stands now, when I run the program, I get: mm/dd/yy in the input area.

Any help would be appreciated. I like the tutorials very much and the Playground is so helpful. I'm sorry to have to post such a simple question here.

TIA
-Rachel

I have the following line of code snip:

var item = document.createElement('ons-list-item');

I would like to add a modifier to the code so that each dynamically listed item would have a ‘chevron’. I’ve tried a variety of techniques, but I can’t get it to work. I’ve also searched stack overflow, this community, looked at the references and tutorial, but I can’t find, or maybe, understand an answer. Could some kind person show me how this is done?

TIA

Thanks for your response. That helped to clarify. I’ll check back later to see if this has been added.

Hello Again,

I want to use onsen.io to rewrite an older jQuery mobile app. I like the beauty of onsen’s components. However, each time I get started with the rewrite, I run into a feature that I need that is lacking in onsen.io. I decided to wait and give onsen a little more time to add features.

Now, it is about a year later and I thought I’d try again. However, I can’t seem to find a collapsible list component. I see how to collapse a single item in onsen.io, but not an entire list:

Something like the following JQM code that collapses the entire list:

 <ul data-role="collapsible"  data-collapsed="true">
   <li> Item 1 </li>
   <li> item 2 </li>
   <li> item 3 </li>
</ul>

Maybe I’m not approaching the problem correctly. Can anyone help with a way to do this?

In searching the forum, I found one question about collapsible here:
darylldawn question: Is it possible?
I tried the fix that he tried, but since the nested items didn’t display properly, I can’t use it for an app that is published.

TIA