Ich habe mal hier ein Script versucht zu basteln und es funktioniert.
Leider ist es nicht für das Xobor - Forum angepasst, da man einiges an den CSS Tags ändern muss und ich gebe es wirklich zu ich raffe das nicht, manches bekomme ich hin, manches nicht.
Manchmal muss man es auch komplett neu schreiben oder neu als Plugin schreiben. Wie gesagt, das ist alles noch Neuland für mich. Ich habe es schon versucht, aber ich schieße damit mein Forum ab und bei meinen Testforen kann ich es nicht testen, da ich dafür extra noch die Premium Tarife kaufen müsste, das würde mein Budget sprengen.
Hier mal der Code. Ich habe alles zusammengefügt, also CSS, HTML und Javascript.
// Reihe von benutzerdefinierten Einstellungen var settings = { 'date': null, 'format': null };
// hängen Sie das Einstellungsarray an Optionen an if (options) { $.extend(settings, options); }
//Erstellen Sie die Countdown-Verarbeitungsfunktion function countdown_proc() { var eventDate = Date.parse(settings.date) / 1000; var currentDate = Math.floor($.now() / 1000);
if (eventDate <= currentDate) { callback.call(this); clearInterval(interval); }
var seconds = eventDate - currentDate;
var days = Math.floor(seconds / (60 * 60 * 24)); //Berechne die Anzahl der Tage
seconds -= days * 60 * 60 * 24; //Aktualisieren Sie die Sekundenvariable mit der Anzahl der entfernten Tage
var hours = Math.floor(seconds / (60 * 60)); seconds -= hours * 60 * 60; //Aktualisieren Sie die Sekundenvariable mit der Anzahl der entfernten Stunden
var minutes = Math.floor(seconds / 60); seconds -= minutes * 60; //Aktualisieren Sie die Sekundenvariable mit der Anzahl der entfernten Minuten
//Bedingte Aussagen if (days == 1) {thisEl.find(".timeRefDays").text("Tag");} else {thisEl.find(".timeRefDays").text("Tage");} if (hours == 1) {thisEl.find(".timeRefHours").text("Stunde");} else {thisEl.find(".timeRefHours").text("Stunden");} if (minutes == 1) {thisEl.find(".timeRefMinutes").text("Minute");} else {thisEl.find(".timeRefMinutes").text("Minuten");} if (seconds == 1) {thisEl.find(".timeRefSeconds").text("Sekunde");} else {thisEl.find(".timeRefSeconds").text("Sekunden");}
//Logik für die Einstellung two_digits ON if (settings.format == "on") { days = String(days).length >= 2 ? days : "0" + days; hours = String(hours).length >= 2 ? hours : "0" + hours; minutes = String(minutes).length >= 2 ? minutes : "0" + minutes; seconds = String(seconds).length >= 2 ? seconds : "0" + seconds; }
//Aktualisieren Sie die HTML-Werte des Countdowns. thisEl.find(".days").text(days); thisEl.find(".hours").text(hours); thisEl.find(".minutes").text(minutes); thisEl.find(".seconds").text(seconds); }
//Führen Sie die Funktion aus countdown_proc();
//Schleife die Funktion interval = setInterval(countdown_proc, 1000); };
})(jQuery);
//Geben Sie die Plugin-Einstellungen an $("#countdown").countdown({ //Das Enddatum des Countdowns date: "01 january 2023 00:00:00",
// on (03:07:52) | off (3:7:52) - two_digits auf ON gesetzt behält die Layoutkonsistenz bei format: "on" },
function () { // Dies wird ausgeführt, wenn der Countdown abgelaufen ist alert("Wir wünschen ein frohes, neues und gesundes Jahr 2023!"); }); //# sourceURL=pen.js </script>
in Zeile 85 und 87 kann man die Wünsche ändern, also Text
in Zeile 172 und 180 muss das Jahr, also nur 2023 geändert werden sonst geht der Timer nicht, wenn man nicht möchte, dass der Timer läuft, einfach 2020 eingeben, dann bleibt der Timer auf 00
Ich hoffe, ich habe es soweit gut erklärt, dass man es versteht. Ich entschuldige mich für die schlechte Erklärung, wenn man es nicht sofort versteht. Ich bin im erklären nicht so gut.
Deine Inspiration ist gut angekommen! Mal wieder eine super Idee und gut zu gebrauchen! Den Countdown kann man über einen Foren-Code auch für andere Anlässe, wie Geburtstage, Treffen oder besondere Veranstaltungen einsetzen.
Aber erstmal der Neujahrs Countdown! Er soll ja überall funktionieren, in allen Templates und auch mobil! Ein guter Platz für alle Templates ist unter der Navi-Leiste, denke ich! Über ein Plugin lässt sich eine gute Lösung finden!
Was habe ich geändert?
Weil die importierte Schrift (Zeile 3) umstritten ist und auch nicht das Schriftbild groß verändert, habe ich sie weggelassen!
Damit der Countdown-Zähler in allen Template & Mobil gut angezeigt wird, musste die CSS noch angepasst werden!
Habe den Ausgabetext (Zeile 95) aus den JavaScript gezogen und unter die anderen DIV-Container gesetzt!
Habe den Div-Container mit class="container" herausgenommen! Die Class wird in verschiedenen Templates verwendet!
Ansonsten läuft das Skript Top!
×
Neujahrs Counter
Neujahrs Counter
×
Ausgabetext nach Ablauf Counter
Ausgabetext nach Ablauf Counter
Installation für alle Template und Mobil
Das komplette Skript wird am besten als PIugin in "Obere Leiste - Footer" kopiert!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, z.B. Business - Template (144) & Mobil - Template (177), Auswahl mit Mausklick oder Strg + Mausklick!
Das Skript kann zum Testen für die Template (v1-4) auch in die Kopf- oder Fußzeile kopiert werden, für das neue Xobor V6 und Mobil nach Eigenes Javascript.
In Zeile 87+91 kann der Text für die Tooltipps "Hufeisen" & "Kleeblatt" angepasst werden!
In Zeile 95 steht der Text, der nach Ablauf des Counters angezeigt wird!
In Zeile 169 steht das Enddatum. Zum Testen kann das Datum vorverlegt werden!
Möchte man die Schriftfarben für das Jahr und für den Text anpassen, geht das über Zeile 6+61
Die Hintergrundfarbe lässt sich über Zeile 7 verändern!
// Reihe von benutzerdefinierten Einstellungen var settings = { 'date': null, 'format': null };
if (options) { $.extend(settings, options); }
function countdown_proc() { var eventDate = Date.parse(settings.date) / 1000; var currentDate = Math.floor($.now() / 1000);
if (eventDate <= currentDate) { callback.call(this); clearInterval(interval); }
var seconds = eventDate - currentDate;
var days = Math.floor(seconds / (60 * 60 * 24)); //Berechnung Anzahl der Tage
seconds -= days * 60 * 60 * 24; //Aktualisieren der Sekundenvariable mit der Anzahl der entfernten Tage
var hours = Math.floor(seconds / (60 * 60)); seconds -= hours * 60 * 60; //Aktualisieren der Sekundenvariable mit der Anzahl der entfernten Stunden
var minutes = Math.floor(seconds / 60); seconds -= minutes * 60; //Aktualisieren der Sekundenvariable mit der Anzahl der entfernten Minuten
//Bedingte Aussagen if (days == 1) {thisEl.find(".timeRefDays").text("Tag");} else {thisEl.find(".timeRefDays").text("Tage");} if (hours == 1) {thisEl.find(".timeRefHours").text("Stunde");} else {thisEl.find(".timeRefHours").text("Stunden");} if (minutes == 1) {thisEl.find(".timeRefMinutes").text("Minute");} else {thisEl.find(".timeRefMinutes").text("Minuten");} if (seconds == 1) {thisEl.find(".timeRefSeconds").text("Sekunde");} else {thisEl.find(".timeRefSeconds").text("Sekunden");}
//Logik für die Einstellung two_digits ON if (settings.format == "on") { days = String(days).length >= 2 ? days : "0" + days; hours = String(hours).length >= 2 ? hours : "0" + hours; minutes = String(minutes).length >= 2 ? minutes : "0" + minutes; seconds = String(seconds).length >= 2 ? seconds : "0" + seconds; }
//Aktualisieren der HTML-Werte des Countdowns. thisEl.find(".days").text(days); thisEl.find(".hours").text(hours); thisEl.find(".minutes").text(minutes); thisEl.find(".seconds").text(seconds); }
//Funktion ausühren countdown_proc();
//Schleife für die Funktion interval = setInterval(countdown_proc, 1000); };
//Plugin-Einstellungen $("#countdown").countdown({ //Das Enddatum des Countdowns date: "01 january 2023 00:00:00", //date: "16 december 2022 20:18:00",
// on (03:07:52) | off (3:7:52) - Auf on/off gesetzt entspricht dem Layout format: "on" }, function () { $('.text_countdown').show(1); $('.sylvester').hide(1); });
ich habe das Script in mein Forum (V1) in die Kopfzeile gesetzt und es hat auf Anhieb funktioniert!
Eines schaffe ich aber nicht. Ich möchte die Farbe für die Zahl 2023 und die Farbe für den Ende-Text dem Farblayout meines Forums anpassen, aber es funktioniert nicht. Die Zahl 2023 erscheint weiterhin in Rot, der Text weiterhin in Schwarz.
Geändert habe ich die Farb-Codes (unterschiedliche Werte) in Zeile 6 und in Zeile 61.
Kannst Du mir sagen, wo die Farben für diese Texte geändert werden können?
Ich bedanke mich schon jetzt für Deine Hilfe!
Nachtrag: Ich nehme alles zurück, plötzlich sind die gewünschten Farben da!!
Ich habe mal hier ein weiteres Script versucht zu basteln und es funktioniert.
Habe es auf mein Forum angepasst. Habe es versucht in der Kopfzeile einzufügen, ob es überhaupt auf dem Xobor - Forum läuft. Es läuft zwar, aber es sind einige Funktionen am Forum nicht möglich.
Wie ich schon oft erwähnt habe, arbeite ich mit 2 verschiedenen, Software. Bei der einen funktioniert es tatenlos und ohne Probleme. Hier auf dem Xobor - Forum hat man viele Probleme, fängt schon an mit den 100 %, da muss man die Werte ändern, auch die Punkte wo x y sein sollte, muss hier in Xobor seit neustem angepasst werden.
Zudem es hier auch jetzt vermehrt Probleme mit ( z-index: 999999; ) gibt, habe ich gemerkt das der nicht mehr anerkannt oder gelesen wird.
Ich bin in den Weiten des Xobor - Forum noch ein kleines Kind. Also in den Kinderschuhen, versuche es so weit es geht irgendwie es hinzubekommen. Mit den CSS - Tags klappt es mal, mit Scripts dann wieder nicht, habe schon einige auf meinem Forum laufen.
Ich weiß und denke das, wenn man es umschreibt für ein Plugin würde es gehen und ich denke das da wieder die CSS - Tags umgeändert werden müssen. Liebe Jungs und Mädels, ich raffe das wirklich nicht, wenn ich die Tags umbenenne, meckert Xobor das die Befehle unbekannt sind, kommt eine Fehler-Meldung mit rotem Kreis und Kreuz.
So zum Script. Auf CodePen zeigt es schön in Center an, im Forum nicht, da zeigt er es links an.
function countDownDate(date_future) { const date_now = new Date(); let seconds = Math.floor((date_future - date_now) / 1000); let minutes = Math.floor(seconds / 60); let hours = Math.floor(minutes / 60); let days = Math.floor(hours / 24);
Mal wieder eine super Idee den Countdown mit einem Feuerwerk zu verbinden! Der Counter sieht Top aus, finde ich!
Der Neujahrs Countdown sollte überall funktionieren, in allen Templates und auch mobil! Ein guter Platz für alle Templates ist unter der Navi-Leiste, denke ich! Über ein Plugin lässt sich der Counter in allen Templates gut platzieren. Mit dem folgenden Skript ist auch der Einbau in Kopf- oder Fußzeile möglich! Da das Feuerwerk ständig läuft, ist ein zeitlich Begrenzung sinnvoll! Ein Start des Feuerwerk erst zum Jahreswechsel wäre auch nicht schlecht, habe ich aber nicht hinbekommen!
Was habe ich geändert?
Weil importierte Schriften (Zeile 3) umstritten sind und hier die Schrift das Schriftbild nicht groß verändert, habe ich sie gelöscht!
Damit der Countdown-Zähler in allen Template & Mobil gut angezeigt wird, musste die CSS noch angepasst werden! Habe "*", "body" und "fireworks-container:nth-of-type(2)" einfach weggelassen!
Habe für das Feuerwerk eine zeitliche Begrenzung mit 5 Sek. gewählt (Zeile 54), weil bei jedem Neustart der Seite das Feuerwerk in Aktion tritt!
Habe die zeitliche Verzögerung im Feuerwerk (Zeile 100) vergrößert, sieht besser aus!
Ansonsten läuft das Skript super!
×
Neujahrs Counter
Neujahrs Counter
Installation für alle Template und Mobil
Das komplette Skript wird am besten als PIugin in "Obere Leiste - Footer" kopiert!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, z.B. Business - Template (144) & Mobil - Template (177), Auswahl mit Mausklick oder Strg + Mausklick!
Für die Template (v1-4) läuft das Skript auch in Kopf- oder Fußzeile, für das neue Xobor V6 und Mobil in Eigenes Javascript.
In Zeile 54 wird die Laufzeit angepasst, hier 5 Sek. !
In Zeile 100 wird die zeitliche Verzögerung einer weiteren Explosion bestimmt!
In Zeile 86 ist das zusätzliche Feuerwerk-Skript eingetragen!
function countDownDate(date_future) { const date_now = new Date(); let seconds = Math.floor((date_future - date_now) / 1000); let minutes = Math.floor(seconds / 60); let hours = Math.floor(minutes / 60); let days = Math.floor(hours / 24);
Das Skript stammt mal wieder von Daishi, er hat mich gefragt, ob ich damit etwas mit anfangen kann....
Na klar, super Teil zur passenden Zeit!
Was kann das Skript?
Das Skript ist so aufgebaut, dass mehrere Zähler unabhängig arbeiten können! Es ist auch möglich die Zähler kleiner darzustellen, evtl. die Sekunde weglassen oder eine Terminliste erstellen! Vieles ist möglich, mal wieder genial!
Auch lässt sich ein neuer Foren-Code mit wenigen DIV's erstellen und in Beiträgen verwenden!
Was habe ich verändert?
An der Funktion und an den Classes war nichts Großes zu verändern, was stört! Habe nur ein "z-index" eingefügt, damit die Zähler oben liegen und nicht unter einer Titelleiste verschwinden!
Weil es 2 Zähler sind, habe ich sie nebeneinandergestellt. Nimmt die Breite ab, werden sie automatisch untereinander platziert!
Die Überschriften sind etwas auffälliger in 3D dargestellt!
Installation für alle Template & Mobil
Das komplette Skript kommt für die Template (v1-4) in die Kopf- & Fußzeile.
Für das neue Xobor V6 & Mobil wird das komplette Skript nach Eigenes Javascript kopiert.
Das Skript kann auch als Plugin unter "Untere Leiste - Header" angelegt werden!
Wichtig! Im Plugin muss dann rechts oben das "Unterstützte Template" markiert werden, z.B. Business - Template (144) & Mobil - Template (177), Auswahl mit Mausklick oder Strg + Mausklick!
Der Hintergrund der Zähler kann in Zeile 4 verändert werden!
Die Formatierungen für beiden Überschriften sind in Zeile 55-74
Über Zeile 83 kann die Position der Counter bestimmt werden!
Der Treffpunkt für Hilfe, Tricks & Tipps
»
XOBOR-Foren und Homepages
»
Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps
»
Neujahrs Countdown
Foren Spende
Direkt zu PayPal
Thema drucken
15.12.2022 12:09 (zuletzt bearbeitet: 15.12.2022 12:27)
Antworten
