chrome userscript to visualize the http://960.gs/ containers / grid

grid style visualizer.js

// ==UserScript==
// @match http://www.carddreams.nl/*
// ==/UserScript==
// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
  script.addEventListener('load', function() {
    var script = document.createElement("script");
    script.textContent = "window.$=jQuery.noConflict(true);(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

// the guts of this userscript
function main() {
function showclass() {
	hello = $('<div>'+$(this).attr('class')+'</div>');
        offset = $(this).offset();
	hello.css({
             'position': 'absolute',
             'top': offset.top,
             'left': offset.left,
             'height': $(this).height(),
             'width': $(this).width(),
             'z-index': 9999,
             'border-style': 'solid',
             'border-width': '1px'
	});
	$('body').append(hello);
}
	$('[class^="container_"]').each(showclass);
	$('[class^="grid_"]').each(showclass);
}

// load jQuery and execute the main function
addJQuery(main);