Skip to main content

Hi all,

 

Wanted to ask what is the possible errors or causes for showing “NaN” values on website. I created a site and made it animate to run the number upon scroll.

 

But when I transferred the  entire source code and script from the test page to a new page, the code does not seem to work correctly and shows “NaN” before jumping to the correct number. 

 

Not sure if there is another section or area that I will need to check or change besides the coding sections. Thanks for reading and helping. 

 

Putting down one of the script and source code below for reference. 

 

Script

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>

$(window).scroll(function(){ 
  if ($(this).scrollTop() > 2300){

$('.counter').each(function() {
  var $this = $(this),
      countTo = $this.attr('data-count');
  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },
  {
    duration: 1200,
    easing:'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
    }
  });  
});

  }
}); 
</script>

 

Source Code

<p class="lplh-40" style="line-height: 77px; text-align: center;"><span style="font-size: 65px;"><span class="counter" data-count="2" style="font-family: Oswald; color: rgb(61, 85, 122); font-weight: 400; font-style: normal;">2</span><span style="color: rgb(61, 85, 122);"><span style="font-family: Oswald; font-weight: 400; font-style: normal;">,</span><span class="counter" data-count="850" style="font-family: Oswald; font-weight: 400; font-style: normal;">0</span><span style="font-family: Oswald; font-weight: 400; font-style: normal;">,</span></span><span class="counter" data-count="592" style="font-family: Oswald; color: rgb(61, 85, 122); font-weight: 400; font-style: normal;">0</span></span></p>

 

 

 

Hey there @isabellimmm,

 

Thanks for reaching out to the Community :-)

 

I’ve never seen these ‘NaN’ values before. Can I ask if you’re running any other scripts which reference jQuery? It may may that multiple instances of jQuery are interfering with each other.

It might be worth reaching out to Unbounce Support so they can take a look. You can contact them here. Alternatively, I can take a look at your page if you like. Would you mind sharing the URL of your page?

not sure if you meant this? 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<style>
  .revealOnScroll{opacity:0;}
</style>

 

The animated page is not launched yet, I am trying to debug it on a duplicated file.  But we launched a static one by intentionally putting a spelling error on the id of the scripts. 

 

https://campaigns.family.org.sg/stewardship-report/

 

so far cos im copying codes from one file to another for the code to run, the only 2 places i’ve imported from is the source codes on the numbers and the scripts. Is there any where else that might cause the issue?

I do suspect that it is something else that is causing the “NaN” as the source codes and javascript are copied entirely, but am not sure what as I am not sure what or where 

Hey there! This may be something our Support Teams can help out with. Are you able to submit a support ticket so we can take a more in depth look?

 

Submit Support Ticket

Reply


Terms & ConditionsCookie settings