per JS absolute Position auslesen

void · 04.01.2007, 16:51

hallo!

möchte per javascript die aktuelle und absolute position (gemessen am fensterrand des browsers) auslesen.

leider habe ich es bisher nur mit mäßigem erfolg zusammengebracht:
im FF funktioniert es,
im IE leider nicht

.

aus div. gründen muss es aber im IE funktionieren!

wenn ich also

Code:

<HTML>
<head>
<script>
   function getPageCoords (elementId) {
     var element;
     if (document.all)
       element = document.all[elementId];
     else if (document.getElementById)
       element = document.getElementById(elementId);
     if (element) {
       var coords = {x: 0, y: 0};
       do {
         coords.x += element.offsetLeft;
         coords.y += element.offsetTop;
         element = element.offsetParent;
       }
       while (element)
       return coords;
     }
     else
       return null;
    } 

function alertCoo(el)
{
    var coords = getPageCoords(el);
    if (coords)
      alert(coords.x + ':' + coords.y); 
}
</script>
</head>
    <BODY id="documentBody" onload="alertCoo('a3')">

        <DIV id="div1">
            Placeholder text 1.
        </DIV>

        <DIV id="div2" style="position:relative;top:100px;left:100px;">
            Placeholder text 2.
        </DIV>

        <DIV id="div3" style="position:absolute;top:200px;left:200px;">
            <DIV id="div4" style="position:relative;top:100px;left:100px;">
                Placeholder text 3.
            </DIV>
        </DIV>

    </BODY>
</HTML>

(von http://groups.google.de/group/de.com...20d42d5e7e9263) ausprobiere, erhalte ich im FF 300/300 (korrekt), im IE aber 400/400 (falsch)!!

der grund ist leider folgender:

Zitat:

Wenn das übergeordnete Element eines Elements relativ oder absolut positioniert ist, gibt OffsetRectangle den Offset des übergeordneten Elements zurück. Wenn das Element selbst relativ in bezug auf sein übergeordnetes Element positioniert ist, gibt OffsetRectangle den Offset seines übergeordneten Elements zurück.

(ist zwar jetzt nicht direkt von JS, aber das problem ist vom IE, somit das gleiche) - somit wird der relative abstand doppelt gezählt... eine lösung wäre, wenn ich feststellen könnte, ab eine element relativ oder absolut positioniert ist... aber es muss doch eine einfache lösung zu der thematik geben? ich will einfach die absolute position auslesen!

btw.: eigentlich wollte ich das problem (position-auslesen unter VB.NET mittels eines Webbrowser element lösen, stieß aber auf das selbe problem...

vielen dank schon einmal!

p.s.: angehängte datei ist zum einfachen ausprobieren...

void · 04.01.2007, 19:38

hehe, war ich mit der lösung schneller, als die 1.antwort

man muss einfach abfragen, ob es die currentStyle eigenschaft gibt... damit kann man relative und demnach doppelte angaben ausschließen, das ganze sieht dann so aus:

Code:

<HTML>
<head>
<script>
   function getPageCoords (elementId) {
     var element;
     if (document.all)
       element = document.all[elementId];
     else if (document.getElementById)
       element = document.getElementById(elementId);
     if (element) {
       var coords = {x: 0, y: 0};
       do {
		if(element.currentStyle)
		{
			if(element.currentStyle.position!='relative')
			{
				coords.x += element.offsetLeft;
				coords.y += element.offsetTop;
			}
		}
		else
		{
			coords.x += element.offsetLeft;
			coords.y += element.offsetTop;
		}

         element = element.offsetParent;
       }
       while (element)
       return coords;
     }
     else
       return null;
    } 

function alertCoo(el)
{
    var coords = getPageCoords(el);
    if (coords)
      alert(coords.x + ':' + coords.y); 
}
</script>
</head>
    <BODY id="documentBody" onload="alertCoo('a3')">

        <DIV id="div1">
            Placeholder text 1.
        </DIV>

        <DIV id="div2" style="position:relative;top:100px;left:100px;">
            Placeholder text 2.
        </DIV>

        <DIV id="div3" style="position:absolute;top:200px;left:200px;">
            <DIV id="div4" style="position:relative;top:100px;left:100px;">
                Placeholder text 3.
            </DIV>
        </DIV>

    </BODY>
</HTML>

funktioniert jetzt so im IE und FF!

p.s.: ich habe das ganze jetzt für meine zwecke getestet, sollte irgendjemand drauf kommen, dass es so nicht (immer) funktioniert, bitte nicht steinigen, sondern einfach schreiben, am besten gleich mit lösung

eigentlich hasse ich solche sachen, die für verschiedene browser geschrieben sind und nicht nach standards funktionieren...

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)