-
-
Save hagenburger/557524 to your computer and use it in GitHub Desktop.
/* | |
* A Grid Overlay for Any Website | |
* ------------------------------ | |
* | |
* Open your browser console, paste in this code and you’re done. | |
* (Works at least for Safari, Firefox, Chrome and Internet Explorer 8.0) | |
* | |
* Adjust variables to your need. The example shows a 960.gs grid with 12 columns à 60px: | |
*/ | |
var columns = 12, gapWidth = 20, columnWidth = 60, opacity = 0.2, color = '#ff2a84', pageWidth = columns * columnWidth + (columns - 1) * gapWidth, grid = ''; | |
for (var i = 0; i < columns; i++, grid += '<div></div>'); | |
document.getElementsByTagName('BODY')[0].innerHTML += '<style>#grid-container{bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999999}#grid{height:100%;margin:0 auto;width:'+pageWidth+'px}#grid div{background:'+color+';float:left;height:100%;opacity:'+opacity+';filter:alpha(opacity='+opacity*100+');width:'+columnWidth+'px;margin-left:'+gapWidth+'px}#grid div:first-child{margin-left:0}</style><div id="grid-container"><div id="grid">'+grid+'</div></div>';'grid enabled'; |
Maybe there should be a input box, where you can paste in the variables.
Sure, pretty 'static' right now though it still helps if you need it for a dedicated project - modify/save once, then use without c&p'ing...
This works as a bookmarklet in Firefox 66.0.2 [2019] javascript:(function(){ var columns = 12, gapWidth = 16, columnWidth = 80, opacity = 0.2, color = '#ff2a84',%20pageWidth%20=%20columns%20*%20columnWidth%20+%20(columns%20-%201)%20*%20gapWidth,%20grid%20=%20'';%20for%20(var%20i%20=%200;%20i%20<%20columns;%20i++,%20grid%20+=%20'<div></div>');%20document.getElementsByTagName('BODY')[0].innerHTML%20+=%20'<style>#grid-container{bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999999}#grid{height:100%;margin:0%20auto;width:'+pageWidth+'px}#grid%20div{background:'+color+';float:left;height:100%;opacity:'+opacity+';filter:alpha(opacity='+opacity*100+');width:'+columnWidth+'px;margin-left:'+gapWidth+'px}#grid%20div:first-child{margin-left:0}</style><div%20id="grid-container"><div%20id="grid">'+grid+'</div></div>';'grid%20enabled';%20})();
And here's the script as a bookmarklet:
javascript:var%20columns%20=%2012,%20gapWidth%20=%2020,%20columnWidth%20=%2060,%20opacity%20=%200.2,%20color%20=%20%27#ff2a84%27,%20pageWidth%20=%20columns%20_%20columnWidth%20+%20(columns%20-%201)%20_%20gapWidth,%20grid%20=%20%27%27;for%20(var%20i%20=%200;%20i%20<%20columns;%20i++,%20grid%20+=%20%27
%27);document.getElementsByTagName(%27BODY%27)[0].innerHTML%20+=%20%27<style>#grid-container{bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999999}#grid{height:100%;margin:0%20auto;width:%27+pageWidth+%27px}#grid%20div{background:%27+color+%27;float:left;height:100%;opacity:%27+opacity+%27;filter:alpha(opacity=%27+opacity*100+%27);width:%27+columnWidth+%27px;margin-left:%27+gapWidth+%27px}#grid%20div:first-child{margin-left:0}</style><div%20id=%22grid-container%22><div%20id=%22grid%22>%27+grid+%27%27;%27grid%20enabled%27;Now we only need a 'Hide grid' version :-)