Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Location of graphic on Web page? (Read 2218 times)
SteveHi
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 2
Joined: Nov 11th, 2014
Location of graphic on Web page?
Nov 11th, 2014 at 9:50pm
Print Post  
Hello

I have some JavaScript here which produces a circular progress bar in percentages:

Code (Javascript)
Select All
 <script src="../circular-progress.js"></script>
    <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);
    })(); 



Is it possible, please, to change the location of this circular progress bar on my Web page and, if so, how would I do it?

I wonder, also, if it's possible to use instead of, say, strokeStyle: 'white', to use strokeStyle: '#ffffff'.

Thank you.




  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Location of graphic on Web page?
Reply #1 - Nov 12th, 2014 at 9:06am
Print Post  
This does not seem related to our components. Anyway the progress.el object is a canvas element from what I can see in the script, and you should be able to change its position using css position attributes. You can find a jQuery example that positions an image here, it should work the same for canvas:
http://stackoverflow.com/questions/3174995/dynamically-positioning-elements-usin...

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
SteveHi
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 2
Joined: Nov 11th, 2014
Re: Location of graphic on Web page?
Reply #2 - Nov 12th, 2014 at 7:56pm
Print Post  
Many thanks Stoyan for your reply and the link. It looks hopeful!

Thanks again.

Steve
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint