Reputation: 1
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
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