I am a beginner with JS and have no idea how to pull it off here. Idea is to have commas in the numbers to make it easier to read while counting up and also the final static result should have commas.
Eg: "10,000"
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);
//alert('finished');
}
});
});
a = 1;
}
});
Best way is to use the built-in Intl object. More info here.
const number = 123456;
const formattedNumber = new Intl.NumberFormat('en-us').format(number);
console.log({ formattedNumber }); // 123,456
I have tried endless solutions that I have found for this on these forums and none that I have found work or I am simply putting it in the wrong place. I am trying to force commas for thousand and millions places. Any suggestions and placement would be appreciated.
Thank you.
jQuery(window).scroll(startCounter);
function startCounter() {
var hT = jQuery('.counter').offset().top,
hH = jQuery('.counter').outerHeight(),
wH = jQuery(window).height();
if (jQuery(window).scrollTop() > hT+hH-wH) {
jQuery(window).off("scroll", startCounter);
jQuery('.counter').each(function () {
var $this = jQuery(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 4000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
}
}
Assuming you would want to comma seperate values by hunders,thousands,millions,...
You may do:
let num = 9876543210;
console.log(num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
// or
console.log((num).toLocaleString());
// or
console.log(new Intl.NumberFormat('en-US', {}).format(num));
How can I change the following function so it will display random numbers instead of counting up to the final number?
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
}, {
duration: 1000,
easing: 'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
var element = document.getElementById('result');
element.style.opacity = "1";
element.style.filter = 'alpha(opacity=1)'; // IE fallback
var button = document.getElementById('return');
button.style.opacity = "1";
button.style.filter = 'alpha(opacity=1)'; // IE fallback
}
});
});
Thanks in advance.
This:
step: function() {
$this.text(Math.floor(this.countNum));
},
Should be:
step: function() {
var min = 5; // change min if you want to
var max = 200; // change max if you want to
$this.text(Math.floor(Math.random() * (max - min) + min)); // use Math.random to generate the random numbers
},
I have been reading several similar questions about this, but I can't get it to work. I have a scroll detection function in jQuery, which I want to have 3 parameters:
function scroll_detection(box_selector, trigger_offset, the_animation){
//something here
the_animation();
}
Where the_animation is a function that will be called like this:
scroll_detection("section", .8, function(){
//stuff here
});
The problem is, when I add the function, the animation do not run anymore.
This code works perfectly:
function scroll_detection(duration, box_selector, element_selector, ease, trigger_offset ){
var effect_offset = Math.floor($(window).height() * trigger_offset);
$(window).bind('scroll', function() {
$(box_selector).each(function() {
var post = $(this);
var position = post.position().top - ($(window).scrollTop() + effect_offset);
if (position <= 0) {
$(this).find(element_selector).animate( { marginLeft: "0" }, duration, ease );
}
});
});
}
scroll_detection(2000, "section", ".section-title", "easeOutBack", .8);
scroll_detection(3000, ".article-wrap", ".article-title", "easeOutBounce", .7);
But this does not:
function scroll_detection(the_animation, box_selector, trigger_offset ){
var effect_offset = Math.floor($(window).height() * trigger_offset);
$(window).bind('scroll', function() {
$(box_selector).each(function() {
var post = $(this);
var position = post.position().top - ($(window).scrollTop() + effect_offset);
if (position <= 0) {
the_animation();
}
});
});
}
scroll_detection( function(){
$(this).find(".section-title").animate( { marginLeft: "0" }, 2000, "easeOutBounce");
}, "section", .8);
I want to be able to change easily what kind of effect I want. Any help will be appreciated.
Edit 11/09/2015:
As #Aguardientico and #LuiGui pointed out, the problem was the scope of the $(this) inside the callback function, and I went with the #Aguardientico solution.
jQuery(document).ready(function($){
function scroll_detection(the_animation, box_selector, trigger_offset ){
var effect_offset = Math.floor($(window).height() * trigger_offset);
$(window).bind('scroll', function() {
$(box_selector).each(function() {
var post = $(this);
var position = post.position().top - ($(window).scrollTop() + effect_offset);
if (position <= 0) {
the_animation.call(post); //Add call to give the function the right scope
}
});
});
}
scroll_detection( function(){
$(this).find(".section-title").animate( { marginLeft: "0" }, 2000, "easeOutBounce");
}, "section", .8);
It looks like an issue related with scope, you are calling $(this) inside your anonymous function aka the_animation, what if you do the following? the_animation.call(post)
function scroll_detection(the_animation, box_selector, trigger_offset ){
var effect_offset = Math.floor($(window).height() * trigger_offset);
$(window).bind('scroll', function() {
$(box_selector).each(function() {
var post = $(this);
var position = post.position().top - ($(window).scrollTop() + effect_offset);
if (position <= 0) {
the_animation.call(post);
}
});
});
}
scroll_detection( function(){
$(this).find(".section-title").animate( { marginLeft: "0" }, 2000, "easeOutBounce");
}, "section", .8);
You are function calls DO NOT match the function definitions.
Your parameters are OUT OF ORDER.
Try this NEW CODE:
var scroll_detection = function scroll_detection_func(
the_animation, box_selector, trigger_offset
){
var effect_offset = Math.floor($(window).height() * trigger_offset);
$(window).bind('scroll', function() {
$(box_selector).each(function() {
var post = $(this);
var position = post.position().top
- ($(window).scrollTop()
+ effect_offset)
;
if (position <= 0) {
the_animation();
}
});
});
}
scroll_detection(
function(){
$(this).find(".section-title").animate({
marginLeft: "0" },
2000, "easeOutBounce"
);
}, //the_animation
"section", //box_selector
.8 //trigger_offset
);
From the code you give,the_animation means
$(this).find(element_selector).animate( { marginLeft: "0" }, duration, ease );
so you can there is a this in your function. When you pass a function with this as a parameter, you need to specify what this mean, just try to specify the scope of this use apply(),bind() or 'call()' function, here are some explanations:
http://javascriptissexy.com/javascript-apply-call-and-bind-methods-are-essential-for-javascript-professionals/
I'm using the latest jQuery Knob.js and wondered if there is a way to link up 3 dials so that each value changes on "change" in order for the combined total to never go over 100%?
Initially all 3 dials are set to 33%. if a user changes one of the dial the other 2 should increase or decrease to equate to 100 in total.
Because I liked the idea I've just created a Fiddle :
$(function () {
$('.knob').knob({
readOnly: false,
'width': 150,
'height': 150,
'dynamicDraw': true,
'thickness': 0.4,
'tickColorizeValues': true,
'skin': 'tron',
displayInput: true,
change: function (value) {
var tKnobsVal = 0;
$(".knob").each(function () {
tKnobsVal += parseInt($(this).val());
});
var kDiff = tKnobsVal - 100;
adjustKnob(this.$.attr("id"), kDiff);
}
});
$('#btn').click(function () {
$({
value: $('.knob').val()
}).animate({
value: 33
}, {
duration: 700,
easing: 'swing',
progress: function () {
$('.knob').val(Math.round(this.value)).trigger('change');
}
});
});
});
function adjustKnob(id, value) {
var cValue = value / 2;
$(".knob").not("[id=" + id + "]").each(function () {
changeKnob($(this).attr("id"), cValue);
});
}
function changeKnob(id, value) {
$({
value: $("#" + id).val()
}).animate({
value: $("#" + id).val() - value
}, {
duration: 700,
easing: 'swing',
progress: function () {
$("#" + id).val(Math.round(this.value)).trigger('change');
}
});
}
On the knob change event, the sum of all knob values is retrieved:
var tKnobsVal = 0;
$(".knob").each(function () {
tKnobsVal += parseInt($(this).val());
});
Then the function adjustKnob() is called with the value var kDiff = tKnobsVal - 100; (for the difference from 100) and the id of the knob that has been changed.
adjustKnob() then calls changeKnob() for every knob except the knob that was changed with half of kDiff.
In the Fiddle I added a button to set and reset all 3 knobs to the initial 33. Note that there is some finetuning missing (sometimes the sum of all knobs will equal a little bit above or less 100) but that's maybe caused e.g. by the sum of all knobs not having 100 as initial value because of the missing 1%.