473,322 Members | 1,734 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

IE position of element with relative DIV and margin

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
4 7081
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

14
by: Zenobia | last post by:
Hello folks, Is it possible to position an item within a <td> element? For instance see below. The table has multiple rows, one for each database record. Each row has 3 hrefs associated with it...
3
by: Alexander Fischer | last post by:
Hello everybody, can someone help me with this problem: I'm creating a page with a sidebar, and I wanted to create the sidebar as a div which gets a "position:absolute". The problem: if the...
2
by: Marek Mänd | last post by:
Can the legend element in fieldset be placed automatically by Mozilla horizontally in the middle of fieldset?
6
by: axlq | last post by:
I've spent most of the day struggling with what I thought would be a trivial problem. I have a hidden element that appears, outside of the normal flow, when the mouse hovers over an inline...
4
by: john | last post by:
Hi to All, I am new to html authoring, so sorry if my terminology is not correct or exact. I would like to position a footer div to the bottom of the browser window. As I research in the web...
6
by: Markus | last post by:
Hello I have a navigation structured as follows: <ul> <li> <a>Chapter1</a> <ul> <li><a>Chapter 1.1</a></li> <li><a>Chapter 1.2</a></li>
5
nathj
by: nathj | last post by:
Hi All, I'm working on a new site that has a two column layout underneath a title bar. If you check out: http://www.christianleadership.org.uk/scratch/mainpage.php using IE or Opera you will...
10
by: Mark | last post by:
According to my book on CSS, if you apply 'position: relative' to a block-level element, it will stay exactly where it is. However, you can then use top, left etc. to offset the element relative to...
4
by: HoangTuanSu | last post by:
I have just got a javascript code from my friend. I've modified it for my purpose but a problem happens. First, here's my code html <body> <table align="center" width="60%" height="100%"...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.