Ergebnis 1 bis 4 von 4
  1. #1
    iceteea ist offline Grünschnabel
    registriert
    15-05-2010
    Beiträge
    4

    Seite so scrollen, dass das aktuell fokussierte input-feld vertikal mittig liegt

    Schwer in Worten verständlich zu machen, darum in Bildern:

    form1.png

    form2.png

    Ist jetzt natürlich sehr knapp gehalten, bei Unklarheiten einfach fragen

  2. #2
    rico2009 Guest

    AW: Seite so scrollen, dass das aktuell fokussierte input-feld vertikal mittig liegt

    Hi,

    ich hoffe ich habe dich richtig verstanden. Das hat mit Scrollen nichts zu tun, dass kannst du einfach mit CSS machen. Einfach einem darum liegenden Element, am besten einem div, folgende CSS Eigenschaft geben: vertical-align: middle;. Damit sollte es mittig ausgerichtet werden.

    Gruß

  3. #3
    Avatar von scrypter
    scrypter ist offline Haudegen
    registriert
    25-06-2011
    Beiträge
    706

    AW: Seite so scrollen, dass das aktuell fokussierte input-feld vertikal mittig liegt

    ich habe es anders verstanden,
    also Du möchtest per onfocus event die Seite so in y-Richtung scrollen, dass das fokussierte Element vertikal mittig im Anzeigebereich liegt.
    Direkt vorweg, das ist nicht mal eben so gemacht..
    Du musst die aktuelle Höhe des Anzeigebereichs und die y-Position des Elements innerhalb der Seite ermitteln. y-Position Element abzüglich halbe Höhe Anzeigebereich ist Dein Zielwert y.
    (Die halbe Höhe des Elements müsste auch noch addiert werden.)
    Letztlich benutzt Du dann window.scrollTo(x,y); mit x=0, um an die Wunschkoordinate zu scrollen.

    Das setzt voraus, dass das erste und das letzte Element, welches Deine Funktion per onfocus ausführt, genügend Platz oberhalb bzw. unterhalb hat, um überhaupt dahin scrollen zu können.

    Möglich wäre auch erst .scrollIntoView(), was das Element an das obere Ende des Anzeigebereichs bringt und danach dann nochmal scrollTo() mit der Differenz der halben Höhen auszuführen.

    Hier findest Du ein script, dass die Elementposition ermittelt:
    http://js-tut.aardon.de/js-tut/tutorial/position.html und da dann auch das script im Quelltext des Beispiels anschauen

    außerdem http://www.quirksmode.org/dom/w3c_cssom.html, weil Du für die Höhe des Anzeigebereichs browserabhängig andere Methoden benötigst, Stichworte hier sind .innerHeight und .clientHeight.
    .offsetParent solltest Du Dir auch ansehen, da die Methode auch von dem oben genannten script genutzt wird

    Na dann wacker ans Werk, Du wirst Dich wieder melden

  4. #4
    iceteea ist offline Grünschnabel
    registriert
    15-05-2010
    Beiträge
    4

    AW: Seite so scrollen, dass das aktuell fokussierte input-feld vertikal mittig liegt

    Scrypter hat gleich 2 mal recht, zum einen hat er verstanden was ich möchte zum anderem melde ich mich hier wieder mit der Ausrede ich hätte eine einfache ganz passable Lösung gefunden:

    Die Input-Felder bekommen ein onfocus scrollby, kommt noch ein kleiner Sicherheitsmechanismus hinzu dass es nicht runterscrollt wenn man mehrmals das selbe Feld anwählt.
    In einer Variable wird dann zwischengespeichert in welche Richtung es zuletzt ging und halt dementsprechend herumkalkuliert.

    Trotzdem danke, v.A. da ich momentan keine genaue Aussage machen kann wie gut meine Methode funktioniert.

Ähnliche Themen

  1. Formular von input Feld zu Input Feld schicken
    Von Ibu400 im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 02-02-2011, 17:47
  2. Bei Eingabe in Input-Feld bestimmte Seite öffnen
    Von Fler X 1990 im Forum JavaScript
    Antworten: 8
    Letzter Beitrag: 23-03-2009, 15:30
  3. Div mit Javascript vertikal scrollen
    Von Aroree im Forum JavaScript
    Antworten: 7
    Letzter Beitrag: 23-12-2008, 00:58
  4. gleichzeitig horizontal und vertikal scrollen
    Von sven2 im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 22-02-2006, 19:16
  5. text vertikal mittig formatieren
    Von schwerminator im Forum CSS und (X)HTML
    Antworten: 2
    Letzter Beitrag: 05-10-2004, 20:32

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •