Word counters are a cool way to keep your audience updated on the progress of your manuscript(s). Naturally, in order to keep my audience of one updated (hi mom!), I decided to create my own.
You can get really fancy with these, using custom graphics to create a unique look & feel. I decided to keep mine simple, for two reasons: ease of use and ease of extensibility. Here are the steps to add counters to your own site and customize them.
Note – no coding is required for this. You’ll have to do a bit of HTML tweaking if you want to change what it looks like (color, size, etc), but the code that actually runs this can simply be copy & pasted and left alone.
One other point – I’m using this through Blogger right now, but it can easily be extended for use on your own site or other platforms (WordPress, LiveJournal, etc). You may have to tweak some of these steps to get this to work on another platform, but the concepts remain the same.
How’s It Work?
The file is composed of two distinct sections:
- JavaScript to calculate the percentage complete and update the visual indicator (aka – the meter) accordingly. This is the code, and does not need to be modified.
- HTML to display the word count, percentage complete, and the meter, and to format said items. This is the piece you will need to modify to display your manuscript’s title, total word count, current word count, if nothing else.
We’ll look at the HTML first. I’ve highlighted the key items requiring input below – these are the places where you will need to input your manuscript’s name, and the word counts (current and target). Everything else, you can ignore, including the completion percentage (which is calculated for you by the code).
<div id="manuscript" style=" text-align:center; width: 100px;">
<span id="manuscriptTitle">Fantasy Novel</span>
<br />
<div style="background-color:#E8E8E8; width:100px; height:10px; text-align:left;">
<div id="meter" style="background-color:#6666FF; width:0px; height:10px;"> </div>
</div>
<div style="width:100px; text-align:center; ">
<span id="currentWordCount">12000</span>
<span> / </span>
<span id="targetWordCount">80000</span>
<br />
<span id="completionPercentage"></span>
</div>
<br />
</div id="manuscript_end">
One other point – it is critical that you don’t modify the names of any of the IDs (manuscripts, currentWordCount, etc) as the code looks for these.
What Do I Do?
Putting these on your site is pretty easy.
If You Are Using Blogger (or any site that allows you to add Gadgets):
- Edit your blog Layout
- Choose the Page Elements tab (again, assuming Blogger here)
- Click ‘Add a Gadget’
- Choose HTML/JavaScript
- Copy the code (JavaScript & HTML, file is at bottom of this post) and paste into the Blogger gadget window.
- Within the gadget window, modify the HTML section to reflect your current manuscript(s).
- Save the gadget, and then click the Edit HTML tab on the Layout page.
- Locate the <body> tag (best way is simply to search - Ctrl + F). Change to <body onLoad="Load()">, which calls our new JavaScript code.
- Save
If You Can Modify the HTML itself (i.e. you have your own site and probably know what you’re doing)
- Access your page’s source code
- Copy the JavaScript portion of the file below (including the starting <script> tag and the ending </script> tag). Conversely, you can dump this into a separate .js file and just link to your site.
- Paste the JavaScript within the <head> of your current page.
- Copy the HTML portion of the file below.
- Paste the HTML somewhere within your page’s <body>.
- Modify the HTML section to reflect your current manuscript(s).
- Modify the <body> tag to call the new JavaScript code - <body onLoad="Load()">
- Save
Multiple Manuscripts In Progress
If, like me, you have several manuscripts in various forms of completion, adding a second counter (or third, etc) is pretty easy. Just copy and paste another section of HTML, and modify the second occurrence (or third, etc) accordingly.
Modifying
So you’ve got your handy-dandy word counters up and are pretty excited, except they look just like mine. You want to put your own unique stamp on them.
Color
Within the HTML section, locate the background-color attribute. You’ll find two of them – the first is the background of the meter, the color that reflects the words remaining (mine is a light gray). The second occurence of background-color is the color that reflects words written.
You’ll notice that what follows each of these attributes are not color names, but some funky text - #E8E8E8 and #6666FF, respectively. These are the hex values associated with the displayed colors.
Confused? Don’t be. Just refer to this color chart and copy/paste in the hex value of the new color you want.
Text Size
This one is even easier to change. Just look for the attribute called font-size. There are two of them – one for the manuscript title, and one for the word counts and percentage. Default is to 8 pt (which means point-size). Just change the number (upward or downward) to make the text bigger or smaller.
Fatness
Does your word counter need to go on a diet? Look for the height attribute – there’s only one. I prefer a slim meter, so the default is height:10px (pixels). Just like the Text size, changing this number will make your meter grow or shrink.
Length – not so fast
You may notice the width attribute and decide you want to change it from the default value of 100px. Don’t. The code assumes 1 pixel = 1 percentage point. Therefore, if you tweak this value, it will throw off your meter. I may come back and modify the code for this at some point, but for now, it is what it is.
Gimme the Code
JavaScript comes first, followed by the HTML.
<script type="text/javascript">
var completionPercentage = new Array();
var arrayCounter = 0;
function Load()
{
var collectionDIV = document.getElementsByTagName('div');
var collectionSPAN = document.getElementsByTagName('span');
var currentWordCount = 0;
var targetWordCount = 0;
var counter = 0;
//loop for the count & max values and for the percentage field (to set)
for (var i=0; i < collectionSPAN.length; i++)
{
if(collectionSPAN[i].id == 'currentWordCount')
{
currentWordCount = collectionSPAN[i].innerHTML;
}
else if(collectionSPAN[i].id == 'targetWordCount')
{
targetWordCount = collectionSPAN[i].innerHTML;
}
else if(collectionSPAN[i].id == 'completionPercentage')
{
collectionSPAN[i].innerHTML = CalculateCount(currentWordCount, targetWordCount);
}
}
//loop DIVs collection looking for meters
for (var i=0; i < collectionDIV.length; i++)
{
if(collectionDIV[i].id == 'meter')
{
collectionDIV[i].style.width = completionPercentage[counter] + 'px';
counter++;
}
}
}
function CalculateCount(current, target)
{
//generate percentage
var percentage = (current / target) * 100;
//formatting - round to 2 decimal places
var rounded = Math.round(percentage * 100) / 100;
//store value to array for later moving the meter
completionPercentage[arrayCounter] = rounded;
arrayCounter++;
//set the text field to the rounded percentage, with formatting applied
var formatted = "(" + rounded + "%)";
//return result for displaying
return formatted;
}
</script>
<div id="manuscript" style="font-size:8pt; text-align:center; width: 100px;">
<span id="manuscriptTitle">Fantasy Novel</span>
<br />
<div style="background-color:#E8E8E8; width:100px; height:10px; text-align:left;">
<div id="meter" style="background-color:#6666FF; width:0px; height:10px;"> </div>
</div>
<div style="width:100px; text-align:center; font-size:8pt;">
<span id="currentWordCount">12000</span>
<span> / </span>
<span id="targetWordCount">80000</span>
<br />
<span id="completionPercentage"></span>
</div>
<br />
</div id="manuscript_end">
Questions / Issues?
Post here and I’ll get back with you.
