Monkeyshines

The War-and-Peace-O-Meter

Some years ago I asked for War and Peace by Leo Tolstoy for Christmas; a new translation had just been published, and that seemed as good a reason as any to tackle this metaphorically and literally immense book. I do a lot of my reading on the bus, which has tended to put me off starting it, but I decided that I should stop procrastinating and get on with it. I’ve read the first few chapters, and I’m enjoying it – I was a bit worried that my historical ignorance might make the setting a bit confusing, but Tolstoy does a fine job of filling in the background, and there are a few judicious notes by the translator, Anthony Briggs (it’s the 2005 Penguin edition, by the way).

I thought it might be nice to visually track my progress, so, naturally, I built a War-and-Peace-O-Meter. I swiped the image from elsewhere, modified it a bit, then wrote some very simple CSS rules to do the “filling up”. For the War-and-Peace-O-Meter I only need a static level (and will be posting weekly updates), but to demonstrate how you can fill up the meter dynamically, you can change the percentage:

%

Geek Details

Method:
The image of the -o-meter is a gif with transparency in the middle. Behind that is a div with a white background, and behind that is a div with a red background. The height of the middle div is dynamically adjusted, revealing more or less of the red behind. This is a bit more complicated than absolutely necessary, but it’s easy to implement, and it’s flexible in that you don’t have to use a solid block of colour as the bottom layer, it could be an image that is gradually revealed. Like in pubs which have packets of nuts mounted on a bit of card, and which reveal a saucy lady as the packets are removed. No saucy ladies here though, this is a family-friendly website.

Image:
ometer.gif

CSS:
.ometer_coloured { background:crimson; width:90px; height:370px; } .ometer_mask { background:white; position:absolute; z-index:1; height:361px; width:90px; } #ometer { background:url(‘/img/ometer.gif’) no-repeat; position:absolute; z-index:10; width:90px; height:370px; }

HTML:
<div class=’ometer_coloured’> <div id=’mask’ class=’ometer_mask’> <div id=’ometer’></div> </div> </div>

JS:
function updateMeter(ometer_mask_id, ometer_pc_id) { var pc = document.getElementById(ometer_pc_id).value; var numericExpression = /^[0-9\.]+$/; if (pc.match(numericExpression)){ var total_rows = 353; rows = Math.round(total_rows * (pc/100)); if (rows > total_rows) { rows = total_rows; } rows = 361 – rows; var mask = document.getElementById(ometer_mask_id) mask.style.height = rows+’px’; } else { alert(‘Numbers only, please.’); } }

Leave a Comment

:
: (will not be published)
: