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
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;
}
<div id=’mask’ class=’ometer_mask’>
<div id=’ometer’></div>
</div>
</div>
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 Reply