Position eines Elementes innerhalb einer Seite ermitteln

[Nadine]

Hallöchen zusammen,

wie kann ich die Position eines Elementes innerhalb der Seite ermitteln?

Ich stelle mir das folgendermaßen vor: ich habe einen Link. Wenn darauf geklickt wird soll ein Alert ausgegeben werden mit dem Abstand dieses Elementes zur oberen Fensterkante.

Ich habe bereits folgendes probiert:

<a href="javascript:void(-1);" onClick="alert(this.style.getAttribute('top','false');">Linkname</a>

Das funktioniert aber wahrscheinlich nicht weil ich für das Element im CSS keine Eigenschaft 'top' mitgebe. Das ist leider auch nicht möglich da ich die Position nicht kenne.

Hintergrund der Frage: Wenn man auf den Link klickt soll ein DIV eingeblendet werden. Wenn der User aber nach unten scrollt sieht man unter Umständen den DIV nicht. Deswegen möchte ich diesem absolut positionierten DIV per JavaScript nach klicken auf den Link die Eigenschaft 'top' geben damit es sichtbar wird.

Danke im Voraus
Grüssle
Nadine

[zufall]

<a href="javascript:void(-1);" onClick="alert(abstop(this));">Linkname</a>

// fuer top
function abstop(i){ return (i.offsetParent) ? i.offsetTop+abstop(i.offsetParent) : i.offsetTop; }
// fuer left
function absleft(i){ return (i.offsetParent) ? i.offsetLeft+absleft(i.offsetParent) : i.offsetLeft; }

hast du so etwas gemeint?

gruss martin

[Nadine]

Hallo Martin,
danke für die schnelle Antwort.

// fuer top
function abstop(i){ return (i.offsetParent) ? i.offsetTop+abstop(i.offsetParent) : i.offsetTop; }
// fuer left
function absleft(i){ return (i.offsetParent) ? i.offsetLeft+absleft(i.offsetParent) : i.offsetLeft; }

hast du so etwas gemeint?

Diesen Code verstehe ich leider nicht so ganz. Kannst Du ein paar erklärende Worte dazu schreiben?

Gruss
Nadine

[zufall]

<a href="javascript:void(-1);" onClick="alert(this.offsetLeft);">Linkname</a>

-liefert im IE den abstand zum nächst 'höheren' element im html elementbaum. deshalb muss man prüfen ob es noch ein element 'darüber' gibt, ein elter (parent). ist das der fall hangelt man sich nach 'oben' und fängt von vorn an. in diesem falle geschieht es mit einer sogenannten "rekursion"=selbstaufruf.

hier nochmal mit einem herkömmlichen IF:
function abstop(i){
 if (i.offsetParent){
  return i.offsetLeft+abstop(i.offsetParent) //es gibt eine höhere ebene->selbstaufruf
 }else{
  return i.offsetLeft; //oberste ebeme erreicht
 }
}

gruss martin

ps. beim mozilla liefert .offsetLeft sofort den abstand von oben.

[Nadine]

Alles klar,

genau so was habe ich gesucht. Schade, dass man eine Browserabfrage machen muss. Ich dachte vielleicht gibts so was für alle Browser.

Danke
Gruss
Nadine

[zufall]

sollte wie gesagt in allen gehen, da er beim mozilla keinen parent findet und sofort den wert zurückgibt. das ist ja das schöne :)

gruss martin

[Struppi]

genau so was habe ich gesucht. Schade, dass man eine Browserabfrage machen muss. Ich dachte vielleicht gibts so was für alle Browser.

Muss man nicht, muss man nie, du musst nur prüfen ob der Browser die gewünschte Eigenschaft zu Verfügung stellt.

Hier nochmal die Funktion ohne Rekursion:

function get_top(o)
{
if(!o.offsetTop) return;
var top = 0;
while (o)
{
   top += parseInt(o.offsetTop );
   o = o.offsetParent;
}
return top;
}

Struppi.