Answered
Need help placing multiple js animations on one page.
Morning,
I have three animated numbers I am wanting to place on a page. One needs a $ sign and the others don't. How can I call different js for the other two that don't need the $ in front of the number? When I place all three on a page they get wacky and animate every time you scroll instead of just once when in view as well.
Here is the one with the $.
Thank you for any help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<style>
body { min-height: 100vh; }
.container {margin: 0px auto; font-family: 'Roboto', sans-serif; max-width: 640px; text-align: center;}
.count676 { height: 100px; color: #0091b3; text-align: center;; font-size: 100px; font-weight: 200; margin: 0 auto;}
</style>
<style>
</style>
</head>
<body>
<div class="container">
<div class="count676"></div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>
function isInView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height() - 200;
var elemTop = $(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function(){
if (isInView($('.count676'))) {
jQuery(function($) {
$('.count676').countTo({
from: 0,
to: 676,
speed: 1300,
});
});
$(window).off('scroll');
}
})
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src=('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script>
/**
* A jQuery plugin to display counter.
* @7111211: Akhtar Husain <dev.akhtarhusain@gmail.com>
* @version: 1.0
*/
(function($) {
$.fn.countTo = function(options) {
options = $.extend({}, $.fn.countTo.defaults, options || {});
var loops = Math.ceil(options.speed / options.refreshInterval),
increment = (options.from - options.to) / loops;
Number.prototype.formatMoney = function(c, d, t){
var n = this,
c = isNaN(c = Math.abs(c)) ? 2 : c,
d = d == undefined ? "." : d,
t = t == undefined ? "," : t,
s = n < 0 ? "-" : "",
i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))),
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};
return $(this).each(function() {
var _this = this,
loopCount = 0,
value = options.from,
interval = setInterval(updateTimer, options.refreshInterval);
function updateTimer() {
value -= increment;
loopCount++;
var newVal = value.formatMoney(options.decimals, options.separator) + 'M';
$(_this).html('$' + newVal);
if (typeof(options.onUpdate) == 'function') {
options.onUpdate.call(_this, value);
}
if (loopCount >= loops) {
clearInterval(interval);
value = options.to;
if (typeof(options.onComplete) == 'function') {
options.onComplete.call(_this, value);
}
}
}
});
};
$.fn.countTo.defaults = {
from: 100,
to: 10,
speed: 500,
refreshInterval: 100,
decimals: 0,
onUpdate: null,
onComplete: null,
separator: '.'
};
})(jQuery);
</script>
</body>
</html>
AdChoices