Problem mit genauer Positionierung im Viewport

[Marvin Esse]

Hallo,

mir will es einfach nicht gelingen, dass ein DiV in der Zeile angezeigt wird, wo der Anwender klickt. Ich habe eine ziemlich lange Tabelle, in der jede Zeile (also jeder TR-Tag) eine eindeutige ID erhalten hat. Klickt der Anwender auf eine Spalte, sollen Zusatzinformationen angezeigt werden.

Problem Nr. 1: Je weiter nach unten gescrollt wird, desto mehr fehlt der Y-Position, wird also zu hoch angezeigt. Problem Nr. 2: Wenn der Anwender auf der unteren Hälfte des Bildschirms klickt, soll das Fenster nach oben versetzt werden, da das Fenster ja sonst womöglich auch wieder aus dem sichtbaren Bereich ragt.

So ermittle ich die Y-Position:

e = document.getElementById(id);
var offset = {x:0,y:0};
while (e)
{
    offset.x += e.offsetLeft;
    offset.y += e.offsetTop;
    e = e.offsetParent;
}

if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft))
{
    offset.x -= document.documentElement.scrollLeft;
    offset.y -= document.documentElement.scrollTop;
}
else if (document.body && (document.body.scrollTop || document.body.scrollLeft))
{
    offset.x -= document.body.scrollLeft;
    offset.y -= document.body.scrollTop;
}
else if (window.pageXOffset || window.pageYOffset)
{
    offset.x -= window.pageXOffset;
    offset.y -= window.pageYOffset;
}
pluswert = Math.abs(offset.y);

    var _x = 0;
    var _y = 0;
	bodyRect = document.body.getBoundingClientRect(),
	elemRect = element.getBoundingClientRect(),
	_y = elemRect.top - bodyRect.top;
	_x = elemRect.left - bodyRect.left;

	if (_y > window.outerHeight / 2) {		// Cursor auf unterer Bildschirmhälfte
		minuswert = 500;
	}
	zielx = _x+0+"px";
	ziely = _y+21-minuswert+pluswert+"px";
	zieldiv.style.top = ziely;
	zieldiv.style.left = zielx;

Vielleicht kann mir jemand helfen, wie ich die Position fehlerfrei ermitteln kann?

LG Marvin

[JürgenB]

Hallo,

ich habe mich schon länger nicht mehr mit dem Thema beschäftigt, daher verstehe ich dein Scipt auch nicht so ganz.

Ich ermittle die Position eines Elementes so:

var ele_pos = function(el) {
	var x=0,y=0;
	if(el && el.offsetParent){
		while(el) {
			x += el.offsetLeft;
			y += el.offsetTop;
			el = el.offsetParent;
		}
	}
	return {x:x,y:y};
} // ele_pos

und die Position des Mauszeigers mit dieser Funktion:

var m_pos = function(e) {
	var x=0,y=0;
	if(e.targetTouches && e.targetTouches[0] && e.targetTouches[0].clientX) {
		x = e.targetTouches[0].clientX;
		y = e.targetTouches[0].clientY;
	}
	else if (e.pageX) {
		x = e.pageX;
		y = e.pageY;
	}
	else if(e.clientX) {
		x = e.clientX + window.document.documentElement.scrollLeft;
		y = e.clientY + window.document.documentElement.scrollTop;
	}
	return {x:x,y:y};
} // m_pos

Gruß
Jürgen

[Gunnar Bittersmann]

@@Marvin Esse

Klickt der Anwender auf eine Spalte, sollen Zusatzinformationen angezeigt werden.

Was heißt das? Tabellenspalten sind per se keine interaktiven Elemente. Wie kommen alle Nutzer an die Zusatzinformationen?

Vielleicht kann mir jemand helfen, wie ich die Position fehlerfrei ermitteln kann?

Wozu willst du die Position überhaupt mit JavaScript ermitteln?

Online-Beispiel, bitte.

LLAP 🖖