Często na stronie internetowej, zwłaszcza w landing page stosujemy element odliczający czas do jakiegoś wydarzenia. Do tego celu wykorzystujemy w Divi moduł, który nazywa się timer. W przypadku odliczania dni do wydarzenia, domyślnie są ustawione trzy cyfry np. 183 dni lub 213 dni. Co w przypadku kiedy mamy tych dni 34? Moduł domyślnie wyświetla zero przed dniami, będzie to wyglądać w następujący sposób: 034. Zgodzisz się ze mną, że taki format nie jest korzystny wizualnie. Pokażę Ci sposób jak usunąć zero w przypadku tylko dni, oraz usuniemy zero we wszystkich liczbach czyli: dni, godziny, minuty i sekundy.
Zobacz przykład na mojej stronie LandingPage z zapisem na kurs WordPress’a
Aby usunąć zero, do naszej strony musimy dodać trochę kodu JavaScript. Logujemy się do naszego panelu WordPress’a, przechodzimy z lewej strony w menu do Divi, następnie wybieramy integracje. W polu „Dodaj kod <head> Twojego bloga” wklejamy poniższy kod. Zapisujemy ustawienia i cieszymy się timerem bez zera wiodącego.
Kod w przypadku usunięcia zera tylko dla pola „dni”
<script> jQuery(function($){ var olddays = $('.et_pb_countdown_timer .days .value'); // Clone the days and hide the original. // - Wraps new days element in a span to prevent Divi from updating it olddays.each(function(){ var oldday = $(this); oldday.after(oldday.clone()); oldday.next().wrap('<span></span>'); }).hide(); // Update the clone each second, removing the trailing zero (function update_days() { olddays.each(function(){ var oldday = $(this); var days = oldday.html(); if (days.substr(0,1) == '0') { days = days.slice(1); } oldday.next().find('.value').html(days); }); setTimeout(function(){ update_days(); }, 1000); })() }); </script>
Kod w przypadku usunięcia wszystkich zer w timerze
<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>