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

[Markus Gevers]

Hallo und DANKE!

werd das direkt mal ausprobieren.

hört sich auf jeden fall schon mal sehr interessant an.

Schönen Gruß und schon mal einen schönen Feierabend -Markus

Hello 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ß
>