Skip to content

Instantly share code, notes, and snippets.

@webxl

webxl/grid.js

Created September 21, 2011 17:04
Show Gist options
  • Save webxl/1232664 to your computer and use it in GitHub Desktop.
Save webxl/1232664 to your computer and use it in GitHub Desktop.
Download ZIP
CSS prototyping bookmarklet
Raw
grid.js
javascript:(function(){s1=document.createTextNode('.guidesOn::before { content:""; position:fixed; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxEAAAsRAX9kX5EAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjVJivzgAAAAyUlEQVRoQ%2B2abQqAIBBEPW1X6CzdqTv1RUFIipi2o72gPyXV7uybKci5wDZM8xI6dz%2Buvs6pP2Dq81GI2qiiiJkiOzQ97EGHTXUF9XUwYsaI2o1LjyqjpaYwiqDI2YFs2HtI9Wjx2Z0R%2B1ADdmB%2FC7taB0uzCSNqCqOImSIkeyW7xLXMZvqjdzJcS01hFEGRSnbe3miR7JVGgWRXcxkUQRFgj%2F8Y8htGtkJHL%2FvGaGtKd6bU9Z4C%2FCiEZDeCPahIa%2FbbDSNX433mVkIrV5rTnhDyAAAAAElFTkSuQmCC) 50% 0; z-index:1; top:0; right:0; bottom:0; left:0; opacity:.3; pointer-events:none; } * { -webkit-user-modify: read-write; word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; } a { -webkit-user-modify: initial; }');s2=document.createTextNode('#a1_z { background-color: #fff; background-color: rgba(255,255,255,.8); float: left; position: fixed; z-index:2; padding: 3px; border-bottom: 1px solid; border-right: 1px solid; top: 0; left: 0}');css=document.createElement('style');css.type='text/css';css.media='screen';document.getElementsByTagName('head')[0].appendChild(css);css.appendChild(s1);css.appendChild(s2);div=document.createElement('div');div.id='a1_z';input=document.createElement('input');input.type='checkbox';input.checked='checked';label=document.createElement('label');label.innerHTML=" Toggle Grid ";div.appendChild(input);div.appendChild(label);body=document.getElementsByTagName('body')[0];first=body.firstChild;document.body.className='guidesOn';body.insertBefore(div,first);function toggleGuides(){var oldClasses=document.body.className;var newClasses=oldClasses.replace(/\s*guidesOn\s*/,'');input.checked='';if(oldClasses==newClasses){newClasses+=' guidesOn';input.checked='checked';}document.body.className=newClasses;}input.onclick=toggleGuides;window.addEventListener('keydown',function(e){if(e.metaKey&&(e.keyCode==186||e.keyCode==59)){e.preventDefault();toggleGuides();}},false);})();
@zachstronaut
Copy link

if (e.metaKey && e.keyCode == 222) {

that doesn't work?

@lukescammell
Copy link

Nope. I wonder if Chrome just doesn't allow this kind of interaction on Windows?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment