pixelperfect

A bookmarklet that allows you to drag elements on any page and informs you of the new coordinates.

Current version: v0.2

Installing

Drag the following link onto your bookmarks bar: pixelperfect (or just click to try on this page)

In IE you have to "Add To Favorites"

Now go to your favorite website, click the bookmarklet and you'll now be able to rearrange the page!

Why?

Useful for designers to work out how much to move an element, instead of the iterative "change CSS, refresh" approach.

Bonus: play tricks on colleages by insisting the a page is rendering incorrectly ;-)

Use

• On any webpage you can click the bookmarklet to load it dynamically.
• Once loaded it will appear in the top left of the screen
• Move elements around the page via dragging and their top/left coordinates will be displayed.
• Use Spacebar to toggle the visibility of the dialogue

Notes

• uses jQuery and UI
• By weepy @ parkerfox

Change History

0.2: Toggle visibility functionality improved