Guides Bookmarklet 0.1
I’ve put together a simple bookmarklet to allow you to add Photoshop and Illustrator-style guides to any webpage. This is something that I’ve wanted for awhile, after finding myself feeling ridiculous while holding a sheet of paper up to the screen to check whether things are lined up.
Just drag this link to your bookmarks bar, or right-click on it, or save it however you save a bookmark typically:
Guides Bookmarklet
When you click on the link, grey bars will appear across the top and left side of the page. From these bars, you may drag out as many guides as you need onto the page. Guides can be repositioned once they are on the page as well; just hover until you see the little arrow cursor. Finally, to remove a guide, just drag it off the side of the page. (That last part may not work in IE.)
This is version 0.1, meaning that I worked on it for about 3 hours overall. So tell me: as a web designer or developer, what would make this more wonderful to you? What other features would you totally use?
Also, please let me know about any bugs!
December 5th, 2009 at 8:54 pm
How about an X in the upper left or upper right that’ll clear all the guides.
Also, a bug: I have to move the mouse pretty slowly to keep dragging the guide. If I move too fast the guide stays in one spot but will continue to drag if I hover over it again (even if I stopped holding the mouse button down) This happens both with speed and whenever you mouse over any elements on a page that change the cursor (link hand or text bar). The dragging in general is behaving kinda oddly on my computer.
December 5th, 2009 at 8:56 pm
On the positive side, however, I can see this coming in handy, as I’ve used a piece of paper to try to line things up many times at work.