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