Develop Reference

how to place a time display box in a time progress bar

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;
}
});
});

Modal timer progress bar

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);
};

Progress bar with duration and percentage

I want to create a progress bar that has a duration ( the time that it takes to finish the animation) and a percentage.
So I want this progress bar to take 3000ms to finish ( to get to 100%):
So far :
<div id="box"></div>
<script>
function start(){
var duration = 5000; // it should finish in 5 seconds !
var max = 100;
var i = 0 ;
var interval = setInterval(function(){
i++;
offset = (max*i)/duration;
console.log(offset);
$("#box").css("width", offset + "px");
$("#box").text(parseInt(offset) + "%");
if(i>=duration){
alert("done "+i);
clearInterval(interval);
}
}, 1);
}
</script>
It works but it takes way longer that 5000ms .
I've also added Jquery tag because I don't care if I do this with javascript or jquery
Thanks guys.

Feel free to tweak the below as needed, but the main problems are fixed. Namely, your interval shouldn't be running every 1 millisecond, and it should complete at 100%. The below will set your interval to always run at each 1%.
function start(){
var duration = 5000; // it should finish in 5 seconds !
var percent = duration / 100; // 1 percent of duration
var i = 0 ;
var interval = setInterval(function(){
i++;
$("#box").css("width", i + "px");
$("#box").text(i + "%");
if(i>=100){
alert("done");
clearInterval(interval);
}
}, percent);
}

The simplest solution could be is ot use jQuery's .animate()
function start() {
var duration = 5000; // it should finish in 5 seconds !
$("#box").stop().css("width", 0).animate({
width: 100
}, {
duration: duration,
progress: function(promise, progress, ms) {
$(this).text(Math.round(progress * 100) + '%');
}
});
}
start()
#box {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box"></div>
another solution will be is to look at the time difference
function start() {
var duration = 5000; // it should finish in 5 seconds !
var st = new Date().getTime();
var interval = setInterval(function() {
var diff = Math.round(new Date().getTime() - st),
val = Math.round(diff / duration * 100);
val = val > 100 ? 100 : val;
$("#box").css("width", val + "px");
$("#box").text(val + "%");
if (diff >= duration) {
clearInterval(interval);
}
}, 100);
}
start()
#box {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box"></div>
Same using requestAnimationFrame
function start() {
var duration = 5000; // it should finish in 5 seconds !
var st = window.performance.now();
window.requestAnimationFrame(function step(time) {
var diff = Math.round(time - st),
val = Math.round(diff / duration * 100);
val = val > 100 ? 100 : val;
$("#box").css("width", val + "px");
$("#box").text(val + "%");
if (diff < duration) {
window.requestAnimationFrame(step);
}
})
}
start()
#box {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box"></div>

Not sure if you're using it yet, but you could bootstrap to do this.
<div class="progress-bar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" >
var value = 0;
function start(){
value += 5;
$( ".progress-bar" ).css("width", value+"%").attr("aria-valuenow", value);
if ( value%5 == 0 ) {
return setTimeout(restart, 100);
}
if(value >= 100)
return;
else
setTimeout(restart, 50);
}
function restart() {
start();
}

I used the answer provided by some of you but you got one thing wrong on the progress bar. You need to change the "px" in jquery to be "%" otherwise the progress bar will only be 100px wide. Since I am using the Bootstrap Progress bar the values here amend to what is already there and fill up the progress wrapper as the page loads.
function start() {
var duration = 5000; // it should finish in 5 seconds !
var st = window.performance.now();
window.requestAnimationFrame(function step(time) {
var diff = Math.round(time - st),
val = Math.round(diff / duration * 100);
val = val > 100 ? 100 : val;
$(".progress-bar").css("width", val + "%");
$(".progress-bar").text(val + "%");
if (diff < duration) {
window.requestAnimationFrame(step);
}
})
}
start()

Countdown timer for use in several places at same page

I want to make a countdown timer, that can be used on several places in the same page - so I think it should be a function in some way.
I really want it to be made with jQuery, but I cant quite make it happen with my code. I have e.g. 10 products in a page, that I need to make a countdown timer - when the timer is at 0 I need it to hide the product.
My code is:
$(document).ready(function(){
$(".product").each(function(){
$(function(){
var t1 = new Date()
var t2 = new Date()
var dif = t1.getTime() - t2.getTime()
var Seconds_from_T1_to_T2 = dif / 1000;
var Seconds_Between_Dates = Math.abs(Seconds_from_T1_to_T2);
var count = Seconds_Between_dates;
var elm = $(this).attr('id');
alert(elm);
countdown = setInterval(function(){
$(elm + " .time_left").html(count + " seconds remaining!");
if (count == 0) {
$(this).css('display','none');
}
count--;
}, 1000);
});
});
});
EDIT 1:
$(document).ready(function(){
$(".product").each(function(){
var elm = $(this).attr('id');
$(function(){
var t1 = new Date()
var t2 = new Date()
var dif = t1.getTime() - t2.getTime()
var Seconds_from_T1_to_T2 = dif / 1000;
var Seconds_Between_Dates = Math.abs(Seconds_from_T1_to_T2);
var count = Seconds_Between_dates;
alert(elm);
countdown = setInterval(function(){
$(elm + " .time_left").html(count + " seconds remaining!");
if (count == 0) {
$(this).css('display','none');
}
count--;
}, 1000);
});
});
});
Do you have any solutions to this?

I'd probably use a single interval function that checks all the products. Something like this:
$(function() {
/* set when a product should expire.
hardcoded to 5 seconds from now for demonstration
but this could be different for each product. */
$('.product').each(function() {
$(this).data('expires', (new Date()).getTime() + 5000);
});
var countdown_id = setInterval(function() {
var now = (new Date()).getTime();
$('.product').each(function() {
var expires = $(this).data('expires');
if (expires) {
var seconds_remaining = Math.round((expires-now)/1000);
if (seconds_remaining > 0) {
$('.time-left', this).text(seconds_remaining);
}
else {
$(this).hide();
}
}
});
}, 1000);
});
You could also cancel the interval function when there is nothing left to expire.

Your problem seems to be that this doesn't refer to the current DOM element (from the each), but to window - from setTimeout.
Apart from that, you have an unnecessary domReady wrapper, forgot the # on your id selector, should use cached references and never rely on the timing of setInterval, which can be quite drifting. Use this:
$(document).ready(function(){
$(".product").each(function(){
var end = new Date(/* from something */),
toUpdate = $(".time_left", this);
prod = $(this);
countDown();
function countdown() {
var cur = new Date(),
left = end - cur;
if (left <= 0) {
prod.remove(); // or .hide() or whatever
return;
}
var sec = Math.ceil(left / 1000);
toUpdate.text(sec + " seconds remaining!"); // don't use .html()
setTimeout(countdown, left % 1000);
}
});
});

increment progressbar every x seconds

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.