Skip to content

Instantly share code, notes, and snippets.

@simonrobson
Created September 27, 2009 12:09
Show Gist options
  • Save simonrobson/194742 to your computer and use it in GitHub Desktop.
Save simonrobson/194742 to your computer and use it in GitHub Desktop.
/*
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()});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment