Simplified Percentage Bar

May 7th, 2006 | View Comments

Update 06/16/2006: There was a bug in the code I originally posted. Fix is below. Apologies to anyone who tried to use the old code and couldn’t make it work.

I just installed the percentage bar script from Unlikely Words on my blog, which is a very nice little doodad.

I made a few small modifications to the script. The script as originally written allows you to specify a different width and different colors for each percentage bar if you want to.

Being that I am lazy and boring, I don’t want to, nor do I want to have to re-specify the same width and the same colors for each bar. So I streamlined a bit and also updated the <script> tags so they’re compatible with the XHTML 1.0 Strict web standard.

And I added the ability to customize the color of the border around the bar.

If you’re like me and are perfectly happy to have each bar the same, except for the percentage of color filler, then you can use the following code instead. Download this file: drawPercentBar.txt

Open the file in a text editor like Notepad. Copy/paste ALL of the code in the file to just before your </head> tag. Near the top of the code, you should see the following lines of code:

var width = 180;

var color = "#CD62AD";
var background = "#FFFFFF";
var border = "#4C0039";

You adjust the look of the bar by editing the bits in bold. The first bold number is the width of the bar in pixels. You cannot leave this out.

The remaining bold bits all specify colors. In all cases, you can write in another hex code, a color word like “pink” or “blue”, the word “none”, or you can delete everything between the quotes to use the defaults. Just make sure you keep the quotes around the whole thing.

The second bold bit specifies the color of the percent fill. This defaults to grey. The third bit specifies the color of the bar background. This defaults to “none”, or the color of your page. The fourth bit specifies the color of the border around the bar. This defaults to black.

Then you add the following code to make the bar appear on your page:

<script type="text/javascript">drawPercentBar(65); </script>

Replace the bold number with the percentage that applies for this particular project.

If you have any questions, let me know! This really is a neat bit of code with lots of customization options.

CogKnition posted this on May 7th, 2006 @ 3:31am in KnitBlogging | Permalink to "Simplified Percentage Bar"


  1. Abigail says:

    Hey, I just wanted to drop you a line and let you know that your mods are awesome, but that for some reason the code doesn’t work in Blogger beta. I found some modifications here [link disabled by moderator] and implemented them and now it works great. One problem I still came up against though was that no matter what I did I still couldn’t get the border colour to change. Otherwise it worked great!

    (I also made a few mods of my own, kinda combining the two codes)

  2. Tracy says:


    I really want to use your “on the needles” script, but it’s no longer on the Unlikely Words site. Would you be willing to share it?

    BTW, the link in the other comment is to a p*rn site.