Screen Measurement

This little bit of JavaScript will let you measure the pixel size of elements of your screen. With this code added to a page, it will display the coordinates of the tip of the mouse and allow you to click & drag a box on the screen to measure ... whatever it is you want to measure.

It's also noteworthy that when you add this code to your page, it will hijack your mouse clicks so you won't be able to click on links or other typically "clickable" elements of your page.

Here's the code:

<div id="toolTip" onClick="resetIt()"
style="position:absolute;
 border:0px solid;
 background:white;
 filter:alpha(opacity=75);
 moz-opacity:.75;
 opacity:.75;
 white-space:nowrap;"></div>
<script type="text/javascript">
var tt = document.getElementById("toolTip");
var bod = document.body;
var browser = navigator.appName;
var clickX = 0, clickY = 0;
//
// set up the page onLoad
if (browser == "Netscape") { window.addEventListener('load', resetIt, false); }
else { window.attachEvent('onload', resetIt); }
//
// track the mouse movement & update the tooltip
function move(e)
{ try
{
 tt.style.top = e.clientY + 20;
 tt.style.left = e.clientX + 10;
 tt.innerHTML = e.clientX + ", " + e.clientY;
}
catch(err){}
}
//
// fix the box to the mouse coords & prep it for resize
function click(e)
{ try
{
 tt.style.border = "1px solid";
 if (browser == "Netscape") {
  tt.style.top = e.clientY; clickY = e.clientY;
  tt.style.left = e.clientX; clickX = e.clientX;
  bod.removeEventListener('mousemove', move, false);
  bod.addEventListener('mousemove', resizer, false);
 } else {
  tt.style.top = e.clientY - 2; clickY = e.clientY - 2;
  tt.style.left = e.clientX - 2; clickX = e.clientX - 2;
  bod.detachEvent('onmousemove', move);
  bod.attachEvent('onmousemove', resizer);
 }
}
catch(err){}
}
//
// update the tooltip with the size of the box and resize it to match the mouse
function resizer(e)
{ try
{
 tt.innerHTML = tt.style.width + ", " + tt.style.height;
 tt.style.height = e.clientY - clickY;
 tt.style.width = e.clientX - clickX;
}
catch(err){}
}
//
// catch the mouseUp and show the size of the box
function stopResize(e)
{ try
{
 if (browser == "Netscape") { bod.removeEventListener('mousemove', resizer, false); }
 else { bod.detachEvent('onmousemove', resizer); }
 tt.innerHTML = tt.style.width + ", " + tt.style.height + "<br>(reset)";
}
catch(err){}
}
//
// initial setup & reset of the tooltip
function resetIt(e)
{ try
{
 tt.style.height = "";
 tt.style.width = "";
 tt.style.border = "0px solid";
 tt.innerHTML = "";
 if (browser == "Netscape") {
  bod.removeEventListener('mousemove', resizer, false);
  bod.addEventListener('mousemove', move, false);
  bod.addEventListener('mousedown', click, false);
  bod.addEventListener('mouseup', stopResize, false);
 } else {
  bod.detachEvent('onmousemove', resizer);
  bod.attachEvent('onmousemove', move);
  bod.attachEvent('onmousedown', click);
  bod.attachEvent('onmouseup', stopResize);
 }
}
catch(err){}
}
</script>

The easiest way to include this in your page is probably to save the code as an HTML file on your development machine and adding this line to the page that you're working on:

<script type="text/javascript" src="path/to/saved.html">

Or, if you trust my code, you can simply add this line to your page and pull my code remotely:

<script type="text/javascript" src="http://mr.ben.bradley.googlepages.com/screenTape.html">