[GELÖST] Element unter Position ermitteln

[mikdoe]

Gibt es mit JS und/oder jQuery die Möglichkeit zu ermitteln, welches Element (id wird gesucht) sich an einer bestimmten X/Y Koordinate im Dokument befindet? In einem horizontal scrollbaren div würde ich gern ermitteln, welches Element sich gerade in der Mitte des sichtbaren Bereichs befindet. Deshalb suche ich die Möglichkeit, über Koordinaten abzufragen, welche ID dort gerade liegt.

 

[kkapsner]

Das kann man mit W3C DOM Compatibility - CSS Object Model View machen.

 

[mikdoe]

Ah, cool. Sieht aber sehr browserabhängig aus. Gibt es auch eine jQuery Entsprechung dafür?

 

[j-l-n]

Wäre das mit offset das richtige oder mit .position()?

 

[kkapsner]

@Julian: offset und position geben die Position eines Elements, das du schon hast, zurück. Mikdoe hätte gernen den umgekehrten Weg: von einer bekannten Position das Elemnt.

@mikdoe: ich hab' keine Ahnung, ob jQuery da was hat, aber so groß ist der Unterschied nicht... was du machen musst, damit es in allen Browsern läuft steht eigentlich schon auf der Quirksmodeseite.

 

[mikdoe]

Frage: Wenn ich also dafür sorge, dass auf meiner angegebenen Position auf jeden Fall nur ein <li> liegen kann bin ich mit var receiver = document.elementFromPoint(evt.clientX,evt.clientY); für alle Browser sicher? Ich frage, weil ich bezüglich der Zeile if (receiver.nodeType == 3) { // Opera etwas unsicher bin. Warum braucht der Opera hier eine Sonderbehandlung? Was ist Typ 3?

 

[mikdoe]

Habe das mal auf Entwicklung horizontaler Endloskalender eingebaut. Die Funktion document.elementFromPoint(xpos,ypos).id liefert aber immer 'streifen'. Ich hätte aber gern die ID des darunter liegenden <li> Elements, weil es mir sonst nichts nützt. Ich will ja damit ermitteln, welcher Tag sich in dem Moment in der Mitte von id "streifen" befindet. Wie macht man das?

Wenn ich id "streifen" kurz auf display='none' setzt wie im Artikel beschrieben liefert die Funktion garkein Ergebnis und die ganze Animation hakelt.

 

[kkapsner]

Das mit dem svt.clientX brauchst du nur, wenn du wissen willst, welches Element sich unter der Maus befindet. Da du ja eine feste Position hast, kannst du einfach die Mitte der Darstellung nehmen.

.nodeType === 3 bedeutet, dass die Node eine Textnode ist. Da du diese nicht haben willst, musst du da dann das Elternelement nehmen.

Bei deinem Test ist ypos einfach noch etwas zu weit oben - addiere doch einfach mal 10 und nicht 1 dazu, dann solltest du das <td> bekommen. Von dem kannst du dich dann zu dem <li> hochhangeln.

PS: Eine <table> mit genau einer Zeile und einer Spalte ist jetzt nicht dein Ernst...

 

[mikdoe]

korbinian, wenn ich 10 addiere liefert die Funktion nichts mehr. Aber ich hatte die ohnehin eine E-Mail geschickt, die auch erklärt, warum die Tabelle derzeit nur eine Zeile mit einer Zelle enthält. Da kommt natürlich noch mehr aber das scheitert im Moment an diversen CSS Problemen. Steht alles in der Mail.

 

[kkapsner]

Doch, die Funktion liefert schon was, aber das Element (das <td>) hat keine ID. Deswegen wird nichts ausgegeben. Ich schau' mir deine Mail am Nachmittag mal an.

 

[mikdoe]

Hast Recht, ABER: receiver.parentNode.id gibt nur die <li> ID aus, wenn sein Rahmen exakt genau in der Mitte steht. Zwischendrin bleibt die Ausgabe auch hier leer.
receiver.parentNode.nodeType und receiver.nodeType sind beide zu jeder Zeit 1.

 

[kkapsner]

Das Elternelement von dem <td> ist ja auch nicht das <li>, sondern ein <tr>... du musst da so lange nach oben gehen, bis .nodeName gleich "LI" ist.

 

[mikdoe]

Habs gepeilt!! Hammer.

var receiver = document.elementFromPoint(xpos,ypos);
var nname = receiver.nodeName;
while (nname != 'LI') {
	receiver = receiver.parentNode;
	nname = receiver.nodeName;
}

Und receiver.id enthält genau das, was ich gesucht habe!!

Danke dir Korbinian!

 

[kkapsner]

Bitte - gern geschehen.