css-Problem: Reihenfolge

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css-problem_reihenfolge_173213/page_1 - zur Vollversion wechseln!

fatmike182 schrieb am 13.12.2006 um 19:08

&zwar hab ich folgendes Problem:

ich möchste in einer Tabelle mit javascript einen Tooltip machen.

Wenn ich den Tooltip (als onClick) außerhalb vom table mache, funktioniert d tooltip (also ist das .js richtig & das .css auch) - aber im Table nicht.

-> bin jetzt draufgekommen, dass der tooltip HINTER dem Test liegt (zumindest bei der Überschrift)

Ich nehme an, das kann man mir css ändern, leider find ich das nicht (bilde mir ein, einmal davon gelesen zu haben).

tia,
Michi

[EDIT]
z-index hab ich eigentlich gemeint!
Aber: leider funktionierts noch immer nicht!

hab jetzt das Problem, dass der y-Abstand nicht passt & daher der Tip nicht zu sehen ist!

Code:

	x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
	y = (document.all) ? window.event.y + document.body.scrollTop  : e.pageY;
	if (wmtt != null) {
		wmtt.style.left = (x) + "px";
		wmtt.style.top 	= (y) + "px";
	}

das ist der Teil vom .js

ica schrieb am 13.12.2006 um 20:04

hast das ganze online als beispiel?

und wieso einen tooltip per javascript? gibt doch so schöne reine css lösungen.

fatmike182 schrieb am 13.12.2006 um 20:11

yeppa: hier

wo der tooltip kommen sollte:
- ganz oben (der funktioniert)
- bei Frage 6 eingebaut (nach "clickmeharder" suchen)
:der funktioniert prinzipiell, aber deutlich verschoben
- 3.letzte Frage (nach "Erbkrankheiten" suchen)
:k.A. obs den gibt (wahrscheinlich schon), aber zu weit verschoben

style:

Code: PHP

.tooltip {position:absolute; display:none; background-color:#bbd2e5; z-index:3;}

... als Erklärung:
beim Klick auf den Link wird die funktion showWMTT(id) aktiviert.
->

Code: PHP

 function showWMTT(id) {
	wmtt = document.getElementById(id);
	wmtt.style.display = "block";
}

...somit der tooltip eingeblendet
& dann verschoben

Code: PHP

document.onmousemove = updateWMTT;
function updateWMTT(e) {
	x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
	y = (document.all) ? window.event.y + document.body.scrollTop  : e.pageY;
	if (wmtt != null) {
		wmtt.style.left = (x+10) + "px";
		wmtt.style.top 	= (y) + "px";
	}
}

tia!

hättets du evtl einen Link für eine (dynamische) css-Lösung?
Hab nur rel. lange & undynamische gefunden!
(das .js hat <20 Zeilen)

UPDATE:
der Fehler muss da irgendwo sein, nur finde ich ihn nicht:

Code: PHP

	x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
	y = (document.all) ? window.event.y + document.body.scrollTop  : e.pageY;

nachdem das mit den X-Koordinaten passt, versteh ichs irgendwie überhaupt nicht.
Während mir das event.x den richtigen Wert liefter, hat event.y nichts mit der Mausposition zu tun.

Luzandro schrieb am 15.12.2006 um 12:50

Zitat von fatmike182
&zwar

Und zwar ist dieser "Stil" andauernd Wörter mit einzelnen Zeichen/Ziffern/Buchstaben abzukürzen absolut grauenhaft... Wenn dir so Zeichen so gefallen, lern Perl oder eine beliebige andere Snoopy-beim-Fluchen-Skriptsprache, aber nerv bitte nicht im Forum damit...

Zitat
nachdem das mit den X-Koordinaten passt, versteh ichs irgendwie überhaupt nicht.
Während mir das event.x den richtigen Wert liefter, hat event.y nichts mit der Mausposition zu tun.

Nachdem du vermutlich nur nach unten scrollst, ergibt das durchaus Sinn
x/y liefert dir die Position relativ zu einem Elternelement mit position:relative, was du willst ist clientX/Y

Ich persönlich würde übrigens auch die Browserweichen anders gestalten, aber ob das auch irgendwo einen Unterschied macht, weiß ich nicht:

Code:

e = e || window.event;
x = (e.pageX) ? e.pageX : e.clientX + document.body.scrollLeft;

für das Scrollen bräuchte man eigentl. auch noch eine Abfrage - AFAIK versteht sowieso nur der IE das pageX nicht, aber dafür ist er dann selbst beim scrollLeft nicht konsequent, wie das abzufragen ist... :rolleyes:

fatmike182 schrieb am 15.12.2006 um 16:57

nachdem ich das Skript schon öfters problemlos verwendet habe (allerdings nicht in Tabellen) hätte ich nicht mit so einem Aufwand gerechnet; aber Browserweichen müssen wirklich her (bis jetzt nur ein Standard-sheet verwendet)!

Die client-Sache werd ich gleich versuchen...

Andere Frage:
kann der ie kein colspan bei Textfeldern in der Tabelle anwenden? (3-spaltige Tabelle, von mittlerer Spalte bis zum ganz rechten Rand will ich ein input type=text haben -> colspan="2"; macht er aber nicht, er fängt die 3. Spalte erst dort an, wo das input aufhört)

tia!