noggin2k1 Posted February 21, 2021 Share Posted February 21, 2021 Site URL: https://www.monkeymole.co.uk Hi there, Coding novice here. I've taken some code from this forum and amended values/font etc to my preference, however I'm looking to add a symbol after one of the values. It's currently "100" (weddings captured), and I'm wanting it to be "100+" (weddings captured) Script is: <p><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script> var a = 0; $(window).scroll(function() { var oTop = $('#counter').offset().top - window.innerHeight; if (a == 0 && $(window).scrollTop() > oTop) { $('.counter-value').each(function() { var $this = $(this), countTo = $this.attr('data-count'); $({ countNum: $this.text() }).animate({ countNum: countTo }, { duration: 2000, easing: 'swing', step: function() { $this.text(Math.floor(this.countNum)); }, complete: function() { $this.text(this.countNum); } }); }); a = 1; } }); </script> <div id="counter"> <div class="sqs-col sqs-col-4 counter-value" data-count="100" data-desc="Weddings captured">0</div> <div class="sqs-col sqs-col-4 counter-value" data-count="31" data-desc="Cameras owned">0</div> <div class="sqs-col sqs-col-4 counter-value" data-count="81044" data-desc="Canapes stolen">0</div> </div> <style> .counter-value { font-size: 40px; line-height:2em; text-align:center; padding:17px 0; } .counter-value:after { content: attr(data-desc); display:block; font-size: 16px; line-height:1.2em; } </style></p> Many thanks. Link to comment
creedon Posted February 21, 2021 Share Posted February 21, 2021 Try this updated code. Make a copy of your current code somewhere just in case. <p> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> var a = 0; $(window).scroll(function() { var oTop = $('#counter').offset().top - window.innerHeight; if (a == 0 && $(window).scrollTop() > oTop) { $('.counter-value').each(function() { var $this = $(this), countTo = $this.attr('data-count'); $( { countNum : $this.text ( ), index : $this.index ( ) } ).animate ( { countNum: countTo }, { duration: 2000, easing: 'swing', step: function() { $this.text(Math.floor(this.countNum)); }, complete : function ( ) { let countNumText = this.countNum; if ( this.index == 0 ) countNumText += '+'; $this.text ( countNumText ); } }); }); a = 1; } }); </script> <div id="counter"> <div class="sqs-col sqs-col-4 counter-value" data-count="100" data-desc="Weddings captured">0</div> <div class="sqs-col sqs-col-4 counter-value" data-count="31" data-desc="Cameras owned">0</div> <div class="sqs-col sqs-col-4 counter-value" data-count="81044" data-desc="Canapes stolen">0</div> </div> <style> .counter-value { font-size: 40px; line-height: 2em; text-align: center; padding: 17px 0; } .counter-value:after { content: attr(data-desc); display: inline-block; font-size: 16px; line-height: 1.2em; } </style> </p> Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment