## mark a section (Learn more)

For a while now I've been maintaining a <a href="http://running.davidfindlay.org/" title="Dave's Running Log">running log</a> on a <a href="http://backpackit.com/?referrer=BPJ7ZL9" title="Backpack">Backpack </a>page. I like Backpack because it's quick and convenient to use. However, for my running log I could really use a little bit of spreadsheet functionality, to sum the miles I've run in a given month for me, and that's just not Backpack's bag (pardon the pun). So, since I'm reading <a href="http://www.manning.com/crane/" title="Ajax in Action">Ajax in Action</a> at the moment, it seemed like a good time to play a little bit with JavaScript and <a href="http://greasemonkey.mozdev.org/" title="greasemonkey">greasemonkey</a>. If you're not familiar with it, greasemonkey is a Firefox extension that allows you to apply custom JavaScript to webpages. You install scripts that you write or download, into greasemonkey. You then tell it, via one or more regular expressions, which pages the scripts should be applied to. I use a few greasemonkey scripts already, for viewing images (<a href="http://shiftingpixel.com/lightbox">Greased Lightbox</a>), tweaking Flickr's interface, and so on. So I decided I would write my own greasemonkey script to do all that bothersome addition for me on my running log. After a few false starts, caused by me trying to use <a href="http://www.joehewitt.com/software/firebug/">FireBug</a>'s console for logging, which isn't exposed in greasemonkey, I got it to work: <a href="http://www.flickr.com/photos/finsprings/233135324/" title="Photo Sharing"><img src="http://static.flickr.com/83/233135324_608390f864_o.png" alt="greasemonkeybackpack" height="405" width="313" /></a> The text in green at the bottom is generated by the script (the total above it in black is my previous hard-coded one). The script isn't done yet; for one it has next to no error handling. Also, because of the ajax nature of Backpack, my totals get lost whenever I edit the page, forcing me to do a full page refresh to get them back. So, I might add a keyboard shortcut to turn the totals on and off next. FWIW, here’s the script in all its "glory"; try not to laugh at my JavaScript skills or lack thereof: // ==UserScript== // @name Dave's Running Log Helper // @namespace http://davidfindlay.org/greasemonkey // @description Sum each month's miles and display a total // @include * // ==/UserScript== // uncomment the next line and the last in the file to delay until load time //window.addEventListener('load', function() { // can't seem to do this in greasemonkey, so do it the hard way //var notes = document.getElementsByClassName('note'); var divs = document.getElementsByTagName('div'); var notes = []; for (var n = 0; n < divs.length; n++) { if (divs[n].className == "note_content") { //GM_log("found note content"); notes[notes.length] = divs[n] } } for (var i = 0; i < notes.length; i++) { var total = 0.0; var note = notes[i]; var trs = note.getElementsByTagName('tr'); for (var j = 0; j < trs.length; j++) { var tr = trs[j]; var tds = tr.getElementsByTagName('td'); if (tds.length == 3) { var distanceNode = tds[2]; if ((distanceNode.childNodes.length == 1) && (distanceNode.childNodes[0].nodeType == 3)) { var distance = parseFloat(distanceNode.childNodes[0].nodeValue); if (!isNaN(distance)) { total += distance; } } } } if (total > 0.0) { //GM_log("total distance" + total); var totalEl = document.createElement('p'); totalEl.style.color = 'green'; var totalTxt = document.createTextNode('Total = ' + total + ' miles'); totalEl.appendChild(totalTxt); note.appendChild(totalEl); } } } //, true);

This paste will be private.