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

[sepp71]

Sorry, fehlte in meiner Anleitung, im obigen Beitrag hab ich's ergänzt: es geht z.B. in die common.css, irgendwo am Ende in eigene Zeilen.

Viel Erfolg!
Sepp

[darkonia]

hab es am ende der common.css

es sieht nun so aus:

[ externes Bild ]

meine css so:

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;
}

[Dr.Death]

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

• [ externes Bild ]
• [ externes Bild ]

Vielen Dank für die Bastel Bilder !!!

[klausm]

Hallo 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

habe es noch mal getestet und es lag 30cm vorm Monitor.
Es lag am falsch abgekürzten "Mar". Danke für deinen Hinweis und auch für die neuen Bilder.

[sepp71]

Wenn man's dann irgendwann 'raus hat mit den Grafiken, wird es einfacher, unendliche Weiten zu erobern - siehe neue Grafiken unter c.)

Die vollständige Anleitung mit Behebung der bisher bekannten Bugs sieht deshalb jetzt 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: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><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.
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

[talk-pla.net]

Wow, was aus meinem Thema hier noch geworden ist, ich bin begeistert, vielen Dank Sepp!

Ist es auch möglich, sowas auf einer Extra-Seite aufzubauen, sodass den Usern am Ende der passende BB-Code angezeigt wird? Ich stelle mir das in etwa so vor: http://diaet.abnehmen-forum.com/ticker2/

Liebe Grüße

[sepp71]

Hm, die verlinkte Seite ist nur für eingeloggte User sichtbar.
Ich nehme an, Du meinst eine Hilfe bei der BBCode-Erstellung.
Ich habe dazu keine eigene Seite o.ä., weil meine php-Kenntnisse dafür nicht ausreichen. Es gibt lediglich eine ausführliche Anleitung in einem eigenen Thema meines Forums mit diversen Beispielen.
Dank des Code-Attributs kann man den BBCode ja recht gut darstellen. Bei meinen Usern kommt das gut an und nach kurzer Eingewöhnung haben es auch alle Interessenten hinbekommen.
Also erstmal den Ticker in das Thema setzen (funktioniert hier natürlich nicht, weil dieser BBCode auf phpbb nicht installiert ist)

Code: Alles auswählen

[ticker]02. Oct 2009;02. Dec 2010;a;zum zweiten Dezember.[/ticker]

und direkt darunter den Code für das konkrete Beispiel

Code: Alles auswählen

[code][ticker]02. Oct 2009;02. Dec 2010;a;zum zweiten Dezember.[/ticker]

[/code]

Einzugeben ist dabei zuerst das Start-, dann das Zieldatum - und damit es nicht zu einfach wird: Bitte mit der englischen dreibuchstabigen Abkürzung für den Monatsnamen. (Jan, Feb, Mar, ... Dec )
Dann folgt Buchstabe des gewählten Bildes (siehe unten, z. Zt. a - ...) und anschließend das frei formulierte Ende für den Satz "Noch ... Tage bis"
Das Satzzeichen am Ende kann frei gewählt werden.
Alle Angaben sind jeweils durch Semikolon nach dem oben sichtbaren Muster voneinander zu trennen. Logischerweise darf deshalb in dem Freitext am Ende kein Semikolon benutzt werden.

Gruß
Sepp

[modernist]

Ich habe das mal etwas abgewandelt und die Tage in einer Liste dargestellt, damit entfällt auch die Notwendigkeit der absoluten Positionierung, das hat den Vorteil, daß z.B. bei der Verwendung im normalen Postingtext der Ticker auf der Antwortseite in der Ansicht der bisherigen Beiträge nicht klebenbleibt.
Das Hintergrundbild habe ich auf 480px erweitert mit jeweils Platz am linken und rechten Rand, damit der Zeiger nicht die dort gezeigten Abbildungen überdeckt. Und valide ist das dann auch mit dem eingebundenen JavaScript. Ich habe jetzt aber nur einen Ticker, weswegen ich auf den Buchstaben für den Identifier verzichtet habe.

BBCode-Benutzung:

Code: Alles auswählen

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

HTML-Ersetzung:

Code: Alles auswählen

<script type="text/javascript">
// <![CDATA[
    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="{INTTEXT1}";
    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'><img src='http://forum.tld/styles/stylename/theme/images/zeiger.png' style='padding-left:"+prozent*3.6+"px;z-index:2' alt='zeiger' />");
    if (gesamt>=4) {
    ateil=Math.ceil(gesamt*0.75);
    bteil=Math.ceil(gesamt*0.5);
    cteil=Math.ceil(gesamt*0.25);
    document.write("<div style='margin-left: -36px'><ul class='tschrift'><li class='tschrift-left'>"+gesamt+"</li><li class='tschrift-left'>"+ateil+"</li><li class='tschrift-left'>"+bteil+"</li><li class='tschrift-left'>"+cteil+"</li><li class='tschrift-left'>0</li></ul></div>");
    }
    document.write("<div class='tickerereig'>Noch "+count+" Tage bis "+ereignis+"</div></div>");
// ]]>
</script>
<div class="tickerheight"><hr /></div>

Tipp-Anzeige:

Code: Alles auswählen

[ticker]01. Jan 2007;02. Feb 2009;Ereignis[/ticker] Englische Monatsabkürzungen!

Das CSS dazu in der common.css:

Code: Alles auswählen

/* fuer den BBCode-Ticker */
.ticker {margin:8px 0 0 0; padding-left: 40px; width:480px; font-size:10px; background-image:url({T_THEME_PATH}/images/ticker.png);background-repeat:no-repeat; z-index:1;}
.tickerheight {margin-top: 10px;}
.tschrift {list-style:none; margin: 0; padding: 0 0 0 14px; overflow:hidden; width: 500px;}
.tschrift-left {margin: 0; padding: 0 62px 0 0; width: 30px; list-style:none; float: left; font-size: 10px; text-align: left;}
.tickerereig {margin: -4px 0 0 0;}

Bei mir funktioniert's im Firefox und Opera prima.

[sepp71]

Gab es mit der Positionierung nach meinem Ansatz Probleme? Ich benutze den auch, z.B. in der Beispielliste in längeren Threads außerhalb der Signatur und hatte damit nie Schwierigkeiten.
Wie werden die Tage in der ul-Liste denn dann angezeigt? Einfach untereinander? also z.B.

• 100
• 75
• 50
• 0

Dann könnte man sie ja eigentlich auch gleich weglassen, in meiner Version ergeben sie eine - wenn auch etwas ungerade - Skala.
Wie gesagt: Zu "meiner" tw. absoluten Positionierung habe ich bislang keine nachteiligen Meldungen gehört.

Gruß
Sepp

[modernist]

Die Zahlen stehen in einer Reihe, wie man hier z.B. sehen kann: forumhiv.de/viewtopic.php?f=15&t=2003

Mir ist auch nur der eine Nachteil der absoluten Positionierung aufgefallen, als ich den Ticker als Beispiel in einen Beitrag einband und dann darauf antwortete. Auf der posting.php?mode=reply ist der Ticker dann im Fenster der letzten Beiträge bei mir im Firefox an einer Stelle gewesen, wo er nicht hingehörte. Da hatte ich dann mal etwas rumgespielt, ob's nicht auch ohne absolute Positionierung geht.