Hello, I’m new to HubSpot development. I used html + css + js(I have used a jQuery plugin and waypoints.js.) to make counting numbers function dynamically. It is working fine normally but when I tested the module html + css + js code on HubSpot, the counting numbers did not work.
Could somebody please assist me in determining the cause and offering a solution? Thank you in advance!
hi @FAlluqmani
You have to paste all your CDN inside module instead of base.html then it will work proper for you in preview mode like this as shown in below image
<script src=“https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js”></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js”></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.js”></script>
<script>
$(‘.counter’).counterUp({
delay: 10,
time: 2000
});
</script>
Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.
I try to add this but does not work
@FAlluqmani , are you getting any errors reported in your console?
My first guess is that the library is being called before jquery.
Look for anything like $ is undefined or jquery is undefined
hi @FAlluqmani
Please create one separate Custom module(for testing purpose) and paste below code in (html+hubl) with no any change , if it works proper for you then make modification as per your requirements.
<div class=“row-fluid”>
<div class=“counter-module”>
<h2><span class=“counter”>3000</span> <span> </span></h2>
\<h6>Counting Number\</h6>
</div>
</div>
<script src=“https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js”></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js”></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js”></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.js”></script>
<script>
$(‘.counter’).counterUp({
delay: 10,
time: 2000
});
Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.
</script>
Hi @FAlluqmani,
could you please post the whole HTML part of the module here? I saw an
</body>
and
</html>
tag in the last loom video. And those things might break the functionality.
best,
Anton
Actually, The problem was about the js file linking in HubSpot.
the solution:
I have uploaded the required js file in a folder and add three file:
1.a jQuery file (JavaScript library) .
2.waypoint js (which is a helper file to detect screen position for the counter)
3.counter js (which is a file for the counter itself)
and then add that file link to a specific module. In our case in the counter module.
Thank you all for your assistance.
Hello @FAlluqmani,
Please include JQuery CDN above all CND’s in html inside the module like this
<script src=“https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js”></script>
or you can go through this link also:-
Regards,