I have code on the link below, and I need to use it several times for any places. I set different value for bars, of course it works wrong. So, the bad answer is set id to each span and copy code for them several times.
Please, give me a tip how to rewrite code that I don't need to repeat again and again.
P.S. yes, I know about progressbar.js and other libraries but in this place I need to handle bar from html elements.
$(document).ready(function() {
$(".blackbar > span").each(function() {
var percentWidth = $('.blackbar > span').data('width');
$(this).animate({
width: $(this).data("width") + "%"
}, 800);
$({
countNum: 0
}).animate({
countNum: percentWidth
}, {
duration: 800,
easing: 'linear',
step: function() {
$('.barvalue').text(Math.floor(this.countNum)).append(" %");
},
complete: function() {
$('.barvalue').text(this.countNum).append(" %");
}
});
});
});
JSFiddle example
You want to loop over each .barbox, and then find the span for the bar and the span for the value, and use them appropriately...
$(document).ready(function(){
$(".barbox").each(function() {
var $barbox = $(this);
var $barSpan = $barbox.find('.blackbar > span');
var $barValue = $barbox.find('.barvalue');
var percentWidth = $barSpan.data('width');
$barSpan.animate({
width: percentWidth + "%"
}, 800);
$({countNum: 0}).animate({countNum: percentWidth}, {
duration: 800,
easing: 'linear',
step: function() {
$barValue.text(Math.floor(this.countNum) + " %");
},
complete: function() {
$barValue.text(this.countNum + " %");
}
});
});
});
https://jsfiddle.net/vsp6vuuh/2/
https://jsfiddle.net/SeanWessell/8919job4/
Set variables for $span and the $barvalue.
$(".blackbar > span").each(function() {
var $span = $(this);
var $barvalue = $span.closest('.b-item__barbox.barbox').find('.barvalue');
var percentWidth = $span.data('width');
$span.animate({
width: percentWidth + "%"
}, 800);
$({
countNum: 0
}).animate({
countNum: percentWidth
}, {
duration: 800,
easing: 'linear',
step: function() {
$barvalue.text(Math.floor(this.countNum)).append(" %");
},
complete: function() {
$barvalue.text(this.countNum).append(" %");
}
});
});
Related
i have this code and i want it to count in percentage, not in numbers how it is showed in the next code, how can i do it?
if someone could help me please, i'm not very good at Javascript
/* Counter - CountTo */
var a = 0;
$(window).scroll(function() {
if ($('#counter').length) { // checking if CountTo section exists in the page, if not it will not run the script and avoid errors
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');
},
complete: function() {
$this.text(commaSeparateNumber(this.countNum));
//alert('finished');
}
});
});
a = 1;
}
}
});
<div class="cell">
<div class="counter-value number-count" data-count="97%">1%</div>
<p class="counter-info p-small">Percentage</p>
</div>
Just add % after the text.
$this.text(Math.floor(this.countNum)+"%");
$this.text(this.countNum+"%");
$this.text(commaSeparateNumber(this.countNum)+"%");
or use css ::after (better way in my opinion because you can control the '%' style):
.counter-value::after{
content:'%';
}
And if your counter isn't percentaged - just divide it by the max value it can be and multiply by 100
I have a simple counter, which when in viewport, I want it to count up to a set number.
However, I have two issues...
Function declaration for reference:
function numberCounter() {
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 1500,
easing: 'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
};
Approach 1 isInViewport():
With the following code block, the function is being executed for every pixel scrolled within the div. This results in the counter jittering and not count up unless the user stops scrolling.
$(window).on(' scroll', function() {
if ($('.numberTicker').isInViewport()) {
console.log("test");
numberCounter();
$(window).off('resize scroll');
}
});
Approach 2 visible():
To resolve the above, I thought checking if the div is visible on viewport will execute the function once, however, the counter doesn't seem to work at all with this?
jQuery(document).ready(function($){
var ticker = $('.numberTicker');
if(ticker.visible(true)) {
numberCounter();
}
});
Where am I going wrong?
Full demo:
function numberCounter() {
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 1500,
easing: 'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
};
jQuery(document).ready(function($){
var ticker = $('.numberTicker');
if(ticker.visible(true)) {
numberCounter();
}
});
// $(window).on(' scroll', function() {
// if ($('.numberTicker').isInViewport()) {
// console.log("test");
// numberCounter();
// $(window).off('resize scroll');
// }
// });
.spacer {
height: 400px;
background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- is visible plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-visible/1.2.0/jquery.visible.min.js"></script>
<div class="spacer">scroll down</div>
<div class="numberTicker">
<h3 class="counter" data-count="50">50</h3>
</div>
I use two function on JQuery.
The first one is a counter (View here) and the second for start the counter when the Div is center on the window.
Counter
JS :
$('.counter').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);
}
});
});
HTML :
<div class="counter" data-count="10000">0</div>
https://jsfiddle.net/a52e24Ls/
*
*
Scroll detection
JS :
$(window).scroll(function() {
startCounter();
});
$(window).load(function(){
startCounter();
});
function startCounter(){
$('.contributorTitle').each(function(i) {
var bottom_of_object = $(this).position().top + ($(this).outerHeight()/2);
var bottom_of_window = $(window).scrollTop() + $(window).height();
if (bottom_of_object < bottom_of_window){
}
});
}
I thinks, i put the JS counter inside
if (bottom_of_object < bottom_of_window){
}
But it does not work. I want the counter start whan the window is center.
I have a fairly simple jquery animation on an absolute positioned div but it's only working the 1st time the function is called. Any subsequent times nothing happens.
var originalPixels = '80px',
right:80px,
newPixels = '50px', |
className = 'dangerous-attack-home';
$('.inner-animation-container').addClass(className);
$('.' + className).animate({
opacity: 1
}, 1000, function(){
$('.' + className).animate({
right: newPixels
}, 1000, function(){
$('.' + className).animate({
opacity: 0
}, 1000, function(){
$('.' + className).attr('right', originalPixels);
$('.inner-animation-container').removeClass(className);
});
});
});
Any ideas greatly appreciated
C
Actually, it works fine.
Just watch class names and variables carefully.
var originalPixels = '80px',
right = '80px',
newPixels = '50px',
className = 'dangerous-attack-home';
$('.inner-animation-container').addClass(className);
$('.' + className).animate({
opacity: 1
}, 1000, function(){
$('.' + className).animate({
right: newPixels
}, 1000, function(){
$('.' + className).animate({
opacity: 0
}, 1000, function(){
$('.' + className).attr('right', originalPixels);
$('.inner-animation-container').removeClass(className);
});
});
});
DEMO
Thanks for the input. The problem was actually the event not firing rather than a problem with the animation.
I have 2 containers whose widths change. Inside them, I have clickable elements. When a container is clicked, it resizes in an animation. I want to make it so that when a clickable element is clicked, its container resizes and scrolls to the clicked element. Here's a fiddle that shows this: http://jsfiddle.net/w7H3M/1/
However, it scrolls to the wrong position because of the resizing. Here's the event handler for the click:
<div id=left>...</div>
<div id=right>...</div>
$('#left').on('click', 'a', function () {
var node = $(this);
$('#left').animate({
width: 0.75 * $(document).width()
}, 800);
$('#right').animate({
width: 0.25 * $(document).width()
}, 800);
$('body').animate({
scrollTop: node.offset().top
}, 800);
});
$('#right').on('click', 'a', function () {
var node = $(this);
$('#left').animate({
width: 0.25 * $(document).width()
}, 800);
$('#right').animate({
width: 0.75 * $(document).width()
}, 800);
$('body').animate({
scrollTop: node.offset().top
}, 800);
});
Effectively, it does not work correctly because of the animation. The offset of the node you want to show at the top of the screen will change when the div expands. To achieve what you want, you need to set the scrollTop property when the animation completes. You can achieve this using the complete handler of jQuery.animate(). I've forked your jsfiddle to show you it. The only problem is that the two animationw now play one after the other instead of simultaneously.
$(document).ready(function () {
// generate content
var str = '';
for (i = 1; i < 100; i++) {
str += '<p>' + x100(i) + '</p>';
}
$('#left').html(str);
$('#right').html(str);
// end generate content
$('#left').on('click', 'p', function () {
var node = $(this);
$('#left').animate({
width: 0.75 * $(document).width(),
}, 800, 'swing', function() {
$('body, html').animate({scrollTop: node.offset().top}, 800);
});
$('#right').animate({
width: 0.25 * $(document).width()
}, 800);
});
$('#right').on('click', 'p', function () {
var node = $(this);
$('#left').animate({
width: 0.25 * $(document).width()
}, 800);
$('#right').animate({
width: 0.75 * $(document).width()
}, 800, 'swing', function() {
$('body, html').animate({scrollTop: node.offset().top}, 800);
});
});
});