Hi,
I have come across a cross-browser issue when playing around with
MochiKit.Style.getElementDimensions() and
MochiKit.Style.getElementPosition().
Suppose that I have a DIV, containing a paragraph with a link, like
so:
<div>
<p>This is a div with some text and <a id="link" href="#">a link
that may line wrap</a> inside. More text.</p>
</div>
In the examples below I call MochiKit.Style.getElementDimensions(link)
and MochiKit.Style.getElementPosition(link).
exampleTwo.html is identical to exampleOne.html, except that I
restrict the width of the DIV to 250px so that the link is line-
wrapped and appears on two lines. Thus, the height of the link
doubles. I and the three tested browsers agree on this. But what about
the width? And the x-position?
In Firefox 2.0.0.3/Linux the width of the link goes from 131px to
225px.
In Opera 9.20/Linux the width of the link goes from 131px to 249px.
In IE6/Win the width of the links goes from 131px to 228px.
In Firefox 2.0.0.3/Linux the x-position of the link goes from 173px to
173px (no change).
In Opera 9.20/Linux the x-position of the link goes from 171px to 0px.
In IE6/Win the x-position of the links goes from 175px to 2px.
Is there a way to get this a bit more friendly? I am trying to attach
a popup menu to inline A elements, so I need to know their positions
and dimensions in order to correctly position the popup.
I am using the packed version of MK, revision 1292, the latest svn
version as of today.
Examples:
ExampleOne.html:
<html>
<head>
<style type="text/css">
* { margin:0; padding:0;}
p { font-family: arial; font-size:12px;}
div { width: 650px;}
</style>
<script type="text/javascript" src="static/MochiKit.js"></script>
<script type="text/javascript">
function loaded() {
var element = $("link");
var size = MochiKit.Style.getElementDimensions(element);
var pos = MochiKit.Style.getElementPosition(element);
alert("pos(" + pos.x + "," + pos.y + "); size (" + size.w +
"," + size.h + ")");
}
connect(window, "onload", loaded);
</script>
</head
<body>
<div>
<p>This is a div with some text and <a id="link" href="#">a link
that may line wrap</a> inside. More text.</p>
</div>
</body>
</html>
ExampleTwo.html
<html>
<head>
<style type="text/css">
* { margin:0; padding:0;}
p { font-family: arial; font-size:12px;}
div { width: 250px;}
</style>
<script type="text/javascript" src="static/MochiKit.js"></script>
<script type="text/javascript">
function loaded() {
var element = $("link");
var size = MochiKit.Style.getElementDimensions(element);
var pos = MochiKit.Style.getElementPosition(element);
alert("pos(" + pos.x + "," + pos.y + "); size (" + size.w +
"," + size.h + ")");
}
connect(window, "onload", loaded);
</script>
</head
<body>
<div>
<p>This is a div with some text and <a id="link" href="#">a link
that may line wrap</a> inside. More text.</p>
</div>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"MochiKit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/mochikit?hl=en
-~----------~----~----~----~------~----~------~--~---
