Ajax-basierender textticker in Netobjects einfügen

Nachdem der alte Textticker in den neuen Browsern unschön ruckelte und auch unnötige Leerräume zwischen den Meldungen hatte. hab ich mich auf die Suche nach einem neuen weichen Ticker gemacht.

Dieser Ticker läuft von oben nach unten. Die Scriptschnipsel sind klein und überschaubar, da die gesamte Technik und auch die Texte ausgelagert werden. daher benötigen wir neben den Scriptschnipseln eine zusätzliche JS-Datei. Die angezeigten Texte werden in einer TXT-Datei ausgelagert. (das Einbinden dieser Dateien wird hier gezeigt)

Vorbereitungen:

Die benötigte JS-Datei gibt es hier - bitte mit rechte Maustaste und speichern unter auf eurer Festplatte ablegen. Die TXT-Dateit erstellen wir selber mit dem Editor und nennen sie tickercontent.txt - sie bleibt erstmal leer.

Für den Ticker benötigen wie zwei Scriptschnipsel, die wir die in verschiedene Bereiche des Seiten-HTML kopieren. Die JS_Datei und die TXT-Datei müssen entweder als Asset eingebunden werden (siehe oben) oder manuell in an die richtige Stelle des local publish-Ordners kopiert werden.

Dieser Schnipsel kommt zwischen die Headtags

wir drücken F9, um das Layout-Eigenschaftenfenster zu öffnen und drücken auf den HTML-Button - es öffnet sich ein Fenster - dort auf den Reiter zwischen den Head-Tags

Breite, Höhe, Rahmen, Hintergrund können wir unseren eigenen Wünschen anpassen (siehe unten). Für zusätzliche Änderungen steht eine Formatvorlage (someclass) zur Verfügung.

Dieser Schnipsel kommt per Textfeld oder Zelle an die gewünschte Stelle

Wir ziehen ein Textfeld auf oder klicken in eine Zelle. Zum Einfügen nutzen wir entweder das HTML der erweiterten Werkzeuge oder klicken in der oberen Menüleiste auf Text/HTML einfügen.

Alle Änderungen in der Übersicht:

Im ersten  Scriptschnipsel können folgende Zeilen von uns angepasst werden:

• #ajaxticker1 //name
• {
• width: 200px;  //breite des tickers
• height: 100px;  //höhe des tickers
• border: 1px solid black; //rahmeneinstellungen - hier: 1px durchgehend in schwarz
• padding: 5px; //innenabstand des textes zum rahmen - hier: 5px
• background-color: #ffffff; //hintergrundfarbe
• }
   
• #ajaxticker1 div{ /*IE6 bug fix. Style im  DIV für die gleiche Hintergrundfarbe */
• background-color: #ffffff;
  }

Im zweiten Scriptschnipsel können folgende Zeilen von uns angepasst werden:

• var xmlfile="tickercontent.txt" //die txt-datei - liegt hier im html-ordner von nof
• //verhalten des ajax_ticker
• //xmlfile, name des tickers, die formatvorlage, zeit bis zum wechsel in millisekunden, fadingübergang
• new ajax_ticker(xmlfile, "ajaxticker1", "someclass", 3500, "fade")

Möchte man also z.B. die Fadingzeit ändern, ändert man den Wert 3500. Werden die Passagen kopiert und ein neuer name vergeben, können mehrere Ticker auf einer Seite genutzt werden (Auch neue TXT-Datei!!)

Die TXT-Datei

Noch eine kleine Hürde: Sonderzeichen und Umlaute

Sonderzeichen und  Umlaute müssen in der TXT-Dateo als echtes HTML eingetragen werden. Zugegeben: das ist umständlich, aber seht es als kleine HTML-Übung ;-) - wer genau hinschaut, kann die Regel schnell erkennen.

ä = ä
Ä = Ä
ö = ö
Ö = Ö
ü = ü
Ü = Ü
ß = ß

Weitere Sonderzeichen findet Ihr hier

fertisch

Gefunden habe ich den Ticker bei http://www.dynamicdrive.com/dynamicindex2/ajaxticker.htm