Created
September 28, 2009 08:28
-
-
Save simonrobson/195297 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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()}); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment