Created
August 30, 2010 15:01
-
-
Save hagenburger/557524 to your computer and use it in GitHub Desktop.
A Grid Overlay for Any Website
This file contains hidden or 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
| /* | |
| * 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'; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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})();