therookie
therookie

Reputation: 1

Text within a JQuery Counter

I am trying to add some text within a Jquery counter. I want the text to appear right below the number. If I add it inside the ,p>

tags it disappears. Here is the code.

<script type='text/javascript' src="http://code.jquery.com/jquery-1.9.1.js"></script>   
<script type="text/javascript">
    var currentNumber = $('#dynamic-number').text();
    $({numberValue: currentNumber}).animate({numberValue: 8}, {
        duration: 800,
        easing: 'linear',
        step: function() { 
            $('#dynamic-number').text(Math.ceil(this.numberValue)); 
        }
    });
</script>

<p id="dynamic-number">0</p>

<style>
 #dynamic-number {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px; 
    border:solid 1px #f00; 
    font: bold 55px Arial;
    color: black;
    text-align: center;
    margin: 30px 30px 0 0;  
}
</style>

Upvotes: 0

Views: 156

Answers (1)

Xanfar
Xanfar

Reputation: 156

That's because your p tag is being replaced every time your .text() is being called. Try adding it there instead... Here is a fiddle

I highly recommend using html() instead of text() so this way you can add in markup :)

$({numberValue: currentNumber}).animate({numberValue: 8}, {
duration: 800,
easing: 'linear',
step: function() { 
$('#dynamic-number').html(Math.ceil(this.numberValue)+'<p class="textUnder">some text here</p>'); 
}
});

You should also not be inserting this into a p tag as you limited in tags that it will accept. Try this instead

<div id="dynamic-number">0<p class="textUnder"></p></div>

EDIT: Per the comment by @therookie. For multiple counters with unique id's on each of the counters then you will want to step through those with a FOR loop like this EXAMPLE

Upvotes: 2

Related Questions