Can you please take a look at this demo and let me know how I can stop the animation and interval after reaching 100% and filling the progress bar
I tried adding clearInterval(myVar); to the end of interval but this stops incrementting the percentage text
$(".progress-bar").animate({
width: "100%"
}, 3000);
var myVar=setInterval(function(){myTimer()},1);
var count = 0;
function myTimer() {
if(count < 100){
$('.progress').css('width', count + "%");
count += 0.05;
document.getElementById("demo").innerHTML = Math.round(count) +"%";
// code to do when loading
}
else if(count > 99){
// code to do after loading
count = 0;
}
}
clearInterval(myVar);
Don't use a timer for this. jQuery provides a way for you to listen to the progress of the animation:
$(".progress-bar").animate({
width: "100%"
},{
duration: 3000,
progress: function(_, progr) {
$('#demo').text( Math.round(100 * progr));
}
});
See your updated fiddle
NB: I changed your demo element to a span, as a p will break the % to the next line.
You need to put the code of clearing the interval in the block where you handle the finishing of loading.
var myVar = setInterval(function() {
myTimer()
}, 1);
var count = 0;
function myTimer() {
if (count < 100) {
$('.progress').css('width', count + "%");
count += 0.05;
document.getElementById("demo").innerHTML = Math.round(count) + "%";
// code to do when loading
} else if (count > 99) {
// code to do after loading
count = 0;
// loading is done, clear the interval
clearInterval(myVar);
}
}
Related
I am using this timer with a page loader. The problem is if a page finishes loading before the timer is up, then the next time you load the page, the timer starts where it left off the last time the page executed. I need to make sure the count variable is set to zero on page re-load. Thanks in advance
<script>
var myVar=setInterval(function(){myTimer()},1);
var count = 0;
function myTimer() {
if(count < 100) {
$('.progress').css('width', count + "%");
count += 0.025;
document.getElementById("demo").innerHTML = Math.round(count) +"%";
// code to do when loading
} else if(count > 100) {
// code to do after loading
count = 0;
}
}
</script>
You can wrap your code into a function which will reset the counter and start it again:
<script>
var myVar;
var count;
function restartTimer() {
count = 0;
clearInterval(myVar);
myVar = setInterval(function(){ myTimer() }, 1);
}
function myTimer() {
if(count < 100) {
$('.progress').css('width', count + "%");
count += 0.025;
document.getElementById("demo").innerHTML = Math.round(count) +"%";
// code to do when loading
} else if(count > 100) {
// code to do after loading
count = 0;
}
}
</script>
And now you just need to call restartTimer function wherever you want:
resetTimer();
In your case, you need to call it before every call to PHP page.
i have time progress bar. i use this code.i need time runner inside blue box.
how can i fix it, means when the yellow bar move depends on time need a time
display box.
var timer = 0,
perc = 0,
timeTotal = 2500,
timeCount = 1,
cFlag;
function updateProgress(percentage) {
var x = (percentage/timeTotal)*100,
y = x.toFixed(3);
$('#pbar_innerdiv').css("width", x + "%");
$('#pbar_innertext').text(y + "%");
}
function animateUpdate() {
if(perc < timeTotal) {
perc++;
updateProgress(perc);
timer = setTimeout(animateUpdate, timeCount);
}
}
$(document).ready(function() {
$('#pbar_outerdiv').click(function() {
if (cFlag == undefined) {
clearTimeout(timer);
perc = 0;
cFlag = true;
animateUpdate();
}
else if (!cFlag) {
cFlag = true;
animateUpdate();
}
else {
clearTimeout(timer);
cFlag = false;
}
});
});
#pbar_outerdiv { cursor: pointer; }
You already have the actual time in the updateProgress() method, so its as simple as changing the line setting the percentage to this:
$('#pbar_innertext').text((percentage / 100).toFixed(2) + " s");
JSFiddle: https://jsfiddle.net/McNetic/hnfRe/395/
Edit: With different browser, I now see the next problem: The animation can take much longer than the advertised time of 2500 ms (because of the very high update frequency of 1000 frames per second). So you should do less animation frames and calculate the percentage base on actual time measuring, like this:
https://jsfiddle.net/McNetic/hnfRe/396/
Check this JSFiddle. You can adjust the CSS: colours, sizes, etc to your needs.
Basically I put the text outside the #pbar_innerdiv in a span box.
<div id="pbar_outerdiv">
<div id="pbar_innerdiv"></div>
<span id="pbar_innertext">Click!</span>
</div>
Edit
So I edited the script and I hope now it matches your needs: JSFiddle Link. This is the script I used:
var timer = 0,
perc = 0,
percIncreaser,
timeTotal = 2500, //Only change this value time according to your need
timeCount = 1,
secondsCount=0,
cFlag;
function updateProgress(percentage,time) {
//var x = (percentage/timeTotal)*100;
$('#pbar_innerdiv').css("width", percentage + "%");
$('#pbar_innertext').text(time/1000 + "s");
}
function animateUpdate() {
if(perc < timeTotal) {
perc+=percIncreaser;
secondsCount+=10;
updateProgress(perc,secondsCount);
if(perc>=100) clearTimeout(timer);
else timer = setTimeout(animateUpdate, timeCount);
}
}
$(document).ready(function() {
$('#pbar_outerdiv').click(function() {
percIncreaser = 100/timeTotal*10;
if (cFlag == undefined) {
clearTimeout(timer);
perc = 0;
cFlag = true;
animateUpdate();
}
else if (!cFlag) {
cFlag = true;
animateUpdate();
}
else {
clearTimeout(timer);
cFlag = false;
}
});
});
I'm trying to make a few things scroll down the screen in javascript, however, upon execution, it just says a little and displays everything at once. So it's not clearing with the $("#Menu").html('') function and the setTimeout(function {},500) is just setting a timeout for the entire page instead of the code segment.
var MenuData = [
{'Name':'pictures','x':'30'},
{'Name':'blog','x':'50'},
{'Name':'contact','x':'42'}
]
;
var PositionArray = new Array();
$(document).ready(function () {
for (var count = 0; count < 1000; count++) {
$("#Menu").html('');
if (PositionArray[count] != null) {
PositionArray[count]++;
} else {
PositionArray[count] = 0;
}
setTimeout(function () {
for (var i in MenuData) {
$("#Menu").append('<div style="position:relative; left:' + MenuData[i].x + 'px; top:' + PositionArray[i] + 'px; ">123</div>');
}
}, 500);
}
});
Here's the fiddle: http://jsfiddle.net/LbjUP/
Edit: There was a little bit of error in the code that doesn't apply to the question. Here's the new one: http://jsfiddle.net/LbjUP/1/, I just moved PositionArray[count] to the setTimeout function as PositionArray[i]
As stated in the comments, you are creating 1000 timeouts for 500 ms at the same time - after 500 ms all of them will be executed. What you want is to increase the timeout for every scheduled function:
setTimeout(function() {
// do something
}, count * 500);
However, creating 1000 timeouts at once is not a that good idea. It would be better to use setInterval or call setTimeout "recursively" until a count of 1000 is reached, so that you only have one active timeout at a time.
var count = 0;
function update() {
// do something
if (++count < 1000)
setTimeout(update, 500);
// else everything is done
}
update();
Also, if you intend to create timeouts in a loop, be sure to be familiar with closures and their behavior when accessing counter variables after the loop ran.
Try
function recurse ( cnt ) {
for (var i in MenuData) {
$("#Menu").append('<div style="position:relative; left:' + MenuData[i].x + 'px; top:' + PositionArray[i] + 'px; ">123</div>');
}
if (cnt < 1000){
setTimeout(function () { recurse(cnt + 1); }, 500);
}
}
$("#Menu").html('');
if (PositionArray[count] != null) {
PositionArray[count]++;
} else {
PositionArray[count] = 0;
}
recurse(0);
You can also use setInterval
let i = 0;
const interval = setInterval(() => {
console.log(i);
i++;
if (i >= 10) {
clearInterval(interval);
}
}, 1000);`
I have this code:
$(document).ready(function(){
var count = 0;
var clicks= 0;
$(".press").click(function() {
count++;
clicks++;
console.log(count);
$('#animation2').html("My current count is: "+clicks);
if(count==1){
count=0;
if($('.animation img').css('left') == '100px'){
$('.congrats').css('display','block');
$("#startClock").css('display','block');
$(".press").css('display','none');
$('.animation img').css('left','0');
var counter=0;
span.innerHTML = counter;
}else{
$('.animation img').animate({ "left": "+=10px" }, 1 );
}
}
});
span = document.getElementById("count");
$("#startClock").click(function() {
clicks=0;
$("#animation2").css('display','block');
$('#animation2').html("My current count is: "+clicks);
var counter =30;
$('.congrats').css('display','none');
$('.press').css('display','block');
$(this).css('display','none');
setInterval(function() {
counter--;
if (counter >= 0) {
span.innerHTML = counter;
}
if (counter === 0) {
$("#startClock").css('display','block');
$('.press').css('display','none');
clearInterval(counter);
}
}, 1000);
});
});
This code have a counterdown whitch must be reset when I click button with id=startClock the second time. If I click twice setInterval decrease 2 second suddenly.
You are not using setInterval and clearInterval correctly. When you call setInterval, it returns an ID that you can use later with clearInterval. Here is an example :
var counter = 30;
var my_interval = setInterval(function(){
counter--;
if(counter <= 0) {
clearInterval(my_interval);
}
}, 1000);
This would countdown from 30 every second until counter reaches 0, then it would stop.
I suggest you go read about timeouts and intervals here
I have this code:
function CreateAndAnimateEnemyImg() {
var nh = Math.floor(Math.random() * w + 30);
var enemy = document.createElement('img');
enemy.src = 'enemy.jpg';
enemy.className = 'Enemy';
pane.append(enemy);
enemy.onload = function () {
enemy.style.top = nh + 'px';
}
}
$("#Start").click(function () {
var x = setInterval(function () {
CreateAndAnimateEnemyImg();
$('.Enemy').animate({ 'left': '-=20px' });
time--;
}, 20);
if (time == 0) {
timeElapsed = true;
clearInterval(x);
}
});
And this is the jsfiddle
I know my logic is wrong and I want u to help me to fix my problem on click an new image should be created and animated and a a counter should be initialize when the counter is set to 0 the creation of the new images should be stopped but the created images should still animate to left -20px
i have changed the position of the clear interval and adde some condition check
if (time > 0) {
$('.Enemy').animate({ 'left': '-=20px' });
time--;
console.log(time);
if(time == 0){
timeElapsed = true;
clearInterval(x);
}
}
check here Fiddle
Modified the Start click handler little bit. Enemy animate is moved to its own timer and inside the create new enemies interval added check to see if created time reached max.
Here is the new code, updated fiddle demo
$("#Start").click(function () {
intervalPoint = setInterval(function () {
CreateAndAnimateEnemyImg();
time--;
if (time == 0)
StopTimer();
}, 20);
setInterval(function () {
$('.Enemy').animate({ 'left': '-=20px' });
}, 20);
});
function StopTimer(){
timeElapsed = true;
clearInterval(intervalPoint);
time = 3;
}