Helptext variabel positionieren

[Linuchs]

Moin,

entweder ich habe ein Brett vorm Kopf oder mein Vorhaben ist technisch nicht möglich.

Auf Webseiten positioniere ich Help-Buttons. Bei Klick rufen die per Ajax den Helptext vom Server und zeigen ihn an.

Nun möchte ich dieses Helptext-Feld so positionieren, dass es im Sichtbereich ist. Wenn ich unten am Sichtbereich was nach unten aufklappe, muss man scrollen, um zu lesen. Also muss das Feld in der unteren Hälfte nach oben geklappt werden.

Links-rechts-klappen funktioniert. Nach unten auch. Aber nicht nach oben:

    if ( help_x < window.innerWidth /2 ) {           // nach rechts klappen
      document.getElementById( "helptext" ).style.left  = (window.scrollX +help_x +5) +"px";
      document.getElementById( "helptext" ).style.right = "initial";
    } else {                                    // nach links klappen
      document.getElementById( "helptext" ).style.left  = "initial"
      document.getElementById( "helptext" ).style.right = (window.scrollX +window.innerWidth -help_x -5) +"px";
    }
    if ( help_y < window.innerHeight /2 ) {          // nach unten klappen

      document.getElementById( "helptext" ).style.top     = (window.scrollY +help_y +5) +"px";
      document.getElementById( "helptext" ).style.botttom = "initial";
    } else {                                    // nach oben klappen
      document.getElementById( "helptext" ).style.top     = "initial";
      document.getElementById( "helptext" ).style.botttom = (window.scrollY +window.innerHeight -help_y -5) +"px";
    }

    document.getElementById( "helptext" ).style.display = "block";

Wo ist mein Denkfehler?

Linuchs

[Matthias Apsel]

Hallo Linuchs,

Wo ist mein Denkfehler?

Du hast nicht beschrieben, was „funktioniert nicht“ bedeutet. Bei mir (FF/Win10) verhalten sich die Hilfetexte wie von dir gewünscht.

Bis demnächst
Matthias

[Linuchs]

Hallo Matthias,

Wo ist mein Denkfehler?

Du hast nicht beschrieben, was „funktioniert nicht“ bedeutet. Bei mir (FF/Win10) verhalten sich die Hilfetexte wie von dir gewünscht.

Beim Klappen nach oben "hing" das Feld nicht am Mauscursor, sondern erschien viel weiter oben. Gerne in dem bereits weggescrollten Bereich, also verborgen.

Der Denkfehler war wohl, den unteren Rand des Helpfeldes mit style.bottom so zu positionieren, als ob der untere Rand des Elternelements == unterer Rand des Viewports ist.

Zwischendurch habe ich umständlich die Höhe des body ermittelt und dessen unteren Rand genommen. Ebenfalls ohne Erfolg.

Nun bestimme ich die Höhe des Helpfeldes, nachdem der Text eingefüllt wurde und setze style.top - jetzt funktioniert es wie gewünscht.

Linuchs