Unterster Teil bei Scrollfeld anzeigen

[Pixel-Wizard]

Hallo zusammen

Ich bin gerade daran einen Chat zu realisieren. Dabei werden die Nachrichten in einem Feld angezeigt. Falls Nachrichten die Dimensionen des Feldes sprengen, kann gescrollte werden. Wenn also eine neue Nachricht geschrieben wird und das Feld schon voll ist, wird die Nachricht zuunterst platziert und man muss runterscrollen um diese zu sehen.

Dass man dies jedes mal machen muss nervt mit der Zeit. Gibt es irgendeine Funktion oder einen Befehl mit welchem automatisch nach ganz unten gescrollt wird und somit, immer der letzte Eintrag angezeigt wird?

Ich hoffe auf Antworten

Liebe Grüsse
Pixel-Wizard

 

[threadi]

Du suchst nach scrollTo():
SELFHTML: JavaScript / Objektreferenz / window

Am Besten in Verbindung mit scrollHeight:
javascript - What is scrollTop and scrollHeight - Stack Overflow

 

[Pixel-Wizard]

Kann man mit scrollTo() auch ein Element (z.B. ein Textfeld) ansprechen. Mit

document.getElementById("*id*").scrollTo(999,999);

geht dies nämlich nicht...

Und kann man bei scrollTo() auch Prozente übergeben dass es in einem Textfeld zum Beispiel zum Schluss also zu 100% scrollt?

 

[threadi]

Genauer könntest Du es evtl. mit scrollTop hinbekommen. Beispiel:
javascript - Force scrollbar to bottom - Stack Overflow

 

[Pixel-Wizard]

Leider geht diese Methode nicht, oder ich mache etwas falsch. Ich habe folgenden Code an den Anfang des Bodys eingefügt

<script>
	var objDiv = document.getElementById("chatField");
	objDiv.scrollTop = objDiv.scrollHeight;
	</script>

Was mache ich falsch? Das chatField Element, hat den overflow-Wert "scroll". Aus diesem Grund ist auch das richtige Element angesprochen worden...

 

[threadi]

Dein Fehler ist, dass Du das nicht einfach so einfügen sondern in deinen Code integrieren musst. Soweit ich es richtig verstanden habe, soll das Fenster ja nach unten Scrollen sobald ein neuer Chat-Text eingegeben wurde. Also musst Du das an genau dieses Event koppeln. Denn dein jetziger Versuch wird ausgeführt wenn die Seite geladen wird, aber nicht wenn ein neuer Text eingegeben wurde.

 

[Pixel-Wizard]

Deine Antwort stimmt nur bedingt.

Ich habe den Chat mit PHP erstellt und aus diesem Grund muss man jedes mal, wenn eine neue Nachricht geschrieben wurde, die Seite neu geladen werden (ich weiss das dies Scheisse ist, doch der Chat ist erst noch im Aufbau). Aus diesem Grund ist es schon richtig, dass das Element ganz nach unten scrollen soll wenn die Seite neu geladen wird.

Doch dies geschieht einfach nicht...

 

[Tronjer]

Leider geht diese Methode nicht, oder ich mache etwas falsch. Ich habe folgenden Code an den Anfang des Bodys eingefügt

Wie soll das auch gehen? Du sprichst ein Element an, das noch gar nicht existiert.

 

[Pixel-Wizard]

Doch das Element, welches ich angesprochen habe, existiert. Nur habe ich den HTML Code nicht auch noch eingefügt...

 

[threadi]

Ah, ok, dann müsstest Du das o.g. Script evtl. konkret nur dann starten lassen wenn das Dokument komplett geladen wurde. Mit jQuery geht das recht einfach mit einer Zeile:
.ready() | jQuery API Documentation

Alternativ geht es auch mit purem JavaScript:

window.onload = function() { alert("Hallo"); }

wobei es dazu im Netz auch ausführlichere Scripte gibt die auch einige Browser-Besonderheiten berücksichtigen.

 

[Pixel-Wizard]

Juhu, endlich klappt es! Vielen Dank für die Hilfe!!!

In dem Fall wird das Script auch vorher ausgeführt, wenn es vorher eingefügt wird. Mit window.onload kann man den Script-Start an den Schluss setzen!

Danke für die Hilfe!