baseline.js

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

Javascript to place a baseline layer or 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
l - shift the grid left by 1 pixel
r - shift the grid right 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 baselines and 960 width grids at 12 or 16 columns

Inspired by: http://960.gs and http://baselinecss.com

*/

var theGrid = {
	theGrid: null,
	topOffset: 0,
	leftOffset: 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);
		
		$("#thegrid").css("opacity", 0.8);
		$("#thegrid").css("-moz-opacity", 0.8);
		$("#thegrid").css("filter", "alpha(opacity=80)");
		
		$("#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() + ") " + theGrid.backgrounds.current().positioning);
		
		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 == 'l') { /* left */
					theGrid.leftOffset--;
				} else if (c == 'r') { /* right */
					theGrid.leftOffset++;
				} else if (c == 'n') { /* next grid */
					theGrid.topOffset = 0
					$("#thegrid").css("background", "url(" + theGrid.backgrounds.next() + ") " + theGrid.backgrounds.current().positioning);
					theGrid.showStatus();			
				} else if (c == 't') { /* toggle */
					$("#thegrid").toggle();
				} else if (c == 'i') { /* info */
					theGrid.showStatus();
				}
				$("#thegrid").css("top", theGrid.topOffset + "px")
				$("#thegrid").css("left", theGrid.leftOffset + "px")
		});
	},
	
	showStatus: function() {
		$("#thegridstatus").text(theGrid.backgrounds.current().description);
		$("#thegridstatus").fadeIn("slow", function() {$(this).fadeOut("slow")})
	},
	
	backgrounds: {
		
		images: [
			{description: "Baseline - 18 Pixels",
			positioning: "repeat",
			data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAASCAMAAABFJTPgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFnePyneP0////gTFaqwAAAAN0Uk5T//8A18oNQQAAADJJREFUeNrszzERADAIBLCn/kXjgJkriYPknRV1dXV1dXV1dXV1dXV1dfV99RrlYy3AAIQ0IVP5pSbSAAAAAElFTkSuQmCC"},
			{description: "Baseline - 20 pixels",
			positioning: "repeat",
			data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAAUCAMAAACTfND9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAxQTFRF2vP5nePyneP0////fUj/TgAAAAR0Uk5T////AEAqqfQAAAA4SURBVHja7NIBDQAwCAQxGP4942ACnp6DJldztkJHR0dHR0fPoR/O8Ojo6Ojo6OgB9Petg1sBBgCvBzXVUnPqdwAAAABJRU5ErkJggg=="},
			{description: "960 Grid - 12 Columns",
			positioning: "repeat-y top center",
			data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA/wAAAAUCAMAAAAHgMa7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/+bm////FZ0YigAAAAJ0Uk5T/wDltzBKAAAAe0lEQVR42uzTsQ0AAARFQfZf2gIKotCcAU7ykxc5vDgcj8f79dof4ufxxC9+Hk/8xuLxxG98Hk/8xufxxG98Hk/8xufxxG98Hk/8xufxxG98Hk/8PB5P/DweT/w8Hk/8PB5P/DweT/w8Hk/8PB5P/DweT/w8Hm8bfwkwAEdtF3G9dPahAAAAAElFTkSuQmCC"},
			{description: "960 Grid - 16 Columns",
			positioning: "repeat-y top center",
			data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA/wAAAAUCAMAAAAHgMa7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/+bm////FZ0YigAAAAJ0Uk5T/wDltzBKAAAAc0lEQVR42uzToREAAAgDMdh/aRZAFIcIPojefXV4FR7Lsv/s+k/8LCt+8bOs+I3FsuI3NMuK39AsK35Ds6z4Dc2y4jc0y4qfZVnxsywrfpZlxc+yrPhZlhU/y7LiZ1lW/CzLip9lWfGzLCt+lmWv8Y8AAwCahB2xxXz/QAAAAABJRU5ErkJggg=="}
			
			],
			
		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()});