Ich habe einen guten Ticker gefunden. Läuft sehr gut. Eines stört mich aber ein bißchen. Bei unterschiedliche Länge von Meldungen, sind die Kurzen nicht mittig. Kann man das so verändern, das der Text immer mittig ist?
<script language="JavaScript"> <!-- Start var newslist=new Array(); var cnt=0; // Aktive News var curr = ""; var i=-1; // Angewählter Buchstabe
newslist[0]=new Array("Unter 'News CB-Funk' sind Neuigkeiten über den '2.Osna Radio Activity Day' Contest zu finden!") newslist[1]=new Array("Teilnahmebedingungen siehe Contest") newslist[2]=new Array("Beispielmeldung 3") newslist[3]=new Array("Beispielmeldung 4")
function newsticker() { // Nächster Buchstabe der aktiven News if (i < newslist[cnt][0].length - 1) { i++; temp1 = newslist[cnt][0]; temp1 = temp1.split(''); curr = curr+temp1[i]; temp2 = newslist[cnt][1]; mtxt.innerHTML = ""+curr+"_"; setTimeout('newsticker()',150) //Laufspeed return; }
// Nächste News i = -1; curr = ""; if (cnt<newslist.length-1) cnt++; else cnt=0; setTimeout('newsticker()',5000) // Pause zwischen den News
Wechselnder News Ticker mit Web-Links und Mittenposition Aktualisiert 26.10.2015
Hallo Magister, das Script gefällt mir sehr gut!
Was der Ticker bereits kann:
Mehrere Ticker-Nachrichten sind möglich.
Pausen zwischen den Nachrichten und die Schnelligkeit des Tickers sind einstellbar!
Der Ticker wiederholt seine Nachrichten, fängt wieder von vorne an.
Die Ticker-Nachrichten sind über "style" formatierbar!
Ich habe das Script etwas erweitert, wodurch folgende zusätzliche Funktionen hinzu gekommen sind:
Jede Ticker-Nachricht kann verlinkt werden.
Der Ticker wird mittig angeordnet und startet trotzdem linksseitig!
Kurze oder lange Ticker-Nachrichten bleiben zentriert!
Die Breite des Textfeldes bleibt gleich!
Jede Nachricht kann einzeln formatiert werden!
Grundformatierung über CSS
Zu besseren Übersicht das komplette HTML-Script:
Auf folgendes ist zu achten:
Der Ticker wird über einen Body-Eintrag "onLoad" (Zeile 7) geladen.
Script und Ausgabe des Tickers findet Platz im "Body". Die Formatierungen unter "<style>...</style>" (Zeile 7-30), können auch in die vorhandene CSS eingetragen werden!
Bei vorhandenen onLoad-Eintrag, erweitern (z.B.: <body onLoad="newsticker(); xyzScript();">)
Im Ticker-Text müssen Anführungszeichen (") gegen Auslassungszeichen (') ersetzt werden.
In den Ticker-Zeilen (Zeile 44-47) sind jeweils 3 Informationen durch Anführungsstriche und Kommata getrennt --> newslist[0]=new Array("Text","Format","Link");
Im ersten Teil der Ticker-Zeile wird der Text eingegeben, ohne Anführungszeichen!
Im zweiten Teil der Ticker-Zeile kann man die Ticker-Nachricht formatieren! Wichtig ist hier die Angabe der Breite! Sie sollte so gewählt werden, dass kein Umbruch der Nachricht einsteht! Die Breite ist für die Zentrierung notwendig!
Im dritten Teil der Ticker-Zeile wird die Link-Adresse eingetragen
In Zeile 62 kann die Geschwindigkeit des Tickers eingestellt werden.
In Zeile 72 kann die Pause zwischen den Nachrichten bestimmt werden.
In Zeile 7-32 kann die Tickernachricht für die CSS beliebig formatiert werden!
Zeile 25-29 bestimmt den Hintergrund der Nachricht. Ist nicht immer notwendig!
Zeile 25 bestimmt die Gesamthöhe der Ticker-Nachricht. Ist nur notwendig, wenn unterschiedliche Schriftgrößen genutzt werden. Hierdurch wird ein Höhensprung der Webseite vermieden!
Zeile 19 bestimmt die Gesamtlänge des Textfeldes
Die Hover-Farbe wird in Zeile 15 bestimmt.
Wird nur Text, ohne zusätzliche Breitenbestimmung und Links im Ticker abgebildet, sieht die "newList-Zeile" (44-47) wie folgt aus: newslist[0]=new Array("Nachricht..........","","")
<script language="JavaScript"> // Tickereinstellungen var newslist=new Array(); var cnt=0; // Auswahl des Start-Tickers, hier newlist[0] var curr = ""; var i=-1;
newslist[0]=new Array("+++ Neue Weltzeituhr mit JQuery-Script, Datumausgabe und Localzeit +++","width:640px;","https://www.hilfe-tricks-tipps.de/t861f31-Weltzeituhr-Verschiedene-Zeiten-anzeigen.html#msg1898") newslist[1]=new Array("+++ Meine komplette Forum-Iconbar zum herunterladen +++","width:540px","https://www.hilfe-tricks-tipps.de/t916f31-Meine-komplette-Forum-Iconbar-zum-herunterladen.html#msg2077") newslist[2]=new Array("+++ Formatierbare Tooltipps +++","width:330px","https://www.hilfe-tricks-tipps.de/t168f31-Formatierbare-Tooltipps-oder-Quickinfos-in-Forumbeitraegen.html#msg300") newslist[3]=new Array("+++ Spenden-Button fürs Forum +++","width:330px !important;","https://www.hilfe-tricks-tipps.de/t720f31-Spenden-Button-fuers-Forum-einrichten.html")
Wolfgang 1. Die Schrift soll bei jedem Text die gleiche Größe haben. 2. Die Schriftfarbe, wo kann ich sie ändern? 3. Wenn der Text unterschiedliche Längen hat, ändert sich jedesmal das gesamte Textfeld. Mal länger mal kürzer, das sieht nicht so schön aus. Ich habe alles in einer Tabelle, die sich der Größe automatisch anpasst. Kann man da noch etwas machen?
Hallo Magister, habe das Script in Beitrag #2 nochmal überarbeitet. Die Breite des Textfeldes bleibt jetzt gleich! Unter "News Ticker in Aktion" kann man sehen, wie der News Ticker jetzt funktioniert!
Folgende Änderungen müsstest Du auf Deiner Webseite machen: 1. Änderung
2. Änderung Jetzt brauchst Du nur noch hinter den Nachrichen die ungefähre Breite des Tickers eintragen, sodas kein Umbruch entsteht.
1 2 3 4 5
newslist[0]=new Array("++Info's über den 2.Osna Radio Activity Day Contest unter 'News CB Funk!++","650px") newslist[1]=new Array("++Teilnahmebedingungen findet Ihr unter 'Contest 01.11.15++","500px") newslist[2]=new Array("++Osna Radio QRV ab 18.00 Uhr MEZ, auf FM Kanal 29 (27.295 Mhz)++","600px")
3. Änderung Die Breite der Tabelle sollte einen festen Wert haben (Ist nicht zwingend erforderlich)! Zu beachten: Die Breite des Textfeldes muss immer etwas länger sein, als die längste Nachricht!
1 2 3 4
width="64%" gegen z.B.: width="700px" tauschen (längster Text "newslist[0] => 650px")!
Wechselnder News Ticker mit Blinkeffekt am Ende Aktualisiert 21.12.15
Hallo Magister, habe ein Script für Dich gefunden, das am Ende einer Nachricht blinkt!
Die Original-Version: Es sind mehrere Funktionen einstellbar. • Ein- und ausrollendem Effekt. • Einrollender Effekt mit abschließenden Blinken. • Eingehendes Blinken mit abschließenden Ausrollen. • Am Anfang und am Ende blinkt die Nachricht.
• Texte und Ticker-Verhalten lassen sich in Zeile 32-35 anpassen. • In Zeile 39-53 werden die Tickerparameter eingestellt. • In Zeile 8 befindet sich der "onload-Befehl". • In Zeile 130 kann das Aussehen des Tickers eingestellt werden.
var tickernews = [ {meldung:" Mit ein- und ausrollendem Effekt.", starteffekt:1, endeeffekt:1}, {meldung:" Hier wird eingerollt und abschließend geblinkt.", starteffekt:1, endeeffekt:2}, {meldung:" Nach dem eingehenden Blinken wird ausgerollt.", starteffekt:2, endeeffekt:1}, {meldung:" Jetzt wird am Anfang und am Ende geblinkt.", starteffekt:2, endeeffekt:2} ]
// Tickerparameter var ticker_start = 700 // Wartezeit bis zur ersten Meldung
var ticker_effekt1_start_a = 75 // Darstellungsgeschwindigkeit [ms] var ticker_effekt1_start_b = 2500 // Darstellungszeit der Meldung [ms]
var ticker_effekt2_start_max_blink = 2 // Anzahl der Blinkdarstellungen var ticker_effekt2_start_a = 300 // Blinkgeschwindigkeit [ms] var ticker_effekt2_start_b = 2500 // Darstellungszeit der Meldung [ms]
var ticker_effekt1_ende_a = 50 // Scrollgeschwindigkeit [ms] var ticker_effekt1_ende_b = 100 // Wartezeit bis zur naechsten Meldung [ms]
var ticker_effekt2_ende_max_blink = 2 // Anzahl der Blinkdarstellungen var ticker_effekt2_ende_a = 300 // Blinkgeschwindigkeit [ms] var ticker_effekt2_ende_b = 1000 // Wartezeit bis zur naechsten Meldung [ms]
// Interne Variablen var msgnr = 0
// Aufruf der naechsten Meldung function nextTicker() { msgnr++ if(msgnr >= tickernews.length) msgnr = 0 setTimeout("showTicker(0)", 1000) }
Ich denke, dass die 2. Funktion Deiner Vorstellung entspricht, "Einrollender Effekt mit abschließenden Blinken ". Baut man die Zeile 129-131 etwas um, passt das Script in Deine Webseite. Leider kann man noch nicht die Farben eines einzelnen Tickers verändern! Mal sehen! Es ist noch darauf zu achten, den "onload-Befehl " im "Body " (Zeile 8) einzutragen!
var tickernews = [ {meldung:" +++ Der Osna Radio Club wünscht Euch einen schönen 3. Advent. +++", starteffekt:1, endeeffekt:2}, {meldung:" +++ Funkbetrieb zum Jahreswechsel --> 30.12.2015 - 01.01.2016 +++", starteffekt:1, endeeffekt:2}, {meldung:" +++ Wir begrüßen unsere neuen Club-Mitglieder: +++", starteffekt:1, endeeffekt:2}, {meldung:" +++ '13 Osna Radio 10' Sascha aus Achmer (Sierra Hotel 3) +++", starteffekt:1, endeeffekt:2} ]
// Tickerparameter var ticker_start = 700 // Wartezeit bis zur ersten Meldung
var ticker_effekt1_start_a = 75 // Darstellungsgeschwindigkeit [ms] var ticker_effekt1_start_b = 2500 // Darstellungszeit der Meldung [ms]
var ticker_effekt2_start_max_blink = 2 // Anzahl der Blinkdarstellungen var ticker_effekt2_start_a = 300 // Blinkgeschwindigkeit [ms] var ticker_effekt2_start_b = 2500 // Darstellungszeit der Meldung [ms]
var ticker_effekt1_ende_a = 50 // Scrollgeschwindigkeit [ms] var ticker_effekt1_ende_b = 100 // Wartezeit bis zur naechsten Meldung [ms]
var ticker_effekt2_ende_max_blink = 2 // Anzahl der Blinkdarstellungen var ticker_effekt2_ende_a = 300 // Blinkgeschwindigkeit [ms] var ticker_effekt2_ende_b = 1000 // Wartezeit bis zur naechsten Meldung [ms]
// Interne Variablen var msgnr = 0
// Aufruf der naechsten Meldung function nextTicker() { msgnr++ if(msgnr >= tickernews.length) msgnr = 0 setTimeout("showTicker(0)", 1000) }
// Start des Tickers function StartTicker() { // Standardmeldung // document.NewsTicker.Zeile.value = " Ticker wird geladen..." // nicht unbedingt notwendig!
// Ticker starten setTimeout("showTicker(0)", ticker_start) }
Wechselnder News Ticker mit Blinkeffekt am Ende - Fehler gefunden!
Ich finde, dass die Lademeldung für den Ticker (Zeile 120) stört. Man kann sie auch auskommentieren:
1
// document.NewsTicker.Zeile.value = " Ticker wird geladen..."
Wolfgang
Thx Wolfgang. Habe das ausgeklammert. Fehlt nur noch, das ich die Texte in verschiedene Farben darstellen kann. Bin voller zuversicht, das Du das auch noch hinbekommst.
Der Treffpunkt für Hilfe, Tricks & Tipps
»
XOBOR-Foren und Homepages
»
Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten!
»
Wechselnde, durchlaufende und verlinkte News Ticker
23.10.2015 21:54 (zuletzt bearbeitet: 25.12.2015 23:23)
Foren Spende
Direkt zu PayPal
Thema drucken
Antworten
