baseline.js

/*
Author: Simon Robson
Email: shrobson at google's email service

Javascript to place a baseline grid over the content of a page.

Dependencies:
------------
jQuery (http://www.jquery.com)

Tested in Safari (4.0.3) and FireFox (3.5.3)

Usage:
-----
Include jQuery
Include this file

When page is showing:

u - shift the grid up by 1 pixel
d - shift the grid down by 1 pixel
n - change to next grid
t - toggle grid display
i - show current grid info

Grids:
-----
Currently includes embedded data for 18px and 20/10px grids.

*/

var theGrid = {
	theGrid: null,
	topOffset: 0,
	
	init: function() {
		this.theGrid = this;
		$("body").append('<div id="thegrid"><div id="thegridstatus"></div></div>');
		$("#thegrid").css("position", "absolute").css("top", this.topOffset).css("left", 0);
		$("#thegridstatus").css("font-size", "24px").css("padding", "12px").css("background-color", "#9cf");
		$("#thegridstatus").css("text-align", "center").css("font-weight", "bold").css("color", "#333");
		$("#thegridstatus").hide();
		
		$("#thegrid").height($("body").height()).width("100%")
		$("#thegrid").css("background", "url(" + this.backgrounds.next() + ") repeat")
		
		this.bindKeyEvents();
		
	},
	
	bindKeyEvents: function() {

		$(document).keypress(function (e) {
			  
				var c = String.fromCharCode(e.which);
				
				if (c == 'd') { /* down */
				 	theGrid.topOffset++;
				} else if (c == 'u') { /* up */
					theGrid.topOffset--;
				} else if (c == 'n') { /* next grid */
					theGrid.topOffset = 0
					$("#thegrid").css("background", "url(" + theGrid.backgrounds.next() + ") repeat");
					theGrid.showStatus();			
				} else if (c == 't') { /* toggle */
					$("#thegrid").toggle();
				} else if (c == 'i') { /* info */
					theGrid.showStatus();
				}
				$("#thegrid").css("top", theGrid.topOffset + "px")
		});
	},
	
	showStatus: function() {
		$("#thegridstatus").text(theGrid.backgrounds.current().description);
		$("#thegridstatus").fadeIn("slow", function() {$(this).fadeOut("slow")})
	},
	
	backgrounds: {
		
		images: [
			{description: "18 pixel",
			data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAASCAMAAABFJTPgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFnePyneP0////gTFaqwAAAAN0Uk5T//8A18oNQQAAADJJREFUeNrszzERADAIBLCn/kXjgJkriYPknRV1dXV1dXV1dXV1dXV1dfV99RrlYy3AAIQ0IVP5pSbSAAAAAElFTkSuQmCC"},
			{description: "20 pixel",
			data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAAUCAMAAACTfND9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAxQTFRF2vP5nePyneP0////fUj/TgAAAAR0Uk5T////AEAqqfQAAAA4SURBVHja7NIBDQAwCAQxGP4942ACnp6DJldztkJHR0dHR0fPoR/O8Ojo6Ojo6OgB9Petg1sBBgCvBzXVUnPqdwAAAABJRU5ErkJggg=="}
			
			],
			
		currentIdx: -1,
		
		current: function() {
			return this.images[this.currentIdx % this.images.length]
		},
		
		next: function() {
			this.currentIdx++;
			return this.current().data
		}
		
	}	
}

$(document).ready(function(){ theGrid.init()});