topic Re: Counting numbers did not work in HubSpot Module in CMS Development

Counting numbers did not work in HubSpot Module

FAlluqmani — Wed, 20 Apr 2022 09:00:56 GMT

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!

https://www.loom.com/share/93d7829546c947de961a7efa66837e21

Re: Counting numbers did not work in HubSpot Module

ChehakWadhdwa — Wed, 20 Apr 2022 10:29:47 GMT

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>

$('.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.

Re: Counting numbers did not work in HubSpot Module

FAlluqmani — Wed, 20 Apr 2022 14:25:43 GMT

I try to add this but does not work☹️

https://www.loom.com/share/451c7b1068644d1dbf97e3d42153527b

Re: Counting numbers did not work in HubSpot Module

dennisedson — Wed, 20 Apr 2022 14:58:08 GMT

@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

Re: Counting numbers did not work in HubSpot Module

ChehakWadhdwa — Thu, 21 Apr 2022 05:55:33 GMT

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.

<h6>Counting Number</h6>

</div>

$('.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>

Re: Counting numbers did not work in HubSpot Module

Anton — Thu, 21 Apr 2022 08:42:32 GMT

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

Re: Counting numbers did not work in HubSpot Module

FAlluqmani — Thu, 21 Apr 2022 11:22:50 GMT

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.

Re: Counting numbers did not work in HubSpot Module

himanshurauthan — Thu, 21 Apr 2022 12:22:07 GMT

Hello @FAlluqmani,

Please include JQuery CDN above all CND's in html inside the module like this

or you can go through this link also:-

https://knowledge.hubspot.com/website-pages/include-jquery-across-your-hubspot-pages

Regards,