INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Where to put JS?

Where to put JS?

(OP)
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 --> JS

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:

CODE --> 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.

RE: Where to put JS?

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

RE: Where to put JS?

(OP)
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

RE: Where to put JS?


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

RE: Where to put JS?

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

Thanks

RE: Where to put JS?


Quote:

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: HTML, XHTML & CSS


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

RE: Where to put JS?

(OP)
Thanks again for explaining.
So I could have this:

CODE -->

HTML file

<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> 

RE: Where to put JS?

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;

CODE --> HTML

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

Then 'style' it using CSS

CODE --> CSS

#progress {
// style properties go here
} 

Then your javascript becomes;

CODE --> 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 [link http://www.w3schools.com/js/js_htmldom.asp]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.
Webmaster Forum

RE: Where to put JS?

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

RE: Where to put JS?

(OP)
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 --> JS

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!

RE: Where to put JS?

Quote:

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close