Linuchs: Help-Feld rechts / links vom Cursor positionieren

SELF-Forum

Help-Feld rechts / links vom Cursor positionieren

Linuchs
– Informationen zu den Bewertungsregeln

Moin,

in HTML-Seiten habe ich ein absolut positioniertes Feld, das mit Text aus der Datenbank gefüllt wird und aufpoppt, wenn ich ein Help-Symbol anklicke.

Ich werte die x- und y- position des Mauszeigers aus und setze left und top in px.

Help-Symbole nahe des rechten Fensterrands führen dazu, dass das Help-Feld auswandert. Da möchte ich das Feld dann nach links aufklappen lassen, aber wie setze ich die Angabe für left ausser Kraft?

div#helptext {
  position: absolute;
  display: none;
  left: 5px;
  width: 25em;
  top: 5px;
  min-height: 5em;
  background-color: #ffc;
  border: .1pt solid #f00;
  border-radius: 4px;
  padding: 5px;
  z-index: 5;
}

<body>
<div id="helptext" onclick="this.style.display='none'"></div>

  ...
  // Helpfeld auf Klickposition positionieren
  if ( x > window.innerWidth /2 ) {
    document.getElementById( "helptext" ).style.left  = "";
    document.getElementById( "helptext" ).style.right = (window.scrollX +x -5) +"px";
  } else {
    document.getElementById( "helptext" ).style.left  = (window.scrollX +x +5) +"px";
    document.getElementById( "helptext" ).style.right = "";
  }
  ...

Nun "klebt" das nach links ausgeklappte Feld am linken Festerrand, als ob ich .left = "0" angegeben hätte. Auch .left ="auto" und .left = "inherit" führten nicht dazu, dass das Feld horizontal am Cursor hängt.

Linuchs

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Help-Feld rechts / links vom Cursor positionieren

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Linuchs,

    weil left: 5px; aus dem CSS wirkt? Was sagen die Entwicklertools?

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Help-Feld rechts / links vom Cursor positionieren

    Martl
    – Informationen zu den Bewertungsregeln

    Hallo Linuchs,

    die Definition für ".left" aus dem Style Sheet entfernen, da JavaScript die Zuweisungen für ".left" bzw. ".right" wohl immer vorzunehmen scheint.

    Grüße, Martl

    (Wenn Plan A nicht funktioniert: Keine Panik, das Alphabet hat noch weitere 25 Buchstaben.)

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Help-Feld rechts / links vom Cursor positionieren

      Linuchs
      – Informationen zu den Bewertungsregeln

      Hallo Martl,

      die Definition für ".left" aus dem Style Sheet entfernen, da JavaScript die Zuweisungen für ".left" bzw. ".right" wohl immer vorzunehmen scheint.

      Habe ich gemacht ohne Erfolg. Die Zuordnung für .style.right wollte nicht funktionieren, da ich abwechselnd right und left zuordne.

      Ich weiss nicht, wie ich eine Zuordnung zurücknehmen kann ohne sie auf den Wert 0 zu setzen. Dies hat nicht funktioniert:

      removeAttribute("style.left");

      Meine Lösung: Ich positioniere das Helpfeld fixed und mit einer pixelgenauen Breite von 400. Dann kann ich vom Klickpunkt x den linken Rand berechnen und setzen. Das klappt:

        // Helpfeld auf Klickposition positionieren
  if ( x > window.innerWidth /2 ) {
    document.getElementById( "helptext" ).style.left  = ( x -400 -15) +"px";
  } else {
    document.getElementById( "helptext" ).style.left  = ( x +5 ) +"px";
  }

      Etwas unschön, dass das Helpfeld beim Scrollen nicht mit der geklickten Position mitscrollt.

      Linuchs

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Help-Feld rechts / links vom Cursor positionieren

        Tabellenkalk
        +1 Informationen zu den Bewertungsregeln

        Hallo,

        Ich weiss nicht, wie ich eine Zuordnung zurücknehmen kann ohne sie auf den Wert 0 zu setzen.

        Vielleicht ist das mit ein Grund, warum empfohlen wird, mit Javascript keine Attribute zu setzen, sondern nur Klassen umzuschalten.

        Gruß
        Kalk

        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

      2. Help-Feld rechts / links vom Cursor positionieren

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo Linuchs,

        Ich weiss nicht, wie ich eine Zuordnung zurücknehmen kann ohne sie auf den Wert 0 zu setzen. Dies hat nicht funktioniert:

        Das liegt wohl daran, dass auto der Standardwert für left ist, welcher bei einem ltr-Dokument 0 entspricht.

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      3. Help-Feld rechts / links vom Cursor positionieren

        Martl
        – Informationen zu den Bewertungsregeln

        Hallo Linuchs,

        probiere das doch einmal aus:

        <!DOCTYPE HTML>
<html lang="de">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>Test
		</title>
		<style>
			div{width:300px;height:300px;position:absolute;padding:1em;background:red;outline:3px solid green;}
		</style>
	</head>
	<body>
	<div onclick="test(this);">Test</div>
	<script>
	function test(e){
		e = e || document.getElementsByTagName('div')[0];
		if(e.style.left != ""){
			e.style.left = "";
			e.style.right = "5em";
		} else {
			e.style.left = "5em";
			e.style.right = "";
		}
		document.getElementsByTagName('div')[0].innerHTML = "Left: " + e.style.left + "<br> Right: " + e.style.right;
	}
	test();
	</script>
	</body>
</html>

        Grüße, Martl

        (Wenn Plan A nicht funktioniert: Keine Panik, das Alphabet hat noch weitere 25 Buchstaben.)

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln