Post Archive
› September 10, 2003
New Bookmarklet: Align
Update: This bookmarklet now has a new page devoted to it with Step-by-Step instructions on how to use it, check that out first.
So the recent discussion of bookmarklets got me thinking. Most of the CSS helper bookmarklets out there (including my old "show divs") function by adding a border to specific elements on the fly. This is helpful for identifying where a particular element or types of elements are located, and how much space they are taking up. But when it comes time to really fine tune your CSS layout, the 1 pixel added to all sides by the border, can throw off your alignments, or even your whole layout (remember it's 2 pixels per vertical and horizontal multiplied by however many items are being highlighted).
And so, in my wanna-be programmer ways, I tried cooking something up, but not from scratch of course. This new bookmarklet is based off my favorite and most often-used diagnosis tool made by Kevin C. Smith of Centricle, the Show Specific Elements favelet. I like Kevin's favelet because it's supremely flexible through prompting for element and color. So I used this concept to make a bookmarklet that prompts for element and side - as in left, right, top, bottom. These two bits of info are used to alter the styling of the page you are visiting by adding either a left, right, top, or bottom aligned background image. The background image is repeated on either the x or y axis as appropriate. There are 4 background images, one for each side, designed to help you see how many pixels off some things are from other things.
It's probably kind of pointless to try to explain it all, when testing it out is really the best way see what I'm trying to accomplish. I have a little page set aside (which I will be updating) for the Align bookmarklet [url updated] where the bookmarklet can be grabbed and/or tested out. The Web-Graphics home page is a somewhat more interesting place to test it. Real programmers might have some suggestions for improving the code, or perhaps you have better ideas for the background images? Return to this post to leave some feedback, questions, or suggestions for improvement, all are very welcome here.
Comments
1. September 10, 2003 02:17 AM
2. September 10, 2003 02:50 AM
Keith Posted…
Nice work Nate, from a quick few minutes playing with it I can see how it could be really helpful. Could have used it earlier today I'm thinking. I was using the Show Specific Element Bookmarklet and it was doing exactly as you describe, pushing my whole layout out of wack -- making it just that much harder to try and decipher what was going wrong.
Thanks man.
3. September 10, 2003 03:29 AM
Andras Posted…
Just an idea: what do you think about creating extra divs at the same position and dimensions as the page's div, but above them. It won't modify the page layout, but can show the divs exactly. There're some things you have to solve, but I think it would be as good as your idea.
4. September 10, 2003 08:58 AM
Nate Posted…
Andreas - actually that sounds even better, I was originally trying to get all four sides outlined, but I as far as I can tell, elements are only allowed to have one background assigned via CSS. Keith - thanks for the kind words, I hope it proves to be useful.
By the way, if you have a better idea for the actual graphics that are used, by all means share - the 4 graphics I made (e.g. left) are all the same, just rotated in photoshop. They can be any size you like, simply name them: top.gif, left.gif, right.gif, and bottom.gif. FYI - the path to said images needs to be changed in the bookmarklet code if you make your own version of this bookmarklet.
5. September 10, 2003 11:49 AM
Andreas Posted…
That wasn't me, Nate. Andras ≠ Andreas ;-) Nice bookmarklet, by the way.
Nate Posted…
If anyone is interested in making variations, I'd recommend against trying to post them directly into comments here, as characters might get translated. Instead, link to a page on your server, or contact me through the contact form so I can add them to the align page. Also, I found this url encoding information very helpful.