Kategorie: Webentwicklung
Oben rechts auf der Seite habe ich einen Monitor eingebaut, der verschiedene Inhalte anzeigen kann. Die Inhalte befinden sich in der Datenbank und werden dort als HTML code abgespeichert, der dann direkt in dem Monitor angezeigt wird. Platziert und gestaltet ist das ganze natürlich per CSS und die Daten werden per AJAX dynamisch on-the-fly alle paar Sekunden nachgeladen.
Hierzu benutze ich die Prototype Klasse, da sie schon viele Grundfunktionen mitliefert. Unter anderem die funktion $(), mit welcher man direkt auf Objecte zugreifen kann. Es steht für die Function document.getElementById() und erspart somit viel Tipparbeit. Die Ajax Funktion kommt ebenfalls von Protoype und wir wie folgt eingebunden:
new Ajax.Request('/tools/monitor', {
onSuccess: function(transport) {
$('monitor').update(transport.responseText);
}
});
Das Script erstellt einen Ajax-Request an die Datei 'tools/monitor'. Diese Datei holt den Inhalt, der auf dem Monitor angezeigt werden soll, aus der Datenbank und liefert das entsprechende HTML zurück. Bei dem Event 'onSuccess' wird eine Funktion definiert, welche die gewünschten Aktionen ausführt, sobald der Request erfolgreich war. In diesem Falle wird das DIV-Element 'monitor' mit dem zurück geliefertem HTML-Text gefüllt. Die Funktion update() von Prototype überschreibt den gesamten Inhalt eines Elementes.
Wird das ganze nun mit setTimeout() aufgerufen, kann man es zeitverzögert aktualisieren, sodass jeder Text ein paar Sekunden stehen bleibt. Für die Zeit des Ladens eines neuen Inhaltes wird noch ein 'Rauschen' in Form eines animierten GIFs auf dem Monitor angezeigt.
Prototype ist mit allen gängigen Browsern kompatibel und man braucht nicht für alle Browser eine eigene Umsetzung des Scriptes.
Download: Prototype
Mal sehen ob alles funzt!
nun muss ich dir auch erst mal einen Kommentar schreiben. Ich find das neue Design deiner Seite echt super, haste dir sehr viel Mühe mit gegeben und das Resultat kann man ja nun bewundern! Ganz toll :) !! :-*