Layout Rulers Bookmarklet
Inspired by Andy Budd’s Layout Grid Bookmarklet I decided to make my own version of it. Instead of a grid that can bloat the screen unreadable I wanted the same nifty rulers that Adobe Photoshop gives me by pressing Ctrl+R.
This bookmarklet will add some padding to the design when activated and then restore the original padding when deactivated. You can try out the Layout Rulers (Note that you have to refresh the page in order to remove the ruler set since you cannot click the link on the page to deactivate it) or download the ruler image and javascript source below.
);void(myBody=document.getElementsByTagName('body')%5B0%5D);if(myDiv!=null){void(myBody.removeChild(myDiv));void(myBody.style.paddingLeft=LeftPadding+'px');void(myBody.style.paddingTop=RightPadding+'0px');}else{void(myDiv=document.createElement ('div'));void(LeftPadding=document.defaultView.getComputedStyle(myBody,null).getPropertyValue('paddingLeft'));void(RightPadding=document.defaultView.getComputedStyle(myBody,null).getPropertyValue('paddingRight'));void(myBody.style.paddingLeft='15px');void(myBody.style.paddingTop='15px');void(myDiv.id='_grid_div_mrb');void(myDiv.style.background='url(http://www.subzane.com/files/layoutgrid-ps.gif)');void(myDiv.style.backgroundAttachment='fixed');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}
Note that this only works in Firefox
