Trick # 81 | Dieser Beitrag beinhaltet 415 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Im Divi-Theme gibt es ein Countdown-Modul, welches auf ein kommendes Ereignis die Tage, Stunden, Minuten und Sekunden rückwärts laufen lässt. Der Timer sieht ansprechend aus, hat aber den Schönheitsfehler, dass da auch mal steht «noch 002 Tage». Nicht so gelungen. Die überflüssigen Nullen lassen sich aber ausschalten.
Eigentlich sieht er noch cool aus, der Countdown-Zähler des Divi-Themes:
Tag(e)
:
Stunde(n)
:
Minute(n)
:
Sekunde(n)
Die drei Zählerstellen für die Tage scheinen jedoch etwas übertrieben. Auch bei den Stunden, Minuten und Sekunden würde – je nach Zeitpunkt – eine Stelle durchaus reichen. Das können Sie mit einem kleinen Trick so einrichten.
Den folgenden Code können Sie kopieren und in den <head>-Bereich Ihrer Website einfügen. Das geht via Divi/Theme-Optionen/Integration/Code dem < head > Ihres Blogs hinzufügen:
<script>
jQuery(function($){
var oldvals = $('.et_pb_countdown_timer .value');
// Clone the vals and hide the original.
// - Wraps new vals element in a span to prevent Divi from updating them
oldvals.each(function(){
$(this).after($(this).clone()).next().wrap('<span></span>');
}).hide();
// Update the clones each second, removing the trailing zeros
setInterval(function () {
oldvals.each(function(){
var oldval = $(this);
var val = oldval.html();
val = trim_leading_zeros(val);
oldval.next().find('.value').html(val);
});
}, 250);
function trim_leading_zeros(str) {
if ((str.length > 1) && (str.substr(0,1) === '0')) {
return trim_leading_zeros(str.slice(1));
}
return str;
}
});
</script>Das war’s auch schon. Wenn das Countdown-Timer-Modul eingesetzt wird, werden nun führende Nullen sowohl bei Tagen, wie auch bei Stunden, Minuten und Sekunden ausgeblendet.
Werbung
Werbung
