Margin Revealer

[Michiel van der Blonk]

Hi,

This might be more interesting to people interested in CSS, but
anyway....

The FF and IE toolbars both do a terrific job with the DOM explorer and
being able to outline almost anything, except... margins.

I have created a javascript solution that outlines elements' margins
when you click on them. Though this has some drawbacks (e.g. links
cannot show their margin) it has been an invaluable resource in CSS
development. I have no monetary gains/goals here, and just want the
best tools for everyone. So my tool is GPL, and should stay that way,
and hopefully someone can cooperate. Let me get some feedback from
everyone.

Now, I do realize that margins are intrinsically different from all
other visible properties, since they are 'not really there'. They are
simply invisible areas.

Here is the general idea of the solution:
- create a new element on top of the target using positioning
- give it padding in the same amount as the margin of the target
- give it a background-color

Some problems I encountered in earlier versions that I had to fix:
- The first version used position:relative. This is problematic since
it has to be a child-element of the target node. Some tags just cannot
have child elements, like e.g. <img> and <input>.
- Setting CSS properties through a style sheet didn't work, so I
reverted to using inline styles for everything.

I am using the Yahoo User Interface library.

You can see it in action here: http://vanderblonk.com/css/tools/mr/

It's quite hard to make this work cross-browser, since positioning is
not implemented the same way in all browsers. I have tested in FF and
IE only upto now.

Michiel

 

[Matt Kruse]

I have created a javascript solution that outlines elements' margins
when you click on them.

FYI, when I click on the body with IE6/XP it crashes my browser.

So my tool is GPL, and should stay that way,
and hopefully someone can cooperate. Let me get some feedback from
everyone.

Your code is compacted/condensed, so not really readable. If you want
comments on your code, it should be in readable form.

Now, I do realize that margins are intrinsically different from all
other visible properties, since they are 'not really there'. They are
simply invisible areas.

And they collapse. You don't have a test case for this, but I'd be curious
to know if collapsed margins are outlined correctly.

It's quite hard to make this work cross-browser, since positioning is
not implemented the same way in all browsers.

It's pretty close, and not _too_ difficult to get around.
The Yahoo library is not very robust in finding position. I believe my lib
at http://www.javascripttoolbox.com/lib/objectposition/ handles the more
general case.

In general, not a bad idea. But it looks like it needs some more work.

 

[Michiel van der Blonk]

Hi,

thanks for the reply. Well I know it needs some work, and making it
available as readable source code will help in getting feedback. I will
do that.

Margin collapse is one of the interesting things it does correctly.
Actually there is nothing special about it. The browser assigns a
margin, and I show it. That it's collapsed is no issue at all.

I will look into your library. It sounds promising.

Michiel

 

[Evertjan.]

Michiel van der Blonk wrote on 08 mei 2006 in comp.lang.javascript:

thanks for the reply.

Please always quote on usenet, Michiel.

Dit is geen email, en je schrijft niet tegen wie je het hebt.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at the
top of the article, then click on the "Reply" at the bottom of the article
headers. <URL: http://www.safalra.com/special/googlegroupsreply/ >