Percentage Bar
Not only is my wife a knitter, but she has a blog about it. She wanted to be able to visually indicate how far along she was in each of her projects and showed me this little percentage bar she found on the web. It used Flash, and she had to download some file, and oy, so much work. I decided to whip up a "pure" HTML solution for her.
And for all of you! It consists of a snippet of Javascript that you drop in
the <head></head> of your page (or blog template) and a
smaller snippet of Javascript that you use to display the bar.
In your page (or more likely, your blog template) locate the end of the
head section. Immediately before the <
/head> tag, paste in the following:
<script language="javascript">
// drawPercentBar()
// Written by Matthew Harvey (matt AT unlikelywords DOT com)
// (http://www.unlikelywords.com/html-morsels/)
// Distributed under the Creative Commons
// "Attribution-NonCommercial-ShareAlike 2.0" License
// (http://creativecommons.org/licenses/by-nc-sa/2.0/)
function drawPercentBar(width, percent, color, background)
{
var pixels = width * (percent / 100);
if (!background) { background = "none"; }
document.write("<div style=\"position: relative; line-height: 1em; background-color: "
+ background + "; border: 1px solid black; width: "
+ width + "px\">");
document.write("<div style=\"height: 1.5em; width: " + pixels + "px; background-color: "
+ color + ";\"></div>");
document.write("<div style=\"position: absolute; text-align: center; padding-top: .25em; width: "
+ width + "px; top: 0; left: 0\">" + percent + "%</div>");
document.write("</div>");
}
</script>
Then, on your page (who are we kidding, in your blog) when you want to display a percentage bar, drop one of these:
<script language="javascript">drawPercentBar(200, 35, 'red'); </script>
Which would spit out something like this:
The first number is the width, in pixels, of the entire bar. The second number is the percentage of the bar to fill. The third argument is the color to fill with (you can use a color name or a #hex value).
You can also optionally specify a fourth argument, which is the background color of the bar. (If you leave it out, the bar is "transparent," meaning it uses the same background as the rest of your page.)
<script language="javascript">drawPercentBar(300, 65, '#ffcccc', '#ccccff'); </script>
The bar uses the same font and text color as the rest of your page, but of course you can change that just by using regular HTML formatting around the bar, like-a this:
<div style="font-family: Arial; color: #009900"> <script language="javascript">drawPercentBar(200, 80, '#ffcccc', '#ccccff'); </script> </div>
The height of the bar is determined by your font size:
<div style="font-family: Arial; font-size: 14pt; color: #009900"> <script language="javascript">drawPercentBar(200, 80, '#ffcccc', '#ccccff'); </script> </div>
<div style="font-family: Arial; font-size: 50%; color: #009900"> <script language="javascript">drawPercentBar(200, 80, '#ffcccc', '#ccccff'); </script> </div>
Enjoy! Please feel free to email me (matt at unlikelywords dot com) or leave a comment if you have any problems, comments, or just feel like stroking my ego.
(No seriously, feel free to email me if you're having trouble with these. You don't have to ask my wife to ask me why your blog isn't showing the bars right. She's just going to ask me anyway, so why not skip the middleman!)