\n\n

Knitters' Progress Bars

Here are some HTML/Javascript progress bars I whipped up for my wife, a knitter. I hope you find them useful, too.

Instructions for most blog platforms are immediately below. Special instructions for "New Blogger" are at the far bottom of the page.

If you have questions, email me at: matt AT smallish.com.

Installation Instructions

Skip this section if you're using the new "Blogger" interface.

Copy all of the following (in the gray box) and paste it between the <head> and </head> tags in your template:

<!-- Progess bar widget, by Matthew Harvey (matt at smallish.com) --> <!-- Licensed under a Creative Commons Attribution-Share Alike 2.5 License (http://creativecommons.org/licenses/by-sa/2.5/) --> <style type="text/css"> div.smallish-progress-wrapper { /* Don't change the following lines. */ position: relative; border: 1px solid black; } div.smallish-progress-bar { /* Don't change the following lines. */ position: absolute; top: 0; left: 0; height: 100%; } div.smallish-progress-text { /* Don't change the following lines. */ text-align: center; position: relative; /* Add your customizations after this line. */ } </style> <!-- Progess bar widget, by Matthew Harvey (matt at smallish.com) --> <!-- Licensed under a Creative Commons Attribution-Share Alike 2.5 License (http://creativecommons.org/licenses/by-sa/2.5/) --> <script type="text/javascript"> function drawProgressBar(color, width, percent) { var pixels = width * (percent / 100); document.write('<div class="smallish-progress-wrapper" style="width: ' + width + 'px">'); document.write('<div class="smallish-progress-bar" style="width: ' + pixels + 'px; background-color: ' + color + ';"></div>'); document.write('<div class="smallish-progress-text" style="width: ' + width + 'px">' + percent + '%</div>'); document.write('</div>'); } </script> That's it.

How to use it

You say you want to put a progress bar in your sidebar? Well, copy the following and paste it where you'd like the bar to appear. <script type="text/javascript">drawProgressBar('#ff0000', 200, 50);</script> Here's what will show up on your blog:

You can, of course customize the appearance of the progress bar. The three arguments to the drawProgressBar function are the color of the bar, the width of the entire bar, and the percentage to fill.

For instance, 200 pixels too wide? Here's a narrower one, only 100 pixels wide:

<script type="text/javascript">drawProgressBar('#ff0000', 100, 50);</script>

Cute! Red not your style? Change the first parameter, which should be a valid HTML RGB color. Don't forget the # character.

<script type="text/javascript">drawProgressBar('#33cc33', 200, 50);</script>

Green!

"New Blogger" Installation Instructions

Do not carry out any of the above instructions. Go to the "template" tab on your dashboard screen. Choose "add a page element." Choose "HTML/Java Script" from the options presented and click "add to blog."

In the next window, type "Works in Progress" (or whatever you want to call this section) in the "title" bar. In the large box underneath, first paste the entire large block of code given at the top of this page. Hit return a couple times, and under that, paste the snippet of code (from "How to use it," above) as many times as you'd like to create as many bars as you like. You can change the parameters as described in "how to use it" above.

Customizing The Bars

And of course, you don't have to only show 50%. Any number between 0 and 100 will work as the third argument.

<script type="text/javascript">drawProgressBar('#000000', 200, 0);</script> <script type="text/javascript">drawProgressBar('#0000ff', 200, 13);</script> <script type="text/javascript">drawProgressBar('#987654', 200, 34);</script> <script type="text/javascript">drawProgressBar('#ffff33', 200, 83);</script>

You can put descriptive text above (or below) each progress bar just by typing the text in relation to the code. So it might looks something like this:

Mom's shawl <script type="text/javascript">drawProgressBar('#000000', 200, 0);</script> Mom's shawl Jaywalker socks <script type="text/javascript">drawProgressBar('#0000ff', 200, 13);</script> Jaywalker socks Rogue pullover <script type="text/javascript">drawProgressBar('#987654', 200, 34);</script> Rogue pullover

You can also use basic HTML tags on the descriptive text to make links and other formatting changes. You might put them in an unordered list, for instance!

<ul> <li> Mom's shawl <script type="text/javascript">drawProgressBar('#000000', 200, 0);</script> </li> <li> Jaywalker socks <script type="text/javascript">drawProgressBar('#0000ff', 200, 13);</script> </li> <li> Rogue pullover <script type="text/javascript">drawProgressBar('#987654', 200, 34);</script> </li> </ul>

That should do it!

Terms of Use

Creative Commons License
This work is licensed under a Creative Commons Attribution-Share Alike 2.5 License.

Please do not remove my name and email address from the code above when you include it in your blog template. Thanks!