Where to put JS? 1

Blueie · Mar 25, 2016

Hello

I am trying to reposition the circular progress 'bar' that is displayed here:

Link

There is some JS at the end of that HTML test and a circular-progress.js file.

I thought I could add something like

Code:

document.getElementById('canvas')

to the JS code (I have tried adding that to both the HTML file with the other JS and then to the JS file), and than have something like:

CSS:

#canvas {

position absolute;
top:200px;
left:200px;
}

but the circular progress 'bar' doesn't even appear! (My JS is non-existent).

What should I be doing, please, and where!

Thank you.

ChrisHirst · Mar 25, 2016

No idea, is the github link your code or something you are copying.

If it is not your's how do you expect us to 'debug' something we cannot actually see??

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

Blueie · Mar 26, 2016

Sorry Chris I thought the link I posted would take you to the link.

I have uploaded it here with all the relevant files:

Link

Thanks again

ChrisHirst · Mar 26, 2016

That works for me okay,

Linux Mint 17.2 64bit

Opera, Konqueror, Firefox, Chrome and Modori.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

Blueie · Mar 26, 2016

Yes, it works for me but I was interested in how I could reposition it using CSS.

Thanks

ChrisHirst · Mar 26, 2016

but the circular progress 'bar' doesn't even appear! (My JS is non-existent).

So the question isn't really about javascript more of a CSS one. Which by the way is forum215

Currently it is the only item in the body element so that is where it will be shown. Which is what this code "document.body.appendChild" does, if you want it somewhere else you replace ".body." with the name of the element you want it to be appended to, and therefore placed in..

So if you have a div element named "progress" it would be document.progress.appendChild and they will appear where ever "progress" is located on the page.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

Blueie · Mar 26, 2016

Thanks again for explaining.
So I could have this:

Code:

[u]HTML file[/u]

<head>
<style>

.body {
CSS position attributes
}
</style>
</head>

<body>

<div class="body">
HTML attributes
</div>

<script>
    (function () {
      var n, id, progress;

      progress = new CircularProgress({
        radius: 20
      });
      document.body.appendChild(progress.el);

      n = 0;
      id = setInterval(function () {
        if (n == 100) clearInterval(id);
        progress.update(n++);
      }, 100);
    })();

    (function () {
      var n, id, progress;
      progress = new CircularProgress({
        radius: 40,
        lineWidth: 2,
        strokeStyle: 'black',
        initial: {
          lineWidth: 4,
          strokeStyle: 'gray'
        }
      });
      document.body.appendChild(progress.el);

      n = 0;
      id = setInterval(function () {
        if (n == 100) clearInterval(id);
        progress.update(n++);
      }, 70);
    })();

    (function () {
      var n, id, progress;

      progress = new CircularProgress({
        radius: 70,
        strokeStyle: 'black',
        lineCap: 'square',
        lineJoin: 'round',
        lineWidth: 5,
        shadowBlur: 0,
        shadowColor: 'yellow',
        text: {
          font: 'bold 15px arial',
          shadowBlur: 0
        },
        initial: {
          strokeStyle: 'white',
          lineCap: 'square',
          lineJoin: 'round',
          lineWidth: 5,
          shadowBlur: 10,
          shadowColor: 'black'
        }
      });
      document.body.appendChild(progress.el);

      n = 0;
      id = setInterval(function () {
        if (n == 100) clearInterval(id);
        progress.update(n++);
      }, 30);
    })();
</script>
</body>

ChrisHirst · Mar 27, 2016

No.

An element with a class attribute of 'body' is not the equivalent of document.body.

document.body in javascript / EMCAScript / DOM Scripting means this <body> .... ... </body> element in the document object model (DOM).

You need to add an element as a child on the HTML <body> with a name attribute of, let's say 'progress' like so;

HTML:

<body>
      <div name="progress" id="progress">
</body>

Then 'style' it using CSS

CSS:

#progress {
// style properties go here
}

Then your javascript becomes;

JavaScript:

document.progress.appendChild.el()

But, can I just say that the above code is fairly basic DOM scripting and it would behove you to put in a couple more hours learning the basics of the javascript HTML DOM[link] before continuing this project, otherwise you are going to get 'bogged down' again very quickly and then become frustrated with having to wait for answers at this, or some other forum.
DOM scripting is Object Oriented Programming (OOP) and as such is somewhat less than intuitive until it 'clicks', then you will be left wondering how you didn't 'get it' initially.
As humans we don't think in OOP, so "press number nine on the phone" isn't;

telephone.keypad.buttons.nine.press()

So it does take a little while for that seemingly backwards approach to sink in to our [not always strictly logical] brain.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
[url=http://webmaster-talk.eu]Webmaster Forum

ChrisHirst · Mar 27, 2016

Forgot to add;

then it doesn't really matter where the script element is positioned in the document, just as long as it placed or called (instantiated) after the closing tag of the #progress element.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

Blueie · Mar 27, 2016

Thanks, Chris, for the link and advice.

Things are a bit clearer now but I will pop over to the W3 Schools.

You are right about having to wait for answers. I actually contacted the person who created the circular progress 'bar', and he replied that he was unable to help with repositioning and that I ought to ask for advice on a forum!

I didn't realise that DOM JS was OOP. I tend to associate that with Java.

The circular progress 'bar' is a small part of a larger ASP.NET project and I can see that the coding is completely dissimilar. I find it odd, for instance, that your

Code:

document.progress.appendChild.el()

can go anywhere in the <script></script> tags at the end of the HTML page, but I will spend some time going through the examples at W3 Schools.

Many thanks again!

ChrisHirst · Mar 27, 2016

at the end of the HTML page

It's simply because HTML is rendered "top down", and elements have to exist in the rendered document model before any script can reference them, it's obvious when you know about it, but if you are used to server side code, where the code parts are parsed and processed before the HTML is served (that's where the name PHP came from [Pre-Hypertext Processing]) it can be confusing at first.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Where to put JS? 1

Blueie

Technical User

ChrisHirst

IS-IT--Management

Blueie

Technical User

ChrisHirst

IS-IT--Management

Blueie

Technical User

ChrisHirst

IS-IT--Management

Blueie

Technical User

ChrisHirst

IS-IT--Management

ChrisHirst

IS-IT--Management

Blueie

Technical User

ChrisHirst

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor