Liste am Bildschirm von unten nach oben anzeigen...

meycom

Well-known member
14 Oktober 2008
79
1
Ihr kennt doch sicherlich den Bildschirminhalt von so einem Chat (als Beispiel)
Unten wird was eingegeben und der gesendete Text wir in der Anzeigefläche am Bildschirm unten angezeigt und der vorherige Text wird nach oben verschoben. Also wie eine Tabelle die nicht von oben nach unten sondern von unten nach oben aufgelistet wird. Ohne zu scrollen wird der letzte Eintrag (unten) angezeigt.
Weiss einer wie man sowas in php hin bekommt ?
 
vielleicht bringt dir das hier etwas:

PHP:
function scrollElementToEnd (element) {
if (typeof element.scrollTop != 'undefined' &&
typeof element.scrollHeight != 'undefined') {
element.scrollTop = element.scrollHeight;
}
}

ansonsten mach dich mal schlau und such was über "scrollto(x,y);" das sollte dir dann auf jeden fall weiter helfen.
 
Ob der neue Text oben oder unten steht hat doch einfach nur damit etwas zu tun, wie das Skript den Text ausgibt. Also wenn ich z.B. Daten aus der Datenbank hole, kann ich die Ergebnisse Sortieren z.B. mit "ORDER BY date ASC" dann hab ich das letzte neu eingetragene Ereignis ganz unten. Oder ich verwende "ORDER BY date DESC" dann is das neueste Ergebnis ganz oben. Wenn ich das dann ausgeben lasse ist das letzte Ereignis ganz oben.

Es würde uns sicherlich helfen, wenn du uns deine Anwendung sagen würdest und wir einen Blick drauf werden könnten, dann ist es einfacher zu sagen, wie du das ändern kannst, weil das in jeder ProgrammierSprache (PHP, MYSQL, JAVA, JAVASCRIPT [Ich weiß, das sind nicht alles RICHTIGE Programmiersprachen]) anders zu verarbeiten ist.
 
Sortieren z.B. mit "ORDER BY date ASC" dann...

das ist mir schon klar DESC und so. Aber das meine ich nicht.
Wenn du eine Tabelle am Bildschirm anzeigst bekommst du diese immer mit dem ersten (oder auch letzten) von oben nach unten angezeigt.
Z.B. bei einer Schoutbox ist das auch so - du gibst einen neuen Text ein. Über dem Eingabefeld wird meist die Liste der eingegebenen Texte angezeigt. Den Text den du gerade eingegeben hast siehst du dann in der letzten Zeile (ganz unten) angezeigt der früher eingegebene Text wird nach oben verschoben. Durch Scrollen kannst du dir dann die vorherigen Texte (weiter oben) anschauen (siehe auch den Messenger von MS da ist das auch so). Ich versuch das mal hier darzustellen:

text a
text b
.
.
letzter Text
-------------------
Eingabe :<input.... :Das ist ein neuer Text

Nach dem Senden siehst du folgendes:
----------------------------
text a
text b
.
.
letzter Text
Das ist ein neuer Text
----------------------------
Eingabe :

Wie nicht schwer zu erkennen (so hoffe ich zu mindest) wurde nach dem Senden der Eingabe der Inhalt des Bildschirmes (oder besser der Ausgabebereich) nach oben verschoben und der gerade eingegebene Text erscheint im Ausgabebereich ganz unten.
Da steckt bestimmt iregend ein Trick dahinter - aber ich kriegs nicht raus...
 
weil das in jeder ProgrammierSprache (PHP, MYSQL, JAVA, JAVASCRIPT [Ich weiß, das sind nicht alles RICHTIGE Programmiersprachen]) anders zu verarbeiten ist.[/QUOTE]

ich versuche das in PHP
 
Naja irgendwo wirst du die Daten aus der ShoutBox doch speichern oder??? Eine ShoutBox ist meistens in einem Extra IFRAME geladen, dadurch musst du nicht die gesamte Seite neu laden sondern nur diesen einen Frame...

Wenn du nun die neuen Daten in der Datenbank stehen hast, dann kannst du doch ganz einfach die Daten sortiert nach dem Datum ausgeben lassen.

PHP:
<?php
$query = mysql_query('SELECT * FROM `shoutbox` ORDER BY date DESC LIMIT 20');
while($data = mysql_fetch_assoc($query))
{
echo '<b>'.$data['user'].'hat geschrieben:</b><br/>'.$data['content'].'<br/>';
}
?>
Damit gibst du die Daten aus der Datenbank NACHEINANDER aus... Dann ist es doch dir überlassen ob du die Datensätze aufwärts oder abwärts sortieren lässt. Ob das jetzt eine Tabelle ist oder ein einfacher fließender Text is komplett egal. ShoutBoxen, sofern sie nicht mit JavaScript zusammenarbeiten, müssen immer neu geladen werden, nachdem ein Eintrag abgeschickt wurde.... Und beim nächsten Laden kannst du dir dann echt überlegen wo du deinen neuen Beitrag haben willst.... ganz oben, in der Mitte, an 3. Position... völlig egal.... das ist dann nur eine Frage, wie du die Schleife die Daten ausgeben lässt....

Wenn du die ShoutBox allerdings fest in die Seite einbaust... also nicht per extra Seite also iFrame, dann muss die komplette Seite nen reload erfahren, was eh passiert, wenn du Daten per Post übergeben willst und kein JavaScript verwendest....
 
Das ist ja alles richtig !!! NUR ---
Die Auflistung des Tabelleninhaltes beginnt immer oben (egal ob mit dem ersten oder dem letzten Eintrag). Der soll aber die Tabelle mit dem ersten Eintrag beginnen und nur die letzten xx Einträge anzeigen. Hier bei kann xx einen unterschiedlichen Wert besitzen.
Das ist so als würde er die Tabelle anzeigen und du diese Tabelle ganz nach unten scrollst. Dieses Scrollen soll aber das Programm übernehmen und nicht der User
 
ich habe da ein Script gefunden was der ganzen Sache schon nahe kommt.
Allerdings in JavaScript.
Wie kriege ich das jetzt so das die Anzeige automatisch beim Anzeigen sofort das ende (in diesem Fall i=100) anzeigt ?

Hier das Schript:
HTML:
<html><head>
<title>Scroll-Test</title>
<meta http-equiv='content-type'     content='text/html;charset=ISO-8859-1'>
<script type="text/javascript">
<!--
var oben = 0;
var ud;
function scroll( updown ) {
  if ( updown == 'up' ) oben = oben -10; else if ( updown == 'down' ) oben = oben +10;
  window.document.getElementById( 'info' ).style.marginTop = oben+"px";
  ud = updown;
  if ( updown != 'stop' ) setTimeout("scroll( ud )",100 );
}
//-->
</script>
</head>

<body>
<table border=1>
<tr><td align=right onMouseover="scroll('down')" onMouseout="scroll('stop')">Maus hier = down</td></tr>
<tr><td><div style="width:300px; height:300px; max-height:300px; overflow:hidden">
<p id="info">
<script type="text/javascript">
<!--
for(var i=1; i<=100; i++)
document.write("<br>Zeile " +i );
//-->
</script>
</p></div></td></tr>
<tr><td align=right onMouseover="scroll('up')" onMouseout="scroll('stop')">Maus hier = up</td></tr>
</table>

</body></html>
 
Zuletzt bearbeitet von einem Moderator:
Probier es doch, indem du beim letzten Datensatz einen Anker benutzt und die Seite damit aufrufst...
Nicht so elegant, aber das müsste doch umsetzbar sein, denke ich

Das um den letzten Beitrag schachteln:
HTML:
<a name="last_post">
Das ist ein neuer Beitrag
</a>

So aufrufen:
HTML:
index.php#last_post

:think: