Wechselnder News Ticker mit Blinkeffekt und anderen Formatierungsmöglichkeiten!
Hallo Magister, super, dass Du bereits eine Lösung gefunden hast!
Ich habe noch etwas an dem Script herumgeschraubt
Habe den "onload-Befehl" (Zeile 8) aus dem Body genommen und mit "window.onload = StartTicker()" (Zeile 135) ersetzt.
Um unterschiedliche Farben darzustellen, war der Eintrag "farbe:..." (Zeile 32+33) und "document.NewsTicker.style.color ....." Zeile 96 notwendig.
Entfernt man jeweils die Schrägstriche in Zeile 34+35 und Zeile 97-100 können weitere Formatierungen pro Nachricht ermöglicht werden.
Es lassen sich jetzt Schriftfarbe, Schriftgröße, Rahmen, Hintergrund und Rahmenradius pro Ticker-Nachricht verändern.
Es können die Formatierungen auskommentiert werden, die nicht verändert werden (Zeile 34,35,95-99). Die Grund-Formatierung kann in der Ausgabezeile 146 gemacht werden.
Die Formatierung in der Ausgabezeile kann auch etwas eleganter über eine class="newsticker" bewerkstelligt werden.
Wichtig! Keine Anführungszeichen im Ticker-Text verwenden!
Wichtig! Alle Werte müssen in verwendete Formatierungen eingetragen werden!
// 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) }
Hier kommt ein weiter Newsticker mit durchlaufendem Text und Verlinkung zu den Themen! Habe einen tollen Newsticker auf "jsfiddle.net" gefunden und ihn ein wenig angepasst!
Was kann das Skript?
Laufschrift ist durchgehend!
Laufschrift stoppt beim Überfahren eines Links!
Links und Grafiken können mit Tooltipps versehen werden!
Lauftext beim Eintragen unkritisch, kann umgebrochen und beliebig formatiert werden!
HTML-Formatierungen möglich!
Bilder und Grafiken können eingetragen werden.
Schnelligkeit und Laufrichtung einstellbar!
Funktioniert in allen Templates!
Installation für alle Templates, auch Mobil!
Das Skript kann beliebig eingetragen werden! Zum schnellen Testen für die Templates (v1-4) in die Kopf- oder Fußzeile, fürs Xobor (v6) in "Eigene Kopfzeile" oder "Eigene Fußzeile"! Möchte man spezielle Punkte im Forum erreichen ist ein Plugin die bessere Wahl!
In Zeile 7 wird die Höhe des Newsticker eingestellt!
In Zeile 3 wird die Hintergrundfarbe des Newstickers angepasst!
In Zeile 8 wird durch "line-height" indirekt der Abstand von Bildern zum Rand eingestellt!
In Zeile 14 wird die Breite oder auch die Höhe der Grafik bestimmt!
In Zeile 26 wird der Abstand zwischen den einzelnen Links festgelegt!
Der Ticker-Text wird zwischen Zeile 41-51 eingetragen, mit Verlinkungen und beliebigen Formatierungen!
<!-- Eintragungen zum Lauftext - Anfang --> <a href="/"><img title="Zur Forum Übersicht" src="//files.homepagemodules.de/b104774/avatar-e1e3f372-1.gif"></a>
<a href="//www.hilfe-tricks-tipps.de/t51f32-Die-Top-Favoriten-aus-diesem-Forum.html">Die meist gefragten Themen</a>
<a href="//www.hilfe-tricks-tipps.de/t94f25-Wichtig-und-notwendig-Mehr-Sicherheit-im-Internet-und-im-Forum.html#msg104">Mehr Sicherheit im Internet</a> <!-- Eintragungen zum Lauftext - Ende -->
</div> </div>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script> <script> $(function () { function startScrolling(ticker_obj, velocity, start_from) { ticker_obj.bind('marquee', function (event, c) { var ob = $(this); var sw = parseInt(ob.parent().width()); var tw = parseInt(ob.width()); var tl = parseInt(ob.position().left); var v = velocity > 0 && velocity < 100 ? (100 - velocity) * 1000 : 5000; var dr = (v * tw / sw) + v; switch (start_from) { case 'right': if (typeof c == 'undefined') { ob.css({ left: sw }); sw = -tw; } else { sw = tl - (tw + sw); }; break; default: if (typeof c == 'undefined') { ob.css({ left: -tw }); } else { sw += tl + tw; }; } ob.animate({ left: sw }, { duration: dr, easing: 'linear', complete: function () { ob.trigger('marquee'); }, step: function () { if (start_from == 'right') { if (parseInt(ob.position().left) < -parseInt(ob.width())) { ob.stop(); ob.trigger('marquee'); }; } else { if (parseInt(ob.position().left) > parseInt(ob.parent().width())) { ob.stop(); ob.trigger('marquee'); }; }; } }); }).trigger('marquee'); ticker_obj.mouseover(function () { $(this).stop(); }); ticker_obj.mouseout(function () { $(this).trigger('marquee', ['resume']); }); };
/* Settings to Function */ var ticker = $('.tickertext'); /* Element to scroll */ var scrolling_velocity = 50; /* 1-99 */ var scrolling_from = 'right'; /* 'right' or 'left' */
Rückfragen zum durchlaufenden Newsticker mit Verlinkung
Hallo Wolfgang!
Zitat von Wolfgang im Beitrag #12Zum schnellen Testen für die Templates (v1-4) in die Kopf- oder Fußzeile, fürs Xobor (v6) in "Eigene Kopfzeile" oder "Eigene Fußzeile"! Möchte man spezielle Punkte im Forum erreichen ist ein Plugin die bessere Wahl!
Jetzt brauchen wir den Newsticker endlich! Und sehr praktisch auch für weitere Anlässe, Adventskalender und Bugs. Aber einige Rückfragen hätte ich: 1. Ich muss es für Mobil als Plugin einrichten, oder? 2. Was meinst du wohl mit "spezielle Punkte im Forum"? 3. Wie krieg ich die beiden zu großen eingefügten gifs kleiner, wenn die andern 3 aber gut so sind? (Der Pokal wirkt nicht so gut wie auf weißem Hintergrund...) 4. Könnte ich die eingefügten Fotos direkt jeweils zum Original-Beitrag verlinken oder müsste ich Links getrennt setzen? (Vielleicht reicht allerdings auch einfach der Thread-Link) 5. Wie ginge es wie bei dir wegklickbar oder zeitlich begrenzt falls das nötig werden sollte? Falls es nötig werden sollte: Platziert ist es jetzt unter dem Titel, deins ist ganz oben...
Mit der Schriftart und Farbe bin ich noch unzufrieden, aber wenn ichs für mobil eingerichtet hab, hol ich erstmal Rückmeldungen ein. Eventuell probier ich auch andre Möglichkeiten wie Würfel und Forenzeitung und eine Admin-News gibt es glaub ich doch auch?
Na, durchs Testen gerade steigt aber die Vorfreude zu Weihnachten!
Vielen Dank erstmal!
1. Ah, Kopf-/Fußzeile ist unter HMTL/JS versteckt - hatte ich nicht mehr gewusst! Hab lieber 2mal installiert. Das Desktop-angepasste Design wird zwar für OK befunden, aber der Durchlauf muss unterschiedlich schnell: für Desktop 80, für Mobil aber 95. Also nicht als Plugin.
2. Verstanden! Nach ersten Rückmeldungen scheine ichs nicht zu brauchen, aber wenn doch gäbs bestimmt Möglichkeiten die Geschwindigkeit getrennt einzustellen...
⮕ 3. Noch nicht verstanden... [video=100px][[File:https: scheint mir nicht für die Newsticker-gifs zu passen?
1
<a href="/"><img title="Smiley mit Fotokamera" src="//files.homepagemodules.de/b915068/f55286t350p6393051n41_USegNbOQ.gif"></a>
⮕ Plus hochformatige jpgs schießen anders quer, indem sie nicht beschnitten werden, sondern den Text zu tief schieben: Bildausschnitte erstmal als Workaround. (Ähnlich könnte ich die gifs verkleinern, nur putzig, dass große querformatige jpgs sich anpassen nur weder zu große animierte gifs noch hochfomatige jpgs.)
⮕ 4. Auch noch nicht kapiert.... Auch [url=https...[img]https://bildadresse... scheint mir nicht für die Newsticker-jpegs zu passen? Ich meinte ja, ob man durch Klicken auf jpegs im Newsticker entweder zu deren Original-Beitrag des Fotos, oder notfalls auf ein Vollbild/Vergrößerung kommen kann.
5. Vielen Dank, hab ich gedacht, aber nicht gefunden, weil ich nicht auf "News-Laufschrift" als Begriff gekommen bin. Im Moment brauch ichs nicht, aber ich rechne damit, dass sich irgendjemand auf Dauer dann doch beschwert: ⮕ Sind denn die Baustellen-Hinweise in #3 und #7 aktuell?