CODEWITHSUNDEEP
javascriptjqueryprogress-bar
Roxx
Roxx

Reputation: 3986

multiple progress bar on single page

I am trying to put multiple progress bar with different values on a single page. Value will come from database by php.

Below is the html code.

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script type="text/javascript" src="progressbar.js"></script>

    <link rel="stylesheet" type="text/css" href="progressbar.css">
    <link rel="stylesheet" type="text/css" href="skins/tiny-green/progressbar.css">

</head>
<body>


    <div id="progressBar" class="tiny-green"><div></div></div>


    <script>
        progressBar(105, $('#progressBar'));
        progressBar(15, $('#progressBar'));
    </script>

</body>
</html>

and here is the progressbar.js 

function progressBar(percent, $element) {
    if(percent > 100){
        percent = 100
    }

    var progressBarWidth = percent * $element.width() / 100;
    $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "%&nbsp;");
}

It is working fine for single progressbar. Can you please advise me how to show multiple progressbar on single page.

Upvotes: 0

Views: 4789

Answers (2)

Dhiraj
Dhiraj

Reputation: 33618

You have couple of options

Option 1

You can have multiple elements with incrementing IDs like this

<div id="progressBar1" class="tiny-green"><div></div></div>
<div id="progressBar2" class="tiny-green"><div></div></div>
<div id="progressBar3" class="tiny-green"><div></div></div>

And initiate like this 

progressBar(105, $('#progressBar1'));
progressBar(15, $('#progressBar2'));
progressBar(105, $('#progressBar3'));

Option 2

Or you can use class like this 

<div class="progressbar tiny-green"><div></div></div>
<div class="progressbar tiny-green"><div></div></div>
<div class="progressbar tiny-green"><div></div></div>

And pass an array like this 

progressBar([105,34,243], $('.progressBar'));

And modify your progressBar method to something like this 

function progressBar(percents, $elements) {
  $elements.each(function(index, el) {
      var percent = percents[index];
      if (percent > 100) {
        percent = 100;
      }
      var progressBarWidth = percent * $element.width() / 100;
      $(el).find('div').animate({
        width: progressBarWidth
      }, 500).html(percent + "%&nbsp;");
    }
  });
}

Upvotes: 1

Dekel
Dekel

Reputation: 62536

The prograssBar function creates a new progress bar and attach it to existing element. You need multiple elements of you want multiple progress bars.

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script type="text/javascript" src="progressbar.js"></script>

    <link rel="stylesheet" type="text/css" href="progressbar.css">
    <link rel="stylesheet" type="text/css" href="skins/tiny-green/progressbar.css">

</head>
<body>
    <div id="progressBar1" class="tiny-green"><div></div></div>
    <div id="progressBar2" class="tiny-green"><div></div></div>

    <script>
        progressBar(105, $('#progressBar1'));
        progressBar(15, $('#progressBar2'));
    </script>

</body>
</html>

Upvotes: 1

Related Questions