Grid Overlay Bookmarklet
by Thomas Aylott Thu, 27 Jul 2006 16:19:00 GMT
Just a quick note to share my version of Andy Budd’s Layout Grid Bookmarklet.
Grid Centered Translucent FFx & Safari
Grid Centered Translucent IE 5.5–7
Grid Translucent Left-Aligned FFx & Safari
Grid Translucent IE Left-Aligned 5.5–7
This version uses a translucent png.
Share and enjoy!
);void(myBody=document.getElementsByTagName('body')%5B0%5D);if(myDiv!=null){void(myBody.removeChild(myDiv));}else{void(myDiv=document.createElement%20('div'));void(myDiv.id='_grid_div_mrb');void(myDiv.style.background='url(http://trippledoubleyou.subtlegradient.com/tools/layoutgrid-centered_translucent.png)');void(myDiv.style.backgroundPosition='top%20center');void(myDiv.style.position='absolute');void(myDiv.style.width=myBody.offsetWidth+%20'px');void(myDiv.style.height=myBody.offsetHeight+'px');void(myDiv.style.top='0');void(myDiv.style.left='0');void(myBody.appendChild(myDiv));}){kind=link}
{myDiv=document.getElementById('_grid_div_mrb');myBody=document.getElementsByTagName('body')%5B0%5D;if(myDiv!=null){myBody.removeChild(myDiv);}else{myDiv=document.createElement%20('div');myDiv.id='_grid_div_mrb';myDiv.style.background='none';myDiv.style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'http://trippledoubleyou.subtlegradient.com/tools/layoutgrid-centered_translucent.png\', sizingMethod=\'image\')';myDiv.style.position='absolute';myDiv.style.width=myBody.offsetWidth+%20'px';myDiv.style.height=myBody.offsetHeight+'px';myDiv.style.top='0';myDiv.style.left='0';myBody.appendChild(myDiv);};})();){kind=link}
);void(myBody=document.getElementsByTagName('body')%5B0%5D);if(myDiv!=null){void(myBody.removeChild(myDiv));}else{void(myDiv=document.createElement%20('div'));void(myDiv.id='_grid_div_mrb');void(myDiv.style.background='url(http://trippledoubleyou.subtlegradient.com/tools/layoutgrid_translucent.png)');void(myDiv.style.backgroundPosition='top%20left');void(myDiv.style.position='absolute');void(myDiv.style.width=myBody.offsetWidth+%20'px');void(myDiv.style.height=myBody.offsetHeight+'px');void(myDiv.style.top='0');void(myDiv.style.left='0');void(myBody.appendChild(myDiv));}){kind=link}
{myDiv=document.getElementById('_grid_div_mrb');myBody=document.getElementsByTagName('body')%5B0%5D;if(myDiv!=null){myBody.removeChild(myDiv);}else{myDiv=document.createElement%20('div');myDiv.id='_grid_div_mrb';myDiv.style.background='none';myDiv.style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'http://trippledoubleyou.subtlegradient.com/tools/layoutgrid_translucent.png\', sizingMethod=\'image\')';myDiv.style.position='absolute';myDiv.style.width=myBody.offsetWidth+%20'px';myDiv.style.height=myBody.offsetHeight+'px';myDiv.style.top='0';myDiv.style.left='0';myBody.appendChild(myDiv);};})();){kind=link}
Great idea, just came across this from Andy Budd’s page. Didn’t like that his replaced the site’s current body bg image. And the fact that your version is toggle-able is brilliant. Good work! I know I’ll be using this.
Hi, I would love to use your grid, but not being totally computer savvy, I am unsure how to transfer it to where I wish to use it. I actually want to try it on an ongoing international search for star dust particles that I am participating in.
http://stardustathome.ssl.berkeley.edu ss_login_form.php
Thanks for any help.
Lisa
Here’s a link to the actual image file itself. http://trippledoubleyou.subtlegradient.com/tools/layoutgrid-centered_translucent.png
Here’s a link to the actual image file itself. http://trippledoubleyou.subtlegradient.com/tools/layoutgrid-centered_translucent.png