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

[Würzi]

Absolut cool, was man mit bbcodes alles machen kann.

[sepp71]

So, ich habe noch ein paar Kleinigkeiten geändert, der aktuelle Stand ist nun:
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 den beiden Grafikdateien ersetzen!

Code: Alles auswählen

<script>
var startdate = new Date("{SIMPLETEXT1} {NUMBER1}, {NUMBER2} UTC+2");
var eventdate = new Date("{SIMPLETEXT2} {NUMBER3}, {NUMBER4} 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:440px;height:80px;background-image:url(http://example.com/ticker/{IDENTIFIER}_linie.png);background-repeat:no-repeat;position:absolute;z-index:1;'><img src='http://example.com/ticker/{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>

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.
Weitere, andere Ticker-Möglichkeiten können dann als b_linie/b_zeiger usw. hinzugefügt werden.

To do:
Noch nicht im Griff habe ich die Höhe dieser div-Box. Wenn sie in der Signatur verwendet wird und anschließend noch Textzeilen folgen, kann es zu unschönen Überlagerungen kommen. Wer hier einen Tipp hat...

Viel Spaß!

Sepp

[sepp71]

Kleiner Fehler bei den Datumsangaben in der HTML-Ersetzung, jetzt auch behoben. Ich würd' ja gern den vorherigen Beitrag einfach nur bearbeiten, aber das ist hier leider verboten. Darum alles nochmal, aber ohne diesen Fehler:

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:440px;height:80px;background-image:url(http://example.com/ticker/{IDENTIFIER}_linie.png);background-repeat:no-repeat;position:absolute;z-index:1;'><img src='http://example.com/ticker/{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>

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.
Weitere, andere Ticker-Möglichkeiten können dann als b_linie/b_zeiger usw. hinzugefügt werden.
Die Dateien für mein Muster spendiere ich hiermit der Public Domain:

1. a_linie.png: [ externes Bild ]
2. a_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 ]

To do:
Weiterhin nicht im Griff habe ich die Höhe der div-Box. Insbesondere wenn sie in der Signatur verwendet wird und anschließend noch Textzeilen folgen, kann es zu unschönen Überlagerungen kommen. Wer hier einen Tipp hat...

Ansonsten betrachte ich diese Baustelle als abgeschlossen - in meinem Forum läuft das alles und erfreut sich großer Beliebtheit.

Viel Spaß!

Sepp

[Dr.Death]

Klasse, funktioniert wunderbar.

Ich hab einfach unter den Ticker eine Zeile mit " ------------------- " gesetzt oder einem anderen Abschluss.

[archivar]

Vielen Dank für den Ticker.

To do:
Weiterhin nicht im Griff habe ich die Höhe der div-Box. Insbesondere wenn sie in der Signatur verwendet wird und anschließend noch Textzeilen folgen, kann es zu unschönen Überlagerungen kommen. Wer hier einen Tipp hat...

Ich habe am Ende der html-Ersetzung das hier noch eingefügt:

Code: Alles auswählen

<br />
<br />

Somit geht es auch unter subsilver2 ohne einen anderen Abschluss.

[klausm]

Hallo,

hab mal Testweise diesen BBCode getestet.

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:440px;height:80px;background-image:url(http://example.com/ticker/{IDENTIFIER}_linie.png);background-repeat:no-repeat;position:absolute;z-index:1;'><img src='http://example.com/ticker/{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> </p><p> </p>

Tipp-Anzeige:

Code: Alles auswählen

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

Nun - die Grafik wird angezeigt aber ohne die Tageszahlen und als Text schreibt er mir darunter: "Noch NaN Tage bis Testergebnis"

Weshalb bekomme ich jetzt nicht eine Zahl sondern "NaN" angezeigt?

Könnte dies eventuell mit Board-Einstellungen zusammen hängen?

[sepp71]

@klausm:
Sorry, hatte diesen Thread aus den Augen verloren. Wenn Du gegenüber meinem Vorschlag nichts verändert hast (habe das jetzt nicht abgeglichen), sollte es funktionieren.

NaN heißt Not a number, das bedeutet, dass bei der Rechenoperation in Javascript keine Zahl herausgekommen ist. Das kann eigentlich nicht am Board liegen. Meistens liegt es daran, dass man eines der Kalenderdaten nicht im richtigen Format eingegeben hat (englische Monatsabkürzung falsch geschrieben, Semikolon vergessen o.ä.
Probiere doch mal

Code: Alles auswählen

[ticker]15. Mar 2010;21. Jun 2010;a;Testereignis[/ticker]

@archivar:
Danke für die zwei <br />!

Gruß
Sepp

[darkonia]

habe scheinbar ein fehler gemacht, denn es sieht bei mir so aus:
[ externes Bild ]


habe sicherlich die css irgendwo falsch reingemacht, wo muss die in prosilver rein?

[sepp71]

Ich probiere das nur mit prosilver - und dafür ist auch die Änderung im CSS-Theme /prosilver/theme/common.css nötig. Hochladen, Styles (Theme) aktualisieren, sicherheitshalber den Cache löschen, dann müßte es gehen.
Die Anleitung ist in meinem Beitrag vollständig. klausm hat bei seinem Zitat ein paar wichtige Zeilen weggelassen!

Gruß
Sepp

P.S.: Für fleißige Bastler noch ein neues Bildchen an die Public Domain:

• [ externes Bild ]
• [ externes Bild ]

P.P.S.: Korrekte Dateibezeichnung ergänzt.

[darkonia]

ich habe versch. css.

wie common
button
etc.