nicht angemeldet
Position eines Elements ermitteln
Guten morgen liebe Leuts,
ich möchte es auch so gerne mit DHTML versuchen und sitze seit ein paar Tagen auf meinem Verstand. Für bestimmte der von mir geplanten Anwendungen ist es nötig, irgendwelche Divs, die irgendwo im Dom hängen, an den Koordinaten eines aufrufenden Elements auszurichten und anzuzeigen.
Das Problem ist, daß ich nicht berechnen kann, wo das aufrufende Element (caller) im Verhältnis zum Fenster sitzt. Denn caller.offsetLeft und caller.offsetTop geben ja nur das offset zum Elternelement preis. Mein Anzeige-Div, nennen wir das mal tip, ist aber ein Kind vom Body oder irgendeinem anderen Element.
Und wenn ich dann sage ...
tip.style.left = caller.offsetLeft;
tip.style.visibility = "visible";
wird tip natürlich relativ zum body angezeigt.
Leider hilft es auch nicht weiter, den tip einfach zum Geschwisterchen des callers zu machen, denn ich muß natürlich zusätzlich abfangen, dass der tip nicht aus dem Fenster rausläuft.
Nun überwache ich ohnehin die Mausereignisse. Kann ich denn irgendwie aus der Position der Maus und dem, was ich über den caller weiß, berechnen, wo der caller wirklich sitzt?
Liebe Grüße und Prost Kaffee, Uschi
-
Hallo Uschi,
sollte so gehen:
tip = document.getElementById('caller');
ox = 0;
el = tip;
while(el)
{
ox += el.offsetLeft;
el = el.offsetParent;
}
tip.style.left = dx+px;Viele Grüße Günter
-
Hallo Uschi,
nochmals (sch... copy & paste!)
tip = document.getElementById('caller');
ox = 0;
el = tip;
while(el)
{
ox += el.offsetLeft;
el = el.offsetParent;
}
tip.style.left = dx+px;soll so aussehen:
tip.style.left = ox;Günter
-
Günter, du bist ein Schatz :-))))
Den Typo konnte ich mir schon selbst erklären. Übrigens habe ich selbst den Gedanken mit dem durch das DOM schleifen auch schon gehabt, aber irgendwie habe ich wohl was falsch gemacht, denn bei mir kamen absolut absurde Werte raus:function getPos(obj) {
posX = obj.offsetLeft;
posY = obj.offsetTop;
currentObj = obj;
while(currentObj.parentNode) {
if(currentObj.parentNode.nodeName != "BODY") {
posX = posX + currentObj.parentNode.offsetLeft;
posY = posY + currentObj.parentNode.offsetTop;
currentObj = currentObj.parentNode;
} else {
break;
}
}
pos = new Array(posX,posY);
return pos;
}
Weiß der Geier, was sich da zusammengerechnet hat. Ich werde also deine funktionierende Lösung mal genauer angucken müssen.Außerdem noch ne Nachfrage: meine anzuzeigenden Elemente dängeln ja auch irgendwo im DOM rum und nicht zwangsweise als body-kinder. Ich habe das Prob so gelöst, daß ich sie beim Aufrufen des Tooltips mit
document.getElementsByTagName("BODY")[0].appendChild(tip);
zu body-Kindern mache. Bedeutet das eigentlich, dass das ursprüngliche Elternelement nun ein Kind verloren hat?Liebe Grüße und ne gute Woche, Uschi
-
Hallo,
Außerdem noch ne Nachfrage: meine anzuzeigenden Elemente dängeln ja auch irgendwo im DOM rum und nicht zwangsweise als body-kinder. Ich habe das Prob so gelöst, daß ich sie beim Aufrufen des Tooltips mit
document.getElementsByTagName("BODY")[0].appendChild(tip);
zu body-Kindern mache. Bedeutet das eigentlich, dass das ursprüngliche Elternelement nun ein Kind verloren hat?Nein, der BODY wird erweitert. Zum Entfernen gibt es removeChild().
MfG, Thomas
-
Hallo,
Außerdem noch ne Nachfrage: meine anzuzeigenden Elemente dängeln ja auch irgendwo im DOM rum und nicht zwangsweise als body-kinder. Ich habe das Prob so gelöst, daß ich sie beim Aufrufen des Tooltips mit
document.getElementsByTagName("BODY")[0].appendChild(tip);
zu body-Kindern mache. Bedeutet das eigentlich, dass das ursprüngliche Elternelement nun ein Kind verloren hat?Nein, der BODY wird erweitert. Zum Entfernen gibt es removeChild().
MfG, Thomas
Na eigentlich doch! Ich habe mal die Erfahrung gemacht, wenn ich einen Knoten (war einfach ein TextNode) woanders einhaenge, dass er an der urspruenglichen Stelle nicht mehr stand. Wollte ich den Knoten an zwei verschiedenen Stellen haben, musste ich ihn klonen.
- an Unschi: falls es das ist was Du brauchst, dann einfach tip.cloneNode() aufrufen.gruss, Monika
-
Hallo,
Na eigentlich doch! Ich habe mal die Erfahrung gemacht, wenn ich einen Knoten (war einfach ein TextNode) woanders einhaenge, dass er an der urspruenglichen Stelle nicht mehr stand.
Alles klar, ich war gedanklich bei createElement() + appendChild() und Co.
Kleiner Test:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 08/01</title>
</head>
<body onload="document.getElementsByTagName('body')[0].appendChild(document.getElementsByTagName('p')[0])">
<p>Absatz 1</p>
<p>Absatz 2</p>
</body>
</html>Der erste Absatz erscheint nach dem zweiten.
MfG, Thomas
-
hallo ihr monika und thomas,
danke für die info :-))
liebe gruesse, uschi
Na eigentlich doch! Ich habe mal die Erfahrung gemacht, wenn ich einen Knoten (war einfach ein TextNode) woanders einhaenge, dass er an der urspruenglichen Stelle nicht mehr stand.
Alles klar, ich war gedanklich bei createElement() + appendChild() und Co.
Kleiner Test:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 08/01</title>
</head>
<body onload="document.getElementsByTagName('body')[0].appendChild(document.getElementsByTagName('p')[0])">
<p>Absatz 1</p>
<p>Absatz 2</p>
</body>
</html>Der erste Absatz erscheint nach dem zweiten.
MfG, Thomas
-
-
-
-
-
-