/    Sign up×
Community /Pin to ProfileBookmark

Problem with number counter

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>[/code]


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));
}
});
});
}[/code]

to post a comment
JavaScript

11 Comments(s)

Copy linkTweet thisAlerts:
@NogDogDec 29.2019 — (Changed back-ticks to ... tags in original post)
Copy linkTweet thisAlerts:
@SempervivumDec 29.2019 — Funny and tricky stuff, surprising that this works! However, for reasons of readability and clarity one should not do it this way. Anyway, I did a test without the scrolling and visiblity feature and for me this animation works and stops as expected when the final value has been reached. I suspect that the reason is located somewhere else.

Is that code online so that one can view it live and completely?
Copy linkTweet thisAlerts:
@SempervivumDec 29.2019 — PS: I spotted an error in your code:

You hand over the element that is getting visible to the function startTimer as a parameter $this. However inside that function you do not use this parameter but instead loop through all elements .years1. The result is that the animation is started for the other elements too but without setting the class "Starting". Therefore, for these elements the animation will be started again although it's already running when scrolling is continued.
Copy linkTweet thisAlerts:
@Hera-CoderauthorDec 29.2019 — First of all, thank You very much. Code is not online. When You said, it works with You, I think now, problem maybe could be in the rest of JS code, because there are a lot of JS code. I just put part of code which is related with this problem. I would put all code here, but there is really a lot of code. Can You just say to me, do You try with scrolling. I would really want to know if it works with You. Thanks once again
Copy linkTweet thisAlerts:
@SempervivumDec 29.2019 — I suspect our postings crossed. Please refresh and read my second posting.
Copy linkTweet thisAlerts:
@Hera-CoderauthorDec 29.2019 — @Sempervivum#1612296 I wrote my past comment before I seen Your answer :D
Copy linkTweet thisAlerts:
@Hera-CoderauthorDec 29.2019 — Oh, You are awesome. BIG BIG thanks. This problem made me crazy and nervous :D. I finally found my hero :D

Thanks once again.

I just have one more question. This works great, but are there any way to do next thing. I have four numbers. I just want to add at the end of numbers sign "+", and I done it. But I wish that one number to be without sign"+". So, at the end of three numbers sign "+", and one number without sign "+".
Copy linkTweet thisAlerts:
@SempervivumDec 29.2019 — I propose the following procedure: Add that sign as a data-attribute to each element .years1 like this:

`&lt;p class="years1" data-suffix="+"&gt;10&lt;/p&gt;</C><br/>
or<br/>
<C>
&lt;p class="years1" data-suffix=""&gt;10&lt;/p&gt;</C> where you don't want that sign to be added.<br/>
Then add it to the text like this:<br/>
<C>
$this.text(Math.ceil(now) + $this.data('suffix');`


I didn't test it but quite confident that it will work this way.
Copy linkTweet thisAlerts:
@Hera-CoderauthorDec 29.2019 — That's it. Huge thanks. You're really great person. I wish You all the best 😃
Copy linkTweet thisAlerts:
@SempervivumDec 29.2019 — You're welcome. I forgot at the beginning: Welcome to the forum!
Copy linkTweet thisAlerts:
@Hera-CoderauthorDec 29.2019 — Oh, thanks 😄
×

Success!

Help @Hera-Coder spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...