Countdown/Ticker für jeden User i.d. Signatur

[sepp71]

Schick sieht das bei Dir aus, auch mit der Grafik!
O.k., und das mit dem Bug stimmt auch... War mir noch nicht aufgefallen. Vielen Dank für den Hinweis!

Sepp

[modernist]

Vielen Dank für den Hinweis!

Ich habe zu danken für Idee und Umsetzung des Tickers!

[dagobert50gold]

Oh, da googlet man und kommt freundlicherweise hier auf phpBB.de!

Doc. benutzt ja die F1-Grafik.
Wie geht das denn, dass dich die Zeit nach dem Rennen wieder zurücksetzt?
Geht das automatisch oder muss ich das manuell machen? Danke!

[sepp71]

Hab's jetzt nicht im Einzelnen ausprobiert, aber der Gag liegt in der HTML-Ersetzung hier:

Code: Alles auswählen

if (count <= 0) {
prozent=100;
  }

Wenn der Countdown kleiner 0 ist, setze die erreichten Prozent auf 100. Also:

Code: Alles auswählen

if (count <= 0) {
prozent=0;
  }

Und falls das 'nen Fehler gibt, prozent=0.01.

Gruß
Sepp

[pebble]

Hallo,

erstmal vielen lieben Dank für den Ticker, danach habe ich immer schon gesucht.
Selbst bekomme ich nämlich derzeit noch keinen BBCode auf die Reihe...

Bildchen und Zeiger dazu habe ich mir selbst gebastelt...

[sepp71]

Bildchen und Zeiger dazu habe ich mir selbst gebastelt...

Und was für eine lustige Kombination
Gruß Sepp

[pebble]

Danke.

Im Moment habe ich 12 Ticker zur Auswahl.
Wenn ihr irgendeinen davon haben möchtet dann gebt mir Bescheid.

Ich könnte euch auch einen passenden basteln...

[sepp71]

Die vollständige Anleitung mit Behebung der bisher bekannten Bugs sieht jetzt (November 2011) so aus:

BBCode-Benutzung:

Code: Alles auswählen

[ticker]{NUMBER1}.{SIMPLETEXT1} {NUMBER2};{NUMBER3}.{SIMPLETEXT2} {NUMBER4};{IDENTIFIER};{TEXT1}[/ticker]

HTML-Ersetzung:
Achtung: Bitte die beiden Vorkommen von http://example.com durch den absoluten Pfad zu Deinen eigenen Grafikdateien ersetzen!

Code: Alles auswählen

<script>
var startdate = new Date("{SIMPLETEXT1} {NUMBER1}, {NUMBER2} 23:59:59 UTC+2");
var eventdate = new Date("{SIMPLETEXT2} {NUMBER3}, {NUMBER4} 23:59:59 UTC+2");
var ereignis="{TEXT1}";
d=new Date();
count=Math.floor((eventdate.getTime()-d.getTime())/1000);
count=Math.floor(count/(60*60*24));
gesamt=Math.floor((eventdate.getTime()-startdate.getTime())/1000);
gesamt=Math.floor(gesamt/(60*60*24));
prozent=Math.floor(100-(count/gesamt*100));
if (count <= 0) {
prozent=100;
  }
document.write("<div class='ticker' style='margin-left:0px;width:400px;height:80px;background-image:url(http://example.com/{IDENTIFIER}_linie.png);background-repeat:no-repeat;position:absolute;z-index:1;overflow:hidden;'><img src='http://example.com/{IDENTIFIER}_zeiger.png' style='position:absolute;padding-left:"+prozent*3.6+"px;z-index:2'>");
if (gesamt>=4) {
ateil=Math.ceil(gesamt*0.75);
bteil=Math.ceil(gesamt*0.5);
cteil=Math.ceil(gesamt*0.25);
document.write("<div class='tschrift' style='margin-left:0px;'>"+gesamt+"</div><div class='tschrift' style='margin-left:90px;'>"+ateil+"</div><div class='tschrift' style='margin-left:180px;'>"+bteil+"</div><div class='tschrift' style='margin-left:270px;'>"+cteil+"</div><div class='tschrift' style='margin-left:360px;'>0</div>");
}
document.write("<div style='margin-top:60px;'>Noch "+count+" Tage bis "+ereignis+"</div></div>");
</script>
<p>&nbsp;</p><p>&nbsp;</p><br /><br />

Tipp-Anzeige:

Code: Alles auswählen

[ticker]1. Jan 2007;2. Feb 2009;a;Testereignis[/ticker] Englische Monatsabkürzungen!

Änderungen im CSS-Theme
Sicherheitshalber habe ich auch das CSS-Thema Prosilver angepasst und die Schriften festgelegt.

Code: Alles auswählen

/* fuer den BBCode-Ticker */
.ticker {font-size:10px; line-height:1.2em}
.tschrift {position:absolute;margin-top:40px;width:40px;text-align:center;}

Hochladen, Cache leeren, Style aktualisieren nicht vergessen!

Grafik-Dateien:
Der Code setzt voraus, dass Du mindestens zwei passende Grafikdateien in das Verzeichnis http://example.com/ticker/ legst.
Und zwar:
1.) Die Datei a_linie.png, 400 px breit und 40 px hoch als rein graphischen Hintergrund
2.) Die Datei a_zeiger.png 40 x 40 px als "Zeiger", pfiffigerweise transparent angelegt. Für die Gestaltung der Grafik ist zu bedenken, dass der Zeiger ganz am Schluss stehen bleibt - hier lassen sich nette Effekte erzielen, wenn die Bildgestaltung sauber eingepaßt wird.
Die Zeiger-Datei darf auch breiter sein, sie wird wegen des overflow:hidden unsichtbar nach rechts aus dem Bild geschoben. Das lässt auch Effekte mit einem zuerst abgedeckten Hintergrund zu, der erst im Laufe der Zeit sichtbar/"verändert" wird (Beispiel: [ externes Bild ])

Weitere, andere Ticker-Möglichkeiten können dann als b_linie/b_zeiger usw. hinzugefügt werden.
Die Dateien für meine Muster spendiere ich der Public Domain:

1. a_linie.png: [ externes Bild ]
2. a_zeiger.png: [ externes Bild ]
3. b_linie.png: [ externes Bild ]
4. b_zeiger.png: [ externes Bild ]
5. c_linie.png: [ externes Bild ]
6. c_zeiger.png: [ externes Bild ]

Du kannst sie Dir gern herunterladen und weiterbenutzen - aber bitte nicht direkt auf meine Quelle verlinken, sie ist nicht
dauerhaft!

Und so sieht das dann fertig aus:
[ externes Bild ]

Viel Spaß!

Sepp[/quote]

[Maggan22]

sorry falsches thema