Question

I’m using this code for my web assignment:
http://csstechniques.blogspot.sg/2007/05/super-simple-css-bars.html

But how do I show the percentage of the bar outside the progress bar like so: ?

I’ve tried many ways & it is driving me nuts. I’ve also googled but most results comes up using jQuery, which I’m not supposed to use for my assignment (only CSS, HTML and PHP).

Many thanks in advance for the help.

Answer 1

your html is like this:

<div class="progress-container">
  <div style="width:95%"></div>
</div>

you will need additional elements to show the percentage text like so:

<div class="progress-container">
  <div style="width:95%"></div>
</div>
<p class="percentage-text">
  <span class="percentage-number">95</span>%
</p>

Then you can query the percentage-number element and change the text with JavaScript like so:

var number = 95; // this is the same number you are using to change the graph.
var perc = document.querySelector(".percentage-number");
perc.innerHTML = number;

Check out querySelector, querySelectorAll, getElementById, getElementsByTagName, etc. in the MDN documentation. That will help you quite a bit with this. By the way, querySelector and querySelectorAll only work in modern browsers (incl. IE8+). That’s one of the reasons why people use jQuery to do this stuff.