CODEWITHSUNDEEP
javascriptjquerysyntaxnan
Undefined
Undefined

Reputation: 11431

JavaScript NaN issue with my javascript/jquery code

Im using javascript to animate some text in line with a div.

textValue can be any number between 14-92. I then need to change this number into a percentage (between 1 and 100) and this animates up from 0 - to the percentage. The problem is that it shows NaN and im not sure what is causing this.

I believe the problem in on the line whileValue = ...

I have declared the variables earlier on in my code.

Any idea what is causing this problem?

Thanks

        $("#percent")
            .delay(3000)
            .animate({
                bottom: textValue 
            }, {
            step: function () {
                whileValue = (Math.ceil(parseInt($(".progressbar-cover").css("bottom")-14)/78)*100);
                $("#percent").html(whileValue); //Increase the number to whileValue inline with animating upwards
            }
        });

Edit: Added my html for @mike

  <div class="progressbar">
      <div style="position:absolute; left:-14px; bottom:0%;" id="percent">0%</div>
      <span class="progressbar-value"><em class="progressbar-cover"></em></span>
  </div>

Upvotes: 0

Views: 976

Answers (3)

jacqijvv
jacqijvv

Reputation: 880

I agree with Alytrem, but since it is a percentage value,

I would go for the follwoing (parseFloat):

var value = ((parseFloat($(".progressbar-cover").css(bottom))-14)/78)*100);;
 $("#percent").html(value);

Upvotes: 0

Salvatorelab
Salvatorelab

Reputation: 11873

Does css("bottom") return a number? or it returns something like: 24px?

Just add:

.css("top").replace("px","");

Upvotes: 0

Alytrem
Alytrem

Reputation: 2620

Your are doing

parseInt($(".progressbar-cover").css("bottom")-14)

You may correct by :

parseInt($(".progressbar-cover").css("bottom"))-14

You will be able to parse "12px", but not "12px" - 14

Upvotes: 4

Related Questions