Hallo Gert,
Gert wrote: ↑Tue 20. Feb 2024, 15:16
Wusste gar nicht, was für einen geilen Effekt dieses Plugin hat
Warum muss immer ich sonen Kram finden
Gert wrote: ↑Tue 20. Feb 2024, 15:16
Ist ja unglaublich - DAS brauchst Du?
Mit dem Newsticker-Plugin habe ich auf CMSimple laufen gelernt. Danach kamen Subsites dazu. Ach ja, und dann noch dein Tipp mit 'userfuncs.php'. Inzwischen habe ich ziehmlich viel verbaut, was du mir in die Hand gegeben hast. Danke!
Ich möchte hier mal ein wenig Prosa loslassen...
Ich steh auf Ticker, weil wir damals, Anfang 2000, auf der alten HanseCom Website einen hatten. Den habe ich in meinem Datengrab wieder gefunden und in meine 'Testarossa'-Seite reingeschmissen. Ja, da schwelgt man in Erinnerungen, wie es damals war, als Websites auf 800 x 600 optimiert wurden. Die Fa. HanseCom, wie sie damals war, gibt es auch nicht mehr.
HTML
Code: Select all
<h3>Alter HaC Ticker (alle Möglichen Effekte)</h3>
<p style="width: 0, height: 0; margin: 0; padding: 0;"><!-- DOR: p-Tag zum Nullinger gemacht -->
<script>
window.onload = function () {StartTicker();}
</script>
</p>
<div class="dor_container_ticker_hac"><form name="NewsTicker"><input class="dor_textausgabe_ticker_hac" name="Zeile" readonly="readonly" type="text"></form></div>
Jetzt komme mir nicht mit:"Warum form-Tag?" Ich habe ein wenig mit div- und span-Tag herumgebastelt und es nach kurzem aufgegeben. Never touch a running Ticker! Da fällt mir der andere Satz ein:"Never run a changing system!".
JS
Code: Select all
// Ticker
// © Autor Dietmar Rabich
// http://www.rabich.de
function StartTicker() // DOR: Wird mit '<script> window.onload = function () {StartTicker();} </script> in der Seite gestartet
{
document.NewsTicker.Zeile.value = "Bitte nutzen Sie einen aktuelleren Browser."
}
// Tickermeldungen
// Es muessen alle drei Werte angegeben werden und es kann nur ein Meldungseintrag angegeben werden.
// meldung:"XYZ"
// Effekte fuer Start:
// 1: einrollen
// 2: blinken
// Effekte fuer Ende:
// 1: ausrollen
// 2: blinken
/*
var tickernews =
[
{meldung:"ein- und ausrollendem Effekt.", starteffekt:1, endeeffekt:1},
{meldung:"Hier wird eingerollt und abschlie\xDFend 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}
]
*/
var tickernews = // DOR: Das ist ein relativ assoziatives Array, wird aber noch ueber 'cnt' angesprochen
[
{meldung:"Meine Driarukt-Website mit dem Ticker aus der alten HanseCom-Website von 2003", starteffekt:1, endeeffekt:1},
{meldung:"Wer lesen kann ist ganz klar im Vorteil und kann erkennen, dass mehrere Tickertexte kommasepariert sein m\xFCssen!", starteffekt:2, endeeffekt:1},
{meldung:"Der dargestellte Text kann nicht kopiert werden, weil er 'readonly' ist", starteffekt:1, endeeffekt:2},
{meldung:"Wollte den Ticker vom form-Tag auf span-Tag umbauen, aber TinyMCE spuckt mir in die Suppe!", starteffekt:2, endeeffekt:2},
{meldung:"Meine Styles f\xFCr die Initiale habe ich unter Fr\xFChling endlich eingebaut", starteffekt:1, endeeffekt:1}
// {meldung:"HanseCom auf der 'rail#tec' (Halle 7, Stand 7094) vom 7. bis 9. November 2005 in Dortmund", starteffekt:1, endeeffekt:1}
// {meldung:"HanseCom auf dem 6. Deutschen Nahverkehrstag in Koblenz, 14. - 16. September 2005", starteffekt:1, endeeffekt:1},
// {meldung:"19.08.2005 - Wiederholungsaudit bestanden: DQS erteilt HanseCom erneut Zertifikat nach DIN EN ISO 9001:2000", starteffekt:1, endeeffekt:1}
]
// Tickerparameter
var ticker_start = 2000 // Wartezeit bis zur ersten Meldung
var ticker_effekt1_start_a = 40 // Darstellungsgeschwindigkeit [ms]
var ticker_effekt1_start_b = 2500 // Darstellungszeit der Meldung [ms]
var ticker_effekt2_start_max_blink = 3 // Anzahl der Blinkdarstellungen
var ticker_effekt2_start_a = 200 // Blinkgeschwindigkeit [ms]
//var ticker_effekt2_start_b = 2500 Darstellungszeit der Meldung [ms]
var ticker_effekt2_start_b = 2500 // Darstellungszeit der Meldung [ms]
var ticker_effekt1_ende_a = 40 // Scrollgeschwindigkeit [ms]
var ticker_effekt1_ende_b = 100 // Wartezeit bis zur naechsten Meldung [ms]
var ticker_effekt2_ende_max_blink = 3 // Anzahl der Blinkdarstellungen
var ticker_effekt2_ende_a = 200 // Blinkgeschwindigkeit [ms]
//var ticker_effekt2_ende_b = 1000 Wartezeit bis zur naechsten Meldung [ms]
var ticker_effekt2_ende_b = 500 // Wartezeit bis zur naechsten Meldung [ms]
var dor_ticker_naechste_meldung = 500 // DOR: hinzufefuegt und in 'nextTicker()->setTimeout()' eingefuegt. Aufruf der naechsten Meldung [ms]
// Interne Variablen - Welcher Tickertext soll zuerst aufgerufen werden? Zaehlung ist 0 - ???
var msgnr = 0
// Aufruf der naechsten Meldung
function nextTicker()
{
msgnr++
if(msgnr >= tickernews.length)
msgnr = 0
//setTimeout("showTicker(0)", 1000)
setTimeout("showTicker(0)", dor_ticker_naechste_meldung)
}
// Effekte fuer Meldungsende
function hideTicker(cnt)
{
switch(tickernews[msgnr].endeeffekt)
{
// Effekt 2
case 2:
document.NewsTicker.Zeile.value = ((cnt % 2) == 1) ? tickernews[msgnr].meldung : ""
if(cnt > (2 * ticker_effekt2_ende_max_blink + 1))
setTimeout("nextTicker(0)", ticker_effekt2_ende_b)
else
setTimeout("hideTicker(" + String(cnt + 1) + ")", ticker_effekt2_ende_a)
break
// Effekt 1
default:
document.NewsTicker.Zeile.value = tickernews[msgnr].meldung.substring(cnt, tickernews[msgnr].meldung.length)
if(cnt >= tickernews[msgnr].meldung.length)
setTimeout("nextTicker()", ticker_effekt1_ende_b)
else
setTimeout("hideTicker(" + String(cnt + 1) + ")", ticker_effekt1_ende_a)
}
}
// Effekte fuer Meldungsanfang
function showTicker(cnt)
{
switch(tickernews[msgnr].starteffekt)
{
// Effekt 2
case 2:
document.NewsTicker.Zeile.value = ((cnt % 2) == 1) ? "" : tickernews[msgnr].meldung
if(cnt > (2 * ticker_effekt2_start_max_blink + 1))
setTimeout("hideTicker(0)", ticker_effekt2_start_b)
else
setTimeout("showTicker(" + String(cnt + 1) + ")", ticker_effekt2_start_a)
break
// Effekt 1
default:
document.NewsTicker.Zeile.value = tickernews[msgnr].meldung.substring(0, cnt)
if(cnt >= tickernews[msgnr].meldung.length)
setTimeout("hideTicker(0)", ticker_effekt1_start_b)
else
setTimeout("showTicker(" + String(cnt + 1) + ")", ticker_effekt1_start_a)
}
}
// Start des Tickers
function StartTicker()
{
// Standardmeldung
//document.NewsTicker.Zeile.value = "Ticker wird geladen..."
document.NewsTicker.Zeile.value = "Muss ma kuckn, was ich hab' ..."
// Ticker starten
setTimeout("showTicker(0)", ticker_start)
}
//-->
CSS
Code: Select all
/* HaC Newsticker */
.dor_container_ticker_hac
{
display: block; /* DOR: hinzugefuegt - bringt aber nix */
margin: 2px 0 10px 0;
padding: 2px;
float: left;
width: 98.7%; /* DOR: Wichtig, damit der Ticker rechts nicht abgeschnitten wird */
/*padding-left: 0%;
color: #003366;*/
}
.dor_textausgabe_ticker_hac[type=text] /* DOR: 'type'-Attribut hinzugrfuegt */
{
border: none; /* DOR: Wichtig, damit das Textfeld keinen Rahmen darstellt. */
border-radius: 0 10px 10px 0; /* DOR: hinzugefuegt, damit das Textfeld wie 1. Navi erscheint */
outline: rgba(68,68,68,.6) solid 1px; /* DOR: hinzugefuegt fuer Rahmen und Farbe angepasst */
padding: 4px 4px 2px 4px; /* DOR: Abstaende angepasst */
background: rgba(235, 230, 212,.5); /* DOR: Farbe angepasst */
font-weight: 600;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 12px;
color: rgba(68,68,68,1); /* DOR: Farbe angepasst - #444 */
width: 100%;
}
Dann habe ich auch noch einen CSS-Ticker gefunden, der vertikal verläuft
Interessant anzusehen, aber man muss immer herumrechnen, wenn man Texte hinzufüegt oder entfernt. Im Eckenrechnen war ich damals der König! Wie der König auf dem Schlachtfeld, war ich immer der Letzte
HTML
Code: Select all
<p><span class="modal-content_lemmy">Was wird hier gemacht?</span></p>
<p>Wenn man mit dem Curser auf den Tickertext geht, dann pausiert er...</p>
<div class="vwrap">
<div class="vmove">
<div id="1" class="vitem">500 g Rinderhack</div>
<div class="vitem">6 EL Distelöl</div>
<div class="vitem">1 Gemüsezwiebel oder 2 Zwiebeln</div>
<div class="vitem">1 - 2 Knoblauchzehen</div>
<div class="vitem">1 Ei</div>
<div class="vitem">1 altbackenes Brötchen</div>
<div class="vitem">100 ml Milch</div>
<div class="vitem">100 ml Wasser</div>
<div class="vitem">Thymian und Oregano</div>
<div class="vitem">Paprikapulver</div>
<div class="vitem">Salz und Pfeffer</div>
</div>
</div>
CSS
Code: Select all
.modal-content_lemmy {
margin: auto;
padding: 6px; /* DOR: fuer Motoerhead-Bild angepasst */
/*margin-top: 45px; DOR: hinzugefuegt */
/*margin-top: 100px; DOR: geaendert -passt besser - ueberfluessig - wird in '.modal padding-top:' abgefruehstueckt -> bei aenderung auch '.close' anpassen */
display: block;
/*width: 80%;*/
/*width: 85%; DOR: breiter - funzt nicht*/
/*max-width: 600px;*/
max-width: 600px; /* DOR: breiter, aber so, dass sich bei meiner Bildschirmaufloesung in Firefox rechts keinen Scrollbalken fuer das Bild aufbaut - fuer Motoerhead-Bild angepasst */
background: rgba( 247, 245, 239, .6); /* DOR: hinzugefuegt - und dem jeed */
/*border: 8px solid rgba(154, 205, 50, .65); DOR: hinzugefuegt */
/*border: 4px solid rgba(154, 205, 50, .8); DOR: hinzugefuegt */
border: 4px solid rgba(153,51,0, 1); /* DOR: hinzugefuegt #930 */
/*border-radius: 10px; DOR: hinzugefuegt */
border-radius: 0 28px 28px 0; /* DOR: hinzugefuegt */
box-shadow: 3px 3px 3px 3px rgba(68,68,68, .7); /* DOR: alt #4a4a4a 74,74,74 -> #444 ist dunkler - hinzugefuegt - bisschen mehr opacity */
/*box-shadow: 0px 0px 5px 2px rgba(68,68,68, 1); DOR: alt #4a4a4a 74,74,74 -> #444 ist dunkler - hinzugefuegt , drumherum schatten -> doof */
}
/* https://code-boxx.com/html-css-news-ticker-horizontal-vertical */
/* (A) STANDARD ROW HEIGHT */
.vwrap, .vitem {
height: 30px;
line-height: 30px;
border: 2px rgba(153,51,0,.8); /*funzt hier nicht! */
}
/* (B) FIXED WRAPPER */
.vwrap {
overflow: hidden; /* HIDE SCROLL BAR */
/* display: block;
background: transparent;*/
background: rgba(230,230,230,.5); /* hinzugefuegt */
border: 1px solid rgba(153,51,0,.8); /* hinzugefuegt */
border-radius: 0 18px 18px 0;/* hinzugefuegt */
box-shadow: inset 0px 0px 3px rgba(153, 51, 0, 1);/* hinzugefuegt */
padding: 0px 0 0 25px; /* hinzugefuegt, Schriftabstand unten wird ueber '@keyframes tickerv' geregelt */
}
/* (C) TICKER ITEMS */
.vitem { text-align: left; font-family: SpecialElite, EagleLake, LeagueSpartan, RobotoCondensed, arial, sans-serif; font-size:18px; font-weight: 300; color: rgba(51,51,51, 1) /* #333 */;} /* andere schrift als erstes gesetzt, schriftgroesse von 20 auf 18 geaendert */
/* (D) ANIMATION - MOVE ITEMS FROM TOP TO BOTTOM */
/* CHANGE KEYFRAMES IF YOU ADD/REMOVE ITEMS */
.vmove { position: relative; }
/*@keyframes tickerv {
0% { bottom: 0; } FIRST ITEM */
/*30% { bottom: 30px; } SECOND ITEM */
/*60% { bottom: 60px; } THIRD ITEM */
/*90% { bottom: 90px; } FORTH ITEM */
/*100% { bottom: 0; } BACK TO FIRST
}*/
/*@keyframes tickerv { DOR: Geht. Auch mit 10 Eintraegen. Ist aber nicht gut oder auch Kacke ;-)
0% { bottom: 0; } FIRST ITEM */
/* 5% { bottom: 30px; } SECOND ITEM */
/* 10% { bottom: 60px; } THIRD ITEM */
/* 15% { bottom: 90px; } FORTH ITEM */
/* 20% { bottom: 120px; } FORTH ITEM */
/* 25% { bottom: 150px; } FIFTH ITEM */
/* 30% { bottom: 180px; } SIXTH ITEM */
/* 35% { bottom: 210px; } SEVENTH ITEM */
/* 40% { bottom: 240px; } EIGHTH ITEM */
/* 45% { bottom: 270px; } NINETH ITEM */
/* 50% { bottom: 300px; } TENTH ITEM */
/* 55% { bottom: 330px; } ELEVENTH ITEM */
/* 60% { bottom: 360px; } TWELFTH ITEM */
/* 65% { bottom: 390px; } THIRTEENTH ITEM */
/* 70% { bottom: 420px; } FORTEENTH ITEM */
/* 75% { bottom: 450px; } FIFTEENTH ITEM */
/* 80% { bottom: 480px; } SIXTEENTH ITEM */
/* 85% { bottom: 510px; } SEVENTEENTH ITEM */
/* 90% { bottom: 540px; } EIGHTEENTH ITEM */
/* 95% { bottom: 570px; } NINETEENTH ITEM */
/* 100% { bottom: 0; } BACK TO FIRST
}*/
/* Alt: Schrift: LeagueSpartan, Schrifrgroesse: 20px */
/* @keyframes tickerv { */
/* 0% { bottom: 0; } FIRST ITEM */
/* 10% { bottom: 30px; } SECOND ITEM */
/* 20% { bottom: 60px; } THIRD ITEM */
/* 30% { bottom: 90px; } FORTH ITEM */
/* 40% { bottom: 120px; } FORTH ITEM */
/* 50% { bottom: 150px; } FIFTH ITEM */
/* 60% { bottom: 180px; } SIXTH ITEM */
/* 70% { bottom: 210px; } SEVENTH ITEM */
/* 80% { bottom: 240px; } EIGHTH ITEM */
/* 90% { bottom: 270px; } NINETH ITEM */
/* 100% { bottom: 0; } BACK TO FIRST
}*/
/* Bei Aenderug der Schriftart und Schriftgroesse muss 'bottom:' ggf. angepasst werden!
Neu: Schrift: SpecialElite, Schrifrgroesse: 18px */
@keyframes tickerv {
0% { bottom: -2px; } /* FIRST ITEM */
10% { bottom: 28px; } /* SECOND ITEM */
20% { bottom: 58px; } /* THIRD ITEM */
30% { bottom: 88px; } /* FORTH ITEM */
40% { bottom: 118px; } /* FORTH ITEM */
50% { bottom: 148px; } /* FIFTH ITEM */
60% { bottom: 178px; } /* SIXTH ITEM */
70% { bottom: 208px; } /* SEVENTH ITEM */
80% { bottom: 238px; } /* EIGHTH ITEM */
90% { bottom: 268px; } /* NINETH ITEM */
100% { bottom: 0; } /* BACK TO FIRST */
}
.vmove {
animation-name: tickerv;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1, 0, .5, 0);
}
.vmove:hover { animation-play-state: paused; }
Beide live und in Farbe auf
http://dorilaraukft.bplaced.net/sites/C ... Testarossa unter '
Alter HaC Ticker (alle Möglichen Effekte)' und '
Zutatenliste als vertikaler Ticker mit CSS' zu sehen.
Das mit dem
<Marquis de Sade> ist mir klar. Mich wundert, dass dieses Tag noch verfügbar ist. Aber der wartet immer darauf, das der Tickertext wieder von vorne beginnt.
Dann doch lieber Häkchen sammeln
Danke für die Tickerinfo/Tickerdemo...
Gruß
Gonzo
