Screengrab a website in Firefox

I’ve had a few occasions to print out a website exactly as the browser is displaying it. Usually it involves a screen grab, scroll down, screen grab, scroll down etc. and then stitching the images back together. I’ve now found a much simpler solution – ScreenGrab:

Screengrab! is an extension for Firefox that makes it easy to save a web-page as an image. With it, you can save anything that you can see in a browser window – from a small selection, to a complete page.

Popups that resize themselves

In your ASPX page, add the following such that it renders in the top-right of the popup window

And add this code such that it renders in the bottom-left of the popup window

Then add the following Javascript to your page and make a call to resizeThisWindow().

// Default window dimensions to add to the size we 'read' from the divs var _modifyX = 18; var _modifyY = 30;  function resizeThisWindow() {   var divX = document.all['divMarkerX'];   var divY = document.all['divMarkerY'];    var x = getAbsX(divX);   var y = getAbsY(divY);    //stop it becoming too big, for little monitor support   if ( x > 800 ) {     x = 800;   }    if ( y > 600 ) {     y = 600;   }      window.resizeTo(x + _modifyX, y + _modifyY);   //alert(x +" " + y); }   function getAbsX(elt) {   return parseInt(elt.x) ? elt.x : getAbsPos(elt,"Left"); }   function getAbsY(elt) {   return parseInt(elt.y) ? elt.y : getAbsPos(elt,"Top"); }   function getAbsPos(elt,which) {   iPos = 0;   while (elt != null) {     iPos += elt["offset" + which];     elt = elt.offsetParent;   }   return iPos; }

The modify X and Y values take into account default window scrollbar widths etc therefore users with non-standard settings may see things differently.

If you use master pages, put the above into a seperate template for popup windows and override the default X and Y in the implementation pages if they use scrollbars etc.

I found a new HTML tag!

Well it’s not everyday it happens is it? There I was reading Jakob Neilsons’ article on Radiobuttons and checkboxes and I happened across the <label> HTML tag. Okay, so its only part of the HTML4 recommendation but it appears to work in Firefox and IE.

It basically lets you increase the target size of your radiobutton (which, as i’ve just read is called Fitts’s law) by making the text alongside the radiobutton linkable. This, i’ve achieved previously with a span tag. D’oh.

Sample form below. You’ll see that clicking on the “first name” takes you into the edit box for the first name, and clicking male/female chooses that radiobutton. Neat.

First name:
Last name:
email:
Male
Female

And here’s the HTML for that…

<p>
<label for="firstname">First name: </label> <input id="firstname" type="text">
<label for="lastname">Last name: </label> <input id="lastname" type="text">
<label for="email">email: </label> <input id="email" type="text">
<input name="sex" value="Male" id="male" type="radio"> <label for="male">Male</label>
<input name="sex" value="Female" id="female" type="radio"> <label for="female">Female</label>
</p>