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

[talk-pla.net]

Hallo,

gibt es einen Mod, der den Usern ermöglicht, sich individuell z.B. einen Ticker (oder vereinfacht zumindest einen Countdown) zu erstellen und diesen dann in der Signatur einzubauen?
Habe natürlich schon die SuFu bemüht, aber nix passendes gefunden...

Danke schon mal!

[Värmländer]

Hej!

Hab selber ewig danach gesucht, aber nix gefunden. Darum habe ich einen einfachen Ticker (Anzahl der Tage bis zu einem bestimmten Datum) als BBCode eingebaut.

BBCode-Benutzung:

Code: Alles auswählen

[ticker]{NUMBER1}.{TEXT} {NUMBER2}[/ticker]

HTML-Ersetzung:

Code: Alles auswählen

<script>
var eventdate = new Date("{TEXT} {NUMBER1}, {NUMBER2} 23:59:59 GMT");
d=new Date();
count=Math.floor((eventdate.getTime()-d.getTime())/1000);
count=Math.floor(count/(60*60*24));
document.write(count);
</script>

Tipp-Anzeige:

Code: Alles auswählen

Anzahl der Tage bis zum genannten Datum: [ticker]TT.Monat JJJJ[/ticker] Tag und Jahr nummerisch, Monat in Englisch

Beim Verfassen eines Beitrags anzeigen: Ja

LG
Andreas

[talk-pla.net]

Hi,

danke für die Antwort, hab ich jetzt erst gesehen
Als Countdown bis zu einem bestimmten Datum ist das ´ne super Sache, danke!
Suche aber das ganze auch noch andersherum (z.B. XXX seit 3 Monaten, 5 Tagen usw.), vielleicht hat da noch jemand eine Idee?

[Chalong]

Wenn man ein zurückliegendes Datum eingibt, wird der Anzahl der Tage ein Minuszeichen vorangestellt.
Vielleicht ist das ausreichend.

[Huchinotte]

Hi .........,

hab dazu auch mal ne Frage. Der Ticker ist an sich ne gute Idee. Ich würde das gerne aber so darstellen. Das man bis zu einem bestimmten Datum und der dazugehörigen Uhrzeit dann als Ticker in Stunden und Sekunden darstellt.
Also im Prinzip so:

Code: Alles auswählen

[ticker]TT.Monat JJJJ / Uhrzeit[/ticker]

und die Darstellung dann so:

Code: Alles auswählen

08 St., 15 Min., 10 Sek.

Wie ein richtiger Countdown halt.

Gruß Huch

[sepp71]

Hallo zusammen,

in meinem Forum ist dieses Thema auch aktuell, deshalb grabe ich diesen alten Thread aus, ohne die Umrechnungsformeln für die letzte Frage auszuprobieren.
Momentan haben viele meiner User einen Ticker eines bekannten Anbieters - aber weil dessen Server nur langsam liefern, bauen sich meinen Seiten langsamer auf. Das nervt - vor allem, weil man die Ursache natürlich zunächst im Forum vermutet.

Ich experimentiere sehr laienhaft auf der Basis des o.a. Vorschlags mit Javascript. Immerhin aber schon mit Grafiken (Hintergrund, Vordergrund, Position je nach Fortschritt). Ist aber noch absolut in den Kinderschuhen. Falls jemand etwas besseres hätte, würde ich mich sehr freuen...

Gruß
Sepp

[Dr.Death]

Die Lösung dazu sieht so aus:

HTML Replacement:

Code: Alles auswählen

<script>

function toSt(n)
{
    s=''
    if(n<10) s+='0'
    return s+n.toString();
}

var eventdate = new Date("{TEXT} {NUMBER1}, {NUMBER2} 23:59:59 GMT");

d=new Date();
count=Math.floor((eventdate.getTime()-d.getTime())/1000);
secs_count = toSt(count%60);
    
count=Math.floor(count/60);
mins_count = toSt(count%60);

count=Math.floor(count/60);
hours_count = toSt(count%24);

count=Math.floor(count/24);
days_count = count;
        
        
document.write(days_count);
document.write(' Tage und ');
document.write(hours_count);
document.write(':');
document.write(mins_count);
document.write(':');
document.write(secs_count);
document.write(' Stunden');
</script>

Demo Signatur:

Code: Alles auswählen

Noch [countdown]13.September 2009[/countdown]  bis zum nächsten Formel 1 Rennen !

[Dr.Death]

Kleine Korrektur, nun auch mit Stunden/Minuten/Sekunden Angaben:

BBCode Benutzung:

Code: Alles auswählen

[countdown]{NUMBER1}.{TEXT1} {NUMBER2} {NUMBER3}:{NUMBER4}:{NUMBER5}[/countdown]

HTML Ersatz:

Code: Alles auswählen

<script>

function toSt(n)
{
    s=''
    if(n<10) s+='0'
    return s+n.toString();
}

var eventdate = new Date("{TEXT1} {NUMBER1}, {NUMBER2} {NUMBER3}:{NUMBER4}:{NUMBER5} UTC+2");

d=new Date();
count=Math.floor((eventdate.getTime()-d.getTime())/1000);
secs_count = toSt(count%60);
    
count=Math.floor(count/60);
mins_count = toSt(count%60);

count=Math.floor(count/60);
hours_count = toSt(count%24);

count=Math.floor(count/24);
days_count = count;
        
        
document.write(days_count);
document.write(' Tage und ');
document.write(hours_count);
document.write(':');
document.write(mins_count);
document.write(':');
document.write(secs_count);
document.write(' Stunden');
</script>

Ggf. müsst Ihr im HTML Ersatz Code noch Eure Zeitzone ( UTC+2 ) anpassen.

Tipp Anzeige:

Anzahl der Tage bis zum genannten Datum/Uhrzeit: [countdown]TT.Monat JJJJ HH:MM:SS[/countdown] Tag und Jahr nummerisch, Monat in Englisch

Beispiel (Signatur):
Noch [countdown]27.September 2009 14:00:00[/countdown] bis zum nächsten Formel 1 Rennen !

Demo:
http://www.lpi-clan.de/viewtopic.php?f=27&t=2841 ( Dort runter bis zu Signatur scrollen )

[sepp71]

Coden im Wettstreit mit Dr. Death - das kann nichts werden, ist mir schon klar. Aber weil meine Version zwar nicht quick, aber ziemlich dirty ist, stelle ich sie hier mal zur Diskussion in der Hoffnung, das jemand etwas besseres daraus machen kann

Sie stellt das Ganze auf einem Fortschrittsbalken dar und benötigt dazu eine Grafik als Hintergrund (z. B. eine Linie) und eine weitere als Zeiger (z. B. einen Pfeil). Meine Grafiken sind 40x20 bzw. 20x20 px groß. Bei mir sind sie als a_linie.gif und a_zeiger.gif benannt, so dass man auch weitere Kombinationen anbieten kann (b_... usw.).
Der Abstand vom linken Rand wächst, je näher man dem Ziel rückt, und zwar proportional zum angegebenen Gesamtzeitraum. Berücksichtigt werden aber nur ganze Tage.
An Anfang und Ende des Zeitraums ist der Code noch buggy und produziert nicht unbedingt logische Ergebnisse.
Probleme derzeit:

• Die Anzeige überlappt sich mit dem eigentlichen Beitragstext, der Signatur oder sogar nachfolgenden Texten. Deshalb steht momentan ganz unten noch der leere HTML-Absatz, der das irgendwie auffangen soll.
• Das Datum hat bei mir in der herkömmlichen deutschen Form (24.12.2009) funktioniert - ich bin aber nicht sicher, ob das überall zutrifft. Die englischen Monate waren mir zu tippfehlerträchtig.
• Sicherheitsrisiken wegen des verwendeten {Text}??

Ich freue mich über Verbesserungsvorschläge!

Sepp

BBCode:

Code: Alles auswählen

[ticker]{NUMBER1}.{NUMBER2}.{NUMBER3};{NUMBER4}.{NUMBER5}.{NUMBER6};{SIMPLETEXT1};{TEXT1}[/ticker]

HTML-Ersetzung
(Achtung: Du mußt an insgesamt zwei Stellen das example.com durch die absolute URL für Deine Grundlinie und den Zeiger einsetzen!):

Code: Alles auswählen

<script>
var startdate = new Date("{NUMBER2} {NUMBER1}, {NUMBER3} UTC+2");
var eventdate = new Date("{NUMBER5} {NUMBER4}, {NUMBER6} 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 style='margin-left:0px;width:400px;background-image:url(http://example.com/{SIMPLETEXT1}_linie.gif);background-repeat:repeat-x;position:absolute;z-index:1;'><img src='http://example.com/{SIMPLETEXT1}_zeiger.gif' style='position:absolute;padding-left:"+prozent*4+"px;z-index:2'>");
document.write("<br>Noch "+count+" Tage bis "+ereignis+".<br></div>");
</script>
<p>&nbsp;</p>

Tipp-Anzeige:

Code: Alles auswählen

Anzahl der Tage vom ersten bis zum zweiten Datum: [countdown]TT.MM.JJJJ; TT.MM.JJJJ;a;Ereignis[/countdown] Tag, Monat und Jahr numerisch, Buchstabe des gewählten Layouts

[sepp71]

...und so sieht das zum Beispiel aus:

[ externes Bild ]

Ist bei meinen Usern sehr gut angekommen, da sie aufgrund des Zwecks des Boards (Selbstmotivation) alle bestimmte feste Ziele haben.

Inzwischen benutze ich PNG-Grafiken, auch wenn angeblich nicht alle Browser das mögen.

Die Tages-Skala am unteren Rand, je nach Länge des Zeitraums habe ich inzwischen auch hinbekommen. Und ich habe bemerkt, dass mein Code wegen eines Fehlers bei der Datumsangabe nur im FF, nicht aber im IE funktionierte. Ist inzwischen behoben.
Noch zu tun:
Die Absatzformatierung läuft weiterhin nur mit einem Workaround, die richtige Höhe der Box wird irgendwie nicht erkannt. Obwohl ich sie zwischenzeitlich schon über CSS aus den Styles formatiere.

Gruß
Sepp

Edit 04.10.2009 - Stand nach einigen Änderungen aktualisiert. passt jetzt wieder zur gezeigten Grafik.