TYPO3 Mailingliste: nicht fragen - lesen!

Ursprüngliche Nachricht von: German Typo3 Userlist <typo3-german (AT) lists (DOT) 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

_______________________________________________
TYPO3-german mailing list
TYPO3-german (AT) lists (DOT) netfielders.de
http://lists.netfielders.de/cgi-bin/...o/typo3-german

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 (DOT) 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ß
>


_______________________________________________
TYPO3-german mailing list
TYPO3-german (AT) lists (DOT) netfielders.de
http://lists.netfielders.de/cgi-bin/...o/typo3-german

Ursprüngliche Nachricht von: German Typo3 Userlist <typo3-german (AT) lists (DOT) netfielders.de>

> Hallo und DANKE!
> werd das direkt mal ausprobieren.
> hört sich auf jeden fall schon mal sehr interessant an.

Bericht mal, ob's funktioniert hat und ob das Mini-Tutorial verständlich und fehlerfrei war. Ich hab's lediglich auf so'ner kleinen Test-Umgebung ausprobiert und parallel dazu die Anleitung zusammengeschrieben - ohne viel Aufwand/Zeit zu investieren.

Gruß
--
Michael

_______________________________________________
TYPO3-german mailing list
TYPO3-german (AT) lists (DOT) netfielders.de
http://lists.netfielders.de/cgi-bin/...o/typo3-german