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
},
Related
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 this simple jquery logic, How would I convert that into pure javascript?
Besides I have to use this code in React with Typescript.
I have no clue where to start unfortunately. Any help would be extremely appreciated.
$('.counting').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 3000,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});
I've converted that until start animate function..
let counting = document.querySelectorAll(".counting");
let countingArray = Array.prototype.slice.call(counting);
countingArray.forEach((el) => {
let countTo = el.getAttribute("data-count");
//start animate...
I referred this code in https://codepen.io/shvvffle/pen/JRALqG
An animation function for you:
function animate(render, from, to, duration, timeFx) {
let startTime = performance.now();
requestAnimationFrame(function step(time) {
let pTime = (time - startTime) / duration;
if (pTime > 1) pTime = 1;
render(from + (to - from) * timeFx(pTime));
if (pTime < 1) {
requestAnimationFrame(step);
}
});
}
render is the callback function with which you expect to update new values;
from and to are the initial values and the target values of your animation;
duration is the continuance of the animation in time in miliseconds;
timeFx is the timing function from [0, 1] to [0, 1].
You may use it as:
countingArray.forEach((el) => {
let countTo = el.getAttribute("data-count");
animate(function(newValue) {
el.innerText = Math.floor(newValue);
}, 0, countTo, 3000, x => x);
});
I have this counter and I need it to be in decimals (instead of having 150000000 I'd like to have 150.000.000,00 or at least 150.000.000).
I tried replace this:
step: function() {
$this.text(Math.floor(this.countNum));
}
with this:
formatter: function (value, options) {
return value.toFixed(options.decimals);
}
but it didn't work. What can I do?
These are parts of my js and html interested by this:
var a = 0;
$(window).scroll(function() {
var oTop = $('#counter').offset().top - window.outerHeight/2;
if (a == 0 && $(window).scrollTop() > oTop) {
euro.className = "testo one column hide"
$('.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;
} else {
euro.className = "testo one column show"
}
});
<div id="counter" class="two columns counter-value" data-count="150000000">
</div>
toFixed is a good method, but it will only take care of the decimals at the end. To accomplish what you are describing you may want to use number.toLocaleString(). So your formatter would look like:
formatter: function(value, options) {
return value.toLocaleString(options);
}
You can check out the toLocaleString options in the MDN docs below:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
Hope that helps!
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%.