Lesefortschritt:

Führende Nullen im Divi-Countdown-Timer entfernen

22. März 2021 | Divi-Theme, Scripts

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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This