Layout Grid Bookmarklet | July 23, 2006
Inspired by Khoi Vinh’s post about using a background image of a grid for layout, and a subsequent post over at Smiley Cat about the same thing, I decided to knock up a quick Photoshop style Layout Grid Bookmarklet
The above bookmarklet simply applies a layout grid image to the body of the page. I have also created a Layout Grid Overlay Bookmarklet which creates a div, positions it absolutely and then applies the background image to the div. Because the image is transparent, you get a nice overlay effect. By changing the position of the div to “fixed” you can also create a nice Layout Grid Fixed Overlay Bookmarklet which may be useful on occasion.
[UPDATE:] Marcus Breese just emailed me a show/hide layout grid bookmarklet, which is great becasue now I don’t have to make one. Thanks Marcus.
Posted at July 23, 2006 2:26 PM
;void(el=d.getElementsByTagName('body'));void(el%5B0%5D.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');){kind=link}
);void(myBody=document.getElementsByTagName('body')%5B0%5D);void(myDiv.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');void(myDiv.style.position='absolute');void(myDiv.style.width='100%');void(myDiv.style.height='100%');void(myDiv.style.top='0');void(myDiv.style.left='0');void(myBody.appendChild(myDiv));){kind=link}
);void(myBody=document.getElementsByTagName('body')%5B0%5D);void(myDiv.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');void(myDiv.style.position='fixed');void(myDiv.style.width='100%');void(myDiv.style.height='100%');void(myDiv.style.top='0');void(myDiv.style.left='0');void(myBody.appendChild(myDiv));){kind=link}
);void(myBody=document.getElementsByTagName('body')%5B0%5D);if(myDiv!=null){void(myBody.removeChild(myDiv));}else{void(myDiv=document.createElement ('div'));void(myDiv.id='_grid_div_mrb');void(myDiv.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');void(myDiv.style.position='absolute');void(myDiv.style.width=myBody.offsetWidth+ 'px');void(myDiv.style.height=myBody.offsetHeight+'px');void(myDiv.style.top='0');void(myDiv.style.left='0');void(myBody.appendChild(myDiv));}){kind=link}
Jon Hicks said on July 23, 2006 4:25 PM
Genius!!