I wonder if you have any way other than adding the number separator in the Jquery form?
Example: Current: 2000 Correct 2000
I wonder if you have any way other than adding the number separator in the Jquery form?
Example: Current: 2000 Correct 2000
Change your numberToReal
function to this one below.
See working here insert the link description here
function addDots(nStr) {
nStr += '';
var x = nStr.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + '.' + '$2');
}
return x1 + x2;
}
I was able to solve the problem with the punctuation, the conflict started because of the scroll, but for people who had the same problem in finding a timer or count number animation that activates with scrolling, follow the commands of java script and jquery.
var jarodou = 0; //controla se já rodou o counter 0=não 1=sim
$(document).ready(function() {
function visibleHideme() {
$('.seucomandodonumero').each(function() {
var top_of_object = $(this).offset().top;
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var half_of_object = $(this).offset().top + ($(this).outerHeight() / 2);
var top_of_window = $(window).scrollTop();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if (half_of_object < top_of_window) {
$(this).css({
'opacity': '0',
'top': '-50px'
});
}
if (half_of_object > bottom_of_window) {
$(this).css({
'opacity': '0',
'top': '50px'
});
} else if (half_of_object > top_of_window && half_of_object < bottom_of_window) {
$(this).css({
'opacity': '1',
'top': '0px'
});
}
});
}
visibleHideme();
$(window).scroll(function() {
visibleHideme();
});
});
function ativaContador(e) {
$('.seucomandodonumero').each(function() {
$(this).prop('.seucomandodonumero', 0).animate({
Counter: $(this).text()
}, {
duration: 1000,
easing: 'swing',
separator: ',ddd',
step: function(now) {
if (now > 0)
$(this).text(addDots(Math.ceil(now)));
},
complete: function() {
$(this).stop(true, true)
},
});
});
}
$(window).scroll(function(e) {
var alturaBody = $(window).height();
var distanciaElemento = $('.seucomandodonumero').offset().top;
var posicaoScroll = $(this).scrollTop();
var alturaElemento = $('.seucomandodonumero').outerHeight();
if (posicaoScroll > (distanciaElemento + alturaElemento - alturaBody)) {
//testa se counter já rodou
if (jarodou == 0) {
ativaContador();
}
jarodou = 1; //inibe rodar counter de novo
}
});
function addDots(nStr) {
nStr += '';
var x = nStr.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + '.' + '$2');
}
return x1 + x2;
}
body {
padding: 10px;
font-family: Helvetica;
background-color: white;
}
.col_fifth {
width: 95%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(158px, 2fr));
grid-gap: 8px;
margin: auto;
}
.quadrado {
text-align: center;
margin-bottom: 0px;
color: #2d2d2d;
width: 198px;
display: table;
float: left;
padding: 10px;
position: relative;
transition: opacity 0.6s ease, top 0.6s ease;
margin: 5px;
justify-content: center;
}
.counter-cronometro {
padding: 10px;
border-radius: 10px;
display: table;
justify-content: center;
width: 190px;
margin: 0px;
height: 190px;
background-color: #f9f9f9;
}
.count-title {
font-size: 28px;
margin-top: 5px;
margin-bottom: 0;
text-align: center;
font-weight: bold;
display: inline;
}
.count-text {
color: #898989;
font-size: 18px;
font-weight: bold;
margin-top: 5px;
margin-bottom: 0;
text-align: center;
}
.count-number {
font-weight: bold;
font-size: 20px;
display: inline;
}
@media only screen and (max-width: 320px) {
.col_fifth {
width: 40%;
display: table;
float: left;
margin: auto;
}
.counter-cronometro {
padding: 5px;
border-radius: 10px;
justify-content: center;
width: 140px;
margin: 0 0px;
height: 160px;
background-color: #f9f9f9;
}
div.quadrado {
text-align: center;
margin-bottom: 0px;
color: #2d2d2d;
width: 30%;
padding: 5px;
position: relative;
transition: opacity 0.6s ease, top 0.6s ease;
}
div.count-title {
font-size: 20px;
margin-top: 5px;
margin-bottom: 0;
text-align: center;
font-weight: bold;
display: inline;
}
div.count-text {
color: #898989;
font-size: 13px;
font-weight: bold;
margin-top: 5px;
margin-bottom: 0;
text-align: center;
}
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<div class="col_fifth">
<div class="quadrado">
<div class="counter-cronometro">
<img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/trophy%201.png"border="0" alt=" photo trophy 1.png" width="67px" /> <br></br><br>
<div class="count-title">+
<h2 class="count-number">59</h2>
</div>
<p class="count-text">Anos de Liderança</p>
</div>
</div>
<div class="quadrado">
<div class="counter-cronometro">
<img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/icon%201.png"border="0" width="65px" alt="preço zetaflex" /> <br />
<span class="count-title">+ <h2 class="count-number">2000000 </h2><p class="count-text ">m² Vendidos</p></div></div>
<div class="quadrado">
<div class="counter-cronometro">
<img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/mapa-brasil.png"border="0" border="0" alt="Áreas atendidas" width="67px" /><br></br><br>
<div class="count-title">+ <h2 class="count-number">4000</h2></div> <p class="count-text ">Municípios Atendidos</p></div></div>
<div class="quadrado">
<div class="counter-cronometro">
<img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/businessman-1_1.png"border="0" alt="representantes"width="80px" style="margin-top:10px;"/></br><br>
<div class="count-title">+ <h2 class="count-number">500</h2> </div> <p class="count-text ">Colaboradores</p></div></div>
<div class="quadrado">
<div class="counter-cronometro">
<img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/diploma_1.png"border="0" alt="Patente" width="70px" /><br></br><br>
<div class="count-title">+ <h2 class="count-number">160</h2> </div><p class="count-text ">Patentes</p></div></div>
<div class="quadrado">
<div class="counter-cronometro">
<img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/real-estate-agreement%201.png"alt="clientessatisfeito" width="65px" /><br></br>
<div class="count-title"> + <h2 class="count-number">300000</h2></div><p class="count-text "> Clientes Satisfeitos</p></div></div>
</div>