{"id":722,"date":"2011-05-28T16:51:18","date_gmt":"2011-05-28T15:51:18","guid":{"rendered":"http:\/\/www.monkeyshines.co.uk\/blog\/?p=722"},"modified":"2011-05-28T23:24:03","modified_gmt":"2011-05-28T22:24:03","slug":"the-war-and-peace-o-meter","status":"publish","type":"post","link":"https:\/\/monkeyshines.co.uk\/blog\/the-war-and-peace-o-meter\/","title":{"rendered":"The War-and-Peace-O-Meter"},"content":{"rendered":"

\nSome years ago I asked for War and Peace<\/em> 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).\n<\/p>\n

\n
\n
\n
\t<\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n

\nI thought it might be nice to visually track my progress, so, naturally, I built a War-and-Peace-O-Meter<\/strong>. I swiped the image from elsewhere<\/a>, modified it a bit, then wrote some very simple CSS rules to do the “filling up”. For the War-and-Peace-O-Meter<\/strong> 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:\n<\/p>\n

\n
\n %
\n<\/fieldset>\n<\/form>\n
<\/div>\n

Geek Details<\/h1>\n
Method<\/strong>: <\/div>\n
The image of the -o-meter<\/strong> 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.<\/span>\n<\/div>\n
<\/div>\n
Image<\/strong>: <\/div >\n
ometer.gif<\/a><\/div >\n
<\/div>\n
CSS<\/strong>: <\/div>\n
.ometer_coloured {
\n\tbackground:crimson;
\n\twidth:90px;
\n\theight:370px;
\n\t}
\n.ometer_mask {
\n\tbackground:white;
\n\tposition:absolute;
\n\tz-index:1;
\n\theight:361px;
\n\twidth:90px;
\n\t}
\n#ometer {
\n\tbackground:url(‘\/img\/ometer.gif’) no-repeat;
\n\tposition:absolute;
\n\tz-index:10;
\n\twidth:90px;
\n\theight:370px;
\n\t}\n<\/div>\n
<\/div>\n
HTML<\/strong>: <\/div>\n
<div class=’ometer_coloured’>
\n\t<div id=’mask’ class=’ometer_mask’>
\n\t\t<div id=’ometer’><\/div>
\n\t<\/div>
\n<\/div>\n<\/div>\n
<\/div>\n
JS<\/strong>: <\/div>\n
function updateMeter(ometer_mask_id, ometer_pc_id) {
\n var pc = document.getElementById(ometer_pc_id).value;
\n var numericExpression = \/^[0-9\\.]+$\/;
\n if (pc.match(numericExpression)){
\n var total_rows = 353;
\n rows = Math.round(total_rows * (pc\/100));
\n if (rows > total_rows) {
\n rows = total_rows;
\n }
\n rows = 361 – rows;
\n var mask = document.getElementById(ometer_mask_id)
\n mask.style.height = rows+’px’;
\n } else {
\n alert(‘Numbers only, please.’);
\n }
\n}\n<\/div>\n