Hi to everyone. I am new on this forum, and it is my first post.
I make number counter, and I done almost all job, but what is not OK.
For example, I have number 10, and when counter starts counting, it gets to number 10, and then it should stop.
But, then it begin counting backwards, and I don’t want it, and that’s my problem. I tried to fix it on more ways, but unfortunatelly, I couldn’t fixed it, so I hope there is someone who will help me with this problem. Thanks to everyone.
Part of HTML code:
[code]
<div class=”images”>
<div class=”img1″>
<img src=”icon.png” alt=”icon” class=”icon”>
<p class=”years1″>10</p>
<p class=”years2″>Years Of Experience</p>
</div>
<div class=”img2″>
<img src=”icon2.png” alt=”icon” class=”icon2″>
<p class=”years1″>3</p>
<p class=”years2″>Expert Dentist</p>
</div>
<div class=”img3″>
<img src=”icon3.png” alt=”icon” class=”icon3″>
<p class=”years1″>2000</p>
<p class=”years2″>Happy Patients</p>
</div>
<div class=”img4″>
<img src=”icon4.png” alt=”icon” class=”icon4″>
<p class=”years1″>7000</p>
<p class=”years2″>Repair Teeths</p>
</div>
</div>
Java script code:
[code]function isElementVisible($elementToBeChecked)
{
var TopView = $(window).scrollTop();
var BotView = TopView + $(window).height();
var TopElement = $elementToBeChecked.offset().top;
var BotElement = TopElement + $elementToBeChecked.height();
return ((BotElement <= BotView) && (TopElement >= TopView));
}
$(window).scroll(function () {
$( “.years1” ).each(function() {
isOnView = isElementVisible($(this));
if(isOnView && !$(this).hasClass(‘Starting’)){
$(this).addClass(‘Starting’);
startTimer($(this));
}
});
});
function startTimer($this) {
$(‘.years1’).each(function () {
$(this).prop(‘Counter’, 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: ‘swing’,
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}