[TYPO3-german] autoscroll-box (inkl. MINI-TUTORIAL)

[Michael]

Ursprüngliche Nachricht von: German Typo3 Userlist <typo3-german at lists.netfielders.de>

> > weiß jemand eine Extension, mit der ich folgendes realisieren kann:

Extra eine Exension halte ich für so eine Anforderung als übertrieben...

> > Ich habe eine Box, in der eine Liste von drei Newselemten steht. 
> > Sichtbar soll immer nur eins sein. Der Wechsel soll automatisch, 
> > scrollend nach einer bestimmten Zeit erfolgen.
[...]
> Das muss nicht ajax sein. Da reicht ein bisserl javascript.

Dem schließe ich mich an und gebe gleich ein konkretes Realisierungsbeispiel als Mini-Tutorial... absolut simple in der Umsetzung (siehe unten) und mit einem weichen Übergang (statt Scrollen).

> Ajax = Daten dynamisch vom Server nachladen.

Wenn sich die darzustellenden Daten ändern, während der Besucher eine Seite betrachtet (und keine anderen Seiten aufruft), dann macht AJAX Sinn. Bei drei "News-Elementen" denke ich aber auch, dass ein "Nachladen" nicht unbedingt notwendig ist. Aber selbst das kann mit dem folgenden Beispiel ganz einfach nachträglich erweitert werden.

Du brauchst folgende zwei Files:

(1) aktuellste Version der JavaScript-Bibliothek "jQuery" (siehe: http://jQuery.com)
(2) aktuellste Version des Plugins "newsticker" (siehe: http://www.texotela.co.uk/code/jquery/newsticker/)

Unter (2) findest du auch gleich ein Beispiel, wie das Ganze später aussehen kann.

Lege die Dateien in deiner Typo3-Umgebung ab, zum Beispiel:

fileadmin/javascript/jquery-1.2.1.pack.js
fileadmin/javascript/jquery.newsticker.pack.js

Erstelle in diesem Verzeichnis eine weitere Datei (z.B. "fileadmin/javascript/newsticker.js") mit folgenden Inhalt:

--- cut here ---
$(document).ready(function() {
	$("#newsticker").css("border", "1px solid black");
	$("#newsticker").css("background", "#ffffa0");
	$("#newsticker").css("padding", "3px");
	$("#newsticker").css("margin", "0px");
	$("#news").css("list-style-type", "none");
	$("#news").css("color", "black");
	$("#news").newsticker();
});
--- cut here ---

Binde die drei JavaScript-Dateien auf der entsprechenden Seite mit TypoScript ein, z.B.:

--- cut here ---
page {
	includeJS.file1 = fileadmin/javascript/jquery-1.2.1.pack.js
	includeJS.file2 = fileadmin/javascript/jquery.newsticker.pack.js
	includeJS.file3 = fileadmin/javascript/newsticker.js
}
--- cut here ---

Erweitere die Template-Datei deiner Seite um folgenden DIV-Container:

--- cut here ---
<div id="newsticker">
	<ul id="news">
		<li>Visit <a href="http://news.bbc.co.uk">BBC News</a> for news from the British radio/TV broadcaster</li>
		<li>Check out the <a href="http://www.google.com">Google</a> Search Engine</li>
		<li>Visit <a href="http://www.schams.net">SCHAMS.NET</a> to see my homepage</li>
	</ul>
</div>
--- cut here ---

So - habe ich noch etwas vergessen? Ich glaube nicht!
Seite im Browser deiner Wahl neu laden und gucken, ob alles läuft und du zufrieden bist.

Es gibt natürlich unzählige Möglichkeiten, die drei News-Elemente in den Container zu packen. Das oben dargestellte Beispiel ist recht statisch und unflexibel (man muss immer das Template ändern, um die News anzupassen). Du könntest natürlich auch mit Markern (z.B. ###NEWS###) arbeiten, die über TypoScript gesetzt werden. Oder die Liste in eine externe Datei auslagern und mit "FILE" inkludieren. Oder schau dir das AJAX-Beispiel auf der http://www.texotela.co.uk Seite an: damit kannst du relativ einfach auf eine extra Typo3-Seite zugereifen (die z.B. die Daten aus der DB holt oder so). Oder mit TypoScript selbst auf eine DB-Tabelle zugreifen und die <ul>-Liste zusammenbasteln... oder, oder, oder...

Fine-Tuning:
Das CSS sollte man besser statisch setzen (am besten ausgelagert in einer separate CSS-Datei).
Die Geschwindigkeit kann als Parameter in der Funktion "newsticker()" in der Datei "newsticker.js" gesetzt werden, z.B. $("#news").newsticker(1000); Der Standard-Wert ist "4000", der bewirkt, dass alle 4 Sekunden die nächste News eingeblendet wird.

HTH - Gruß
-- 
Michael