By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,934 Members | 1,366 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,934 IT Pros & Developers. It's quick & easy.

IE position of element with relative DIV and margin

P: n/a
Hi,

I use the common code to determine the position of an element
getTop = function(o){
var nTop = null;
if(o){
do{
nTop += o.offsetTop;
o = o.offsetParent;
} while(o)
}
return nTop;
}
getLeft = function(o){
var nLeft = null;
if(o){
do{
nLeft += o.offsetLeft;
o = o.offsetParent;
} while(o)
}
return nLeft;
}

works fine as long I use Internet Explorer (version 6)
and want to get positions of elements that are in _relative_ DIVs that
have a _margin_ attached to it

i.e.

#mainDiv { position:relative ; top:115px ; margin-left:150px ;
margin-right:0px ;}

then the margins width (here left-margin) is also counted and my
position shifted to left by 150 pixels

any idea?

pm

Jan 10 '07 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Petra Meier wrote:
I use the common code to determine the position of an element
The "common code" is not very robust.
Try the simple lib at
http://www.JavascriptToolbox.com/lib/objectposition/
and see if it gives you more accurate results.

If it doesn't, please point me to a test url so I can improve the library :)

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Jan 10 '07 #2

P: n/a
Hi Matt,

thanks for answering, but it did not work.. try yourself

<html>
<script type="text/javascript" src="/javascripts/dom.js"></script>
<style>
#idText { border:1px red solid ; }
#mainDiv { position:relative ; top:115px ; margin-left:150px ;
margin-right:0px ;}
</style>
<body>
<div id="mainDiv">
########<div id="idText">a text</div>############
</div>
</body>
</html>

any idea?

Matt Kruse schrieb:
Petra Meier wrote:
I use the common code to determine the position of an element

The "common code" is not very robust.
Try the simple lib at
http://www.JavascriptToolbox.com/lib/objectposition/
and see if it gives you more accurate results.

If it doesn't, please point me to a test url so I can improve the library :)

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Jan 11 '07 #3

P: n/a
Petra Meier wrote:
thanks for answering, but it did not work.. try yourself
I see - it finds the mainDiv correctly, but not the div inside of it. I will
have to work on a fix to the lib to handle cases like this. Here is my test
case:

<html>
<script type="text/javascript"
src="http://www.javascripttoolbox.com/lib/objectposition/source/position.js"></script><script type="text/javascript">window.onload = function() { var pos=Position.get(document.getElementById('mainDiv' )); Position.set(document.getElementById('marker1'),po s); var pos=Position.get(document.getElementById('idText') ); Position.set(document.getElementById('marker2'),po s);}</script><style>#idText { border:1px red solid ; }#mainDiv { position:relative ; top:115px ; margin-left:150px; border:1pxsolid blue; margin-right:0px ;}.marker {position:absolute;width:10px;height:10px;border:1 px solid black;}#marker1 { background-color:yellow; }#marker2 { background-color:blue; }</style><body><div id="marker1" class="marker"></div><div id="marker2" class="marker"></div><div id="mainDiv">########<div id="idText">a text</div>############</div></body></html>--Matt Krusehttp://www.JavascriptToolbox.comhttp://www.AjaxToolbox.com

Jan 11 '07 #4

P: n/a
Matt Kruse said the following on 1/11/2007 11:49 AM:
Petra Meier wrote:
>thanks for answering, but it did not work.. try yourself

I see - it finds the mainDiv correctly, but not the div inside of it. I will
have to work on a fix to the lib to handle cases like this. Here is my test
case:

<html>
<script type="text/javascript"
src="http://www.javascripttoolbox.com/lib/objectposition/source/position.js"></script><script type="text/javascript">window.onload = function() { var pos=Position.get(document.getElementById('mainDiv' )); Position.set(document.getElementById('marker1'),po s); var pos=Position.get(document.getElementById('idText') ); Position.set(document.getElementById('marker2'),po s);}</script><style>#idText { border:1px red solid ; }#mainDiv { position:relative ; top:115px ; margin-left:150px; border:1pxsolid blue; margin-right:0px ;}.marker {position:absolute;width:10px;height:10px;border:1 px solid black;}#marker1 { background-color:yellow; }#marker2 { background-color:blue; }</style><body><div id="marker1" class="marker"></div><div id="marker2" class="marker"></div><div id="mainDiv">########<div id="idText">a text</div>############</div></body></html>--Matt Krusehttp://www.JavascriptToolbox.comhttp://www.AjaxToolbox.com
If there were ever a case of a news agent hosing posted code that would
have to be the winner :)

For what it's worth, it seems to work properly in FF2 and O9.

Maybe this one won't get hosed:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script
src="http://www.javascripttoolbox.com/lib/objectposition/source/position.js">
</script>
<script type="text/javascript">
window.onload = function() { var
pos=Position.get(document.getElementById('mainDiv' ));
Position.set(document.getElementById('marker1'),po s);
var pos=Position.get(document.getElementById('idText') );
Position.set(document.getElementById('marker2'),po s);
}
</script>
<style>
#idText { border:1px red solid ; }
#mainDiv {
position:relative ;
top:115px ;
margin-left:150px;
border:1pxsolid blue;
margin-right:0px ;
}
..marker {
position:absolute;
width:10px;
height:10px;
border:1px solid black;
}
#marker1 {
background-color:yellow;
}
#marker2 {
background-color:blue;
}
</style>
<body>
<div id="marker1" class="marker"></div>
<div id="marker2" class="marker"></div>
<div id="mainDiv">########
<div id="idText">a text</div>
############</div>
</body>
</html>

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 11 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.