I basically need a jQuery UI progress bar to increment x amount every x seconds. After it reaches 100% it needs to run a function to get some content.
Basically a timer.
EDIT: I don't need code to fetch content. I already have that.
var progressBar = $('#progress-bar'),
width = 0;
progressBar.width(width);
var interval = setInterval(function() {
width += 10;
progressBar.css('width', width + '%');
if (width >= 100) {
clearInterval(interval);
}
}, 1000);
jsFiddle.
Assuming that you're using the jQueryUI progressbar:
var tick_interval = 1;
var tick_increment = 10;
var tick_function = function() {
var value = $("#progressbar").progressbar("option", "value");
value += tick_increment;
$("#progressbar").progressbar("option", "value", value);
if (value < 100) {
window.setTimeout(tick_function, tick_interval * 1000);
} else {
alert("Done");
}
};
window.setTimeout(tick_function, tick_interval * 1000);
Demo here
jQuery UI has a progress bar widget. You can set its value inside setInterval. Run clearInterval when complete event is raised.
Related
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);
}
}
I have a modal for when a button is clicked. The modal popups and closes when the timer is up, currently 5 seconds. However, I would like to create a progress bar which shows the timer going down, no numbers just a bar that moves.
Here is what I already have: https://jsfiddle.net/cde2cup0/. YOU MUST CLICK THE BUTTON 'ADMINISTRATION' for the modal.
And here's what I want to achieve. I know my Photoshop skills aren't on point, was rushing:
The white bar at the bottom is the progress bar.
I did try this but wasn't suitable for what I needed so didn't work.
var start = new Date();
var maxTime = 835000;
var timeoutVal = Math.floor(maxTime/100);
animateUpdate();
function updateProgress(percentage) {
$('#pbar_innerdiv').css("width", percentage + "%");
$('#pbar_innertext').text(percentage + "%");
}
function animateUpdate() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff/maxTime)*100);
if (perc <= 100) {
updateProgress(perc);
setTimeout(animateUpdate, timeoutVal);
}
}
Reference: jQuery progress timer bar
I don't know if correctly understood your question, but hope that helps:
Fiddle: https://jsfiddle.net/cde2cup0/2/
var progressBar = document.getElementById('myProgressBar');
function setAnimation(timeInSeconds, callbackFunction) {
var count = 0;
var interval = setInterval(function() {
if (count == timeInSeconds) {
callbackFunction();
clearInterval(interval);
}
progressBar.style.width = (100 * count / timeInSeconds) + '%';
count++;
}, 1000);
};
I'm making a random "spinner" that loops through 8 divs and add a class active like this:
https://jsfiddle.net/9q1tf51g/
//create random setTimeout time from 3sec to 5sec
var time = Math.floor(Math.random() * (5000 - 3000 + 1)) + 3000;
var exit = false;
function repeat(){
//my code
if(!exit){
setTimeout(repeat, 50);
}
}
My problem is, I want the function repeat to end slowly, to create more suspense. I think I can do this by raising the 50 from the timeout but how can I do this accordingly to the time left?
Thanks in advance!
You can try this.
$('button').on('click', function(){
var time = Math.floor(Math.random() * (5000 - 3000 + 1)) + 3000;
var anCounter = 1;
var anState = "positive";
var exit = false;
//var time1 = 50000;
setInterval(function(){time = time-1000;}, 1000);
function repeat(){
if(anCounter>7 && anState=="positive"){ anState="negative"}
if(anCounter<2 && anState=="negative"){ anState="positive"}
$('div[data-id="'+anCounter+'"]').addClass('active');
$('div').not('div[data-id="'+anCounter+'"]').removeClass('active');
if(anState=="positive"){anCounter++;}else{anCounter--;}
if(!exit){
if(time <1000)
setTimeout(repeat, 300);
else if(time< 2000)
setTimeout(repeat, 100);
else setTimeout(repeat, 50);
}
}
repeat();
setTimeout(function(){
exit=true;
},time);
});
Once you know that you need to exit the flow (exit is true ) you can trigger some animation by creating a dorm linear serials of you code. Usually this animation should not last more than 2 sec.
You were kind of on the right track but it'd be easier to check the time you've passed by and increment accordingly at a fixed rate. I set it to increase by 50ms every iteration but you could change that to whatever you like.
Fiddle Demo
Javascript
$('button').on('click', function() {
var time = Math.floor(Math.random() * (5000 - 3000 + 1)) + 3000;
var anCounter = 1;
var anState = "positive";
var elapsed = 0;
var timer;
function repeat(timeAdded) {
if (anCounter > 7 && anState == "positive") {
anState = "negative"
}
if (anCounter < 2 && anState == "negative") {
anState = "positive"
}
$('div[data-id="' + anCounter + '"]').addClass('active');
$('div').not('div[data-id="' + anCounter + '"]').removeClass('active');
if (anState == "positive") {
anCounter++;
} else {
anCounter--;
}
if (elapsed < time) {
timer = setTimeout(function() {
repeat(timeAdded + 50);
}, timeAdded);
elapsed += timeAdded;
}
else {
clearTimeout(timer);
}
}
repeat(0);
});
You can add a parameter called intTime to your function repeat and inside that function you can adjust the next timeout and call the repeat function with the new timeout. each time it gets called it will take 20 ms longer. however you adjust the increment by changing the 20 in
var slowDown=20; to a different number.
var slowDown=20;
setTimeout ("repeat",50);
function repeat(intTime){
//my code
if(!exit){
intTime=Math.floor (intTime)+slowDown;
setTimeout(repeat(intTime), intTime);
}
}
And then you will need to create another timeout for the exit.
var time = Math.floor(Math.random() * (5000 - 3000 + 1)) + 3000;
var exit = false;
setTimeout ("stopSpinning",time);
function stopSpinning(){
exit = true;
}
so the whole thing should look something like this
var slowDown=20;
var time = Math.floor(Math.random() * (5000 - 3000 + 1)) + 3000;
var exit = false;
setTimeout ("stopSpinning",time);
setTimeout ("repeat",50);
function repeat(intTime){
//my code
if(!exit){
intTime=Math.floor (intTime)+20;
setTimeout(repeat(intTime), intTime);
}
}
function stopSpinning(){
exit = true;
}
Fiddle Demo
Linear deceleration: //values are just an example:
add a var slowDown = 0; inside the click event handler
add slowDown += 1; inside the repeat function
pass 50+slowDown to setTimeout
Curved deceleration:
add a var slowDown = 1;and a var curveIndex = 1.05 + Math.random() * (0.2); // [1.05-1.25)inside the click event handler
add slowDown *= curveIndex; inside the repeat function
pass 50+slowDown to setTimeout
I have a progress timer bar in jQuery - here is an example http://jsfiddle.net/6h74c/
If I have time values in milliseconds, (600000 = 10 minutes, 300000 = 5 minutes, etc), how can I make the bar increment for that period of time?
In the jsfiddle link, I'm trying to set the progress bar to increase for 835000ms.
However, the setTimeout() determines how often the bar will increase and it is also basing it off of width percentage, which doesn't seem accurate - should I be doing this differently?
function updateProgress(percentage) {
$('#pbar_innerdiv').css("width", percentage + "%"); // probably not ideal
$('#pbar_innertext').text(percentage + "%");
}
function animateUpdate() {
perc++;
updateProgress(perc);
if(perc < 835000) {
timer = setTimeout(animateUpdate, 50); // probably not ideal either?
}
}
Fiddle Example
I would do something like:
var start = new Date();
var maxTime = 835000;
var timeoutVal = Math.floor(maxTime/100);
animateUpdate();
function updateProgress(percentage) {
$('#pbar_innerdiv').css("width", percentage + "%");
$('#pbar_innertext').text(percentage + "%");
}
function animateUpdate() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff/maxTime)*100);
if (perc <= 100) {
updateProgress(perc);
setTimeout(animateUpdate, timeoutVal);
}
}
Simply do some good old fashioned math. It doesnt seem right because you're giving width percentage as the value of the "tick" which will eventually be 835000! Meaning you eventually have a width of "835000%"!!!
Example
var timer = 0,
perc = 0,
timeTotal = 835000,
timeCount = 50;
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() {
clearTimeout(timer);
perc = 0;
animateUpdate();
});
});
jsFiddle Demo
Description
This just simply increases the progress every 10ms...since you know the time it takes, take that time and divide by 100 then make that your timeinterval in var timer = setInterval(updateProgressbar, 10);
HTML
<div id="progressbar"></div>
JS
var progress = 0;
var timer = setInterval(updateProgressbar, 10);
function updateProgressbar(){
$("#progressbar").progressbar({
value: ++progress
});
if(progress == 100)
clearInterval(timer);
}
$(function () {
$("#progressbar").progressbar({
value: progress
});
});
JS Fiddle Just for you
JS
var progress = 0;
var timer = setInterval(updateProgressbar, 8350);
function updateProgressbar(){
$("#progressbar").progressbar({
value: ++progress
});
if(progress == 100)
clearInterval(timer);
}
$(function () {
$("#progressbar").progressbar({
value: progress
});
});
You probably want something like this:
var currentTime = new Date().getTime();
perc = (currentTime - StarTime)/duration;
If set StartTime like that too you can calculate the percentage on every update.
I'm trying to gradually increase the elements of 2 id's in javascript using a Timeout. I can get one working but when trying to call another element into the same function it only does one iteration then crashes after the first recursive call.
I'm passing two id's for the elements. and I want the left element to gradually increase while the right element gradually increases in width.
Heres what ive got
function grow(elementL, elementR)
{
var htL = parseInt(document.getElementById(elementL).style.width,10);
var htR = parseInt(document.getElementById(elementR).style.width,10);
var movementL = htL + 5;
var movementR = htR - 5;
document.getElementById(elementL).style.width = movementL + 'px';
document.getElementById(elementR).style.width = movementR + 'px';
if (movementL > 1000) {
clearTimeout(loopTimer);
return false;
}
var loopTimer = setTimeout('grow(\''+elementL+','+elementR+'\')',50);
}
You could simplify this (removing the script-generation) by using setInterval -- this repeats the function call until you cancel it.
function grow(elementL, elementR)
{
var loopTimer = setInterval(function() {
if (!growStep(elementL, elementR)) {
clearInterval(loopTimer);
}
}, 50);
}
function growStep(elementL, elementR) {
var htL = parseInt(document.getElementById(elementL).style.width,10);
var htR = parseInt(document.getElementById(elementR).style.width,10);
var movementL = htL + 5;
var movementR = htR - 5;
document.getElementById(elementL).style.width = movementL + 'px';
document.getElementById(elementR).style.width = movementR + 'px';
if (movementL > 1000) {
return false;
}
return true;
}
(Fiddle)
Edit
Yeah, I guess the only problem with the OP code is that it passes a string to setTimeout, rather than the function itself:
var loopTimer = setTimeout(function() {
grow(elementL, elementR);
},50);
setTimeout('grow(\''+elementL+','+elementR+'\')',50)
would need to be
setTimeout('grow(\''+elementL+'\',\''+elementR+'\')',50)
// ^^ ^^
to work. But don't do that. Pass a function expression to setTimeout:
setTimeout(function() {
grow(elementL, elementR);
}, 50)