473,699 Members | 2,738 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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:relati ve ; 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 7106
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:relati ve ; 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.javascriptt oolbox.com/lib/objectposition/source/position.js"></script><script type="text/javascript">win dow.onload = function() { var pos=Position.ge t(document.getE lementById('mai nDiv')); Position.set(do cument.getEleme ntById('marker1 '),pos); var pos=Position.ge t(document.getE lementById('idT ext')); Position.set(do cument.getEleme ntById('marker2 '),pos);}</script><style># idText { border:1px red solid ; }#mainDiv { position:relati ve ; top:115px ; margin-left:150px; border:1pxsolid blue; margin-right:0px ;}.marker {position:absol ute;width:10px; height:10px;bor der:1px solid black;}#marker1 { background-color:yellow; }#marker2 { background-color:blue; }</style><body><di v 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.JavascriptT oolbox.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.javascriptt oolbox.com/lib/objectposition/source/position.js"></script><script type="text/javascript">win dow.onload = function() { var pos=Position.ge t(document.getE lementById('mai nDiv')); Position.set(do cument.getEleme ntById('marker1 '),pos); var pos=Position.ge t(document.getE lementById('idT ext')); Position.set(do cument.getEleme ntById('marker2 '),pos);}</script><style># idText { border:1px red solid ; }#mainDiv { position:relati ve ; top:115px ; margin-left:150px; border:1pxsolid blue; margin-right:0px ;}.marker {position:absol ute;width:10px; height:10px;bor der:1px solid black;}#marker1 { background-color:yellow; }#marker2 { background-color:blue; }</style><body><di v 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.JavascriptT oolbox.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.javascriptt oolbox.com/lib/objectposition/source/position.js">
</script>
<script type="text/javascript">
window.onload = function() { var
pos=Position.ge t(document.getE lementById('mai nDiv'));
Position.set(do cument.getEleme ntById('marker1 '),pos);
var pos=Position.ge t(document.getE lementById('idT ext'));
Position.set(do cument.getEleme ntById('marker2 '),pos);
}
</script>
<style>
#idText { border:1px red solid ; }
#mainDiv {
position:relati ve ;
top:115px ;
margin-left:150px;
border:1pxsolid blue;
margin-right:0px ;
}
..marker {
position:absolu te;
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.javas cript 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
21919
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 (for edit, delete and update). I want to position these 3 href items in the same columns, which would be posible if the span could be positioned - for instance on the extreme right of the td in which it is contained.
3
8505
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 sidebar's content is longer than the main content, my IE6 will not create a vertical scrollbar for the page, which makes the lower part of the sidebar unreadable. Take this code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...
2
14157
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
6483
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 element. HOWEVER, I want the hidden element positioned at a location of my choosing relative to that inline element. Is this possible?
4
29384
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 shows this could be done a containing element with "min-height: 100%;" and an absolute positioned element (div) inside, aligned to bottom ("position: absolute; bottom:0px")
6
6069
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
5259
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 see what I am after as these browsers work fine. However, in FF the results are slightly different - take a look and you'll see that the <p>, within <div class="mainContent"> has shot way over to the right. I've been working on this for 2days now...
10
3272
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 its position. However, looking at other people's stylesheets, I often see 'position: relative' applied to elements but without the use of top, left etc., which makes me think using 'position: relative' has some other effect that my book has...
4
3467
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%" border="0" cellpadding="0" cellspacing="0"> <tr height="100"> <td width="20%" height="114">abc</td> <td width="80%">def</td>
0
8685
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9171
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9032
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8880
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
5869
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4373
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4625
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3053
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2342
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.