CODEWITHSUNDEEP
jquery
Scott Paffley
Scott Paffley

Reputation: 21

Jquery Progressbar with countdown timer

Ive been searching high and low and was just wondering if it was possible to make the Jquery UI Progressbar interact with this piece of code.

Jquery Progress bar found here > http://docs.jquery.com/UI/Progressbar/

Code:

<script type="text/javascript"> 
jQuery(document).ready(function() {
$('#jQueryProgressbar1').countDown({
    targetDate: {
        'day':  25,
        'month': 12,
        'year': 2011,
        'hour': 0,
        'min':  0,
        'sec':  0
      }     
});

Basically the ui progressbar will read the day, month, year etc from the code and intergrate that with the progressbar's bar display......kinda like a countdown timer but with the progressbar.

Upvotes: 0

Views: 5700

Answers (1)

Mottie
Mottie

Reputation: 86423

Would something like this work? (demo)

var target = new Date('12/25/2011'),
    today = new Date(),
    daysToGo = Math.ceil((target.getTime() - today.getTime() ) / (1000*60*60*24)),
    // probably not the best, but it should work
    percent = 100 - daysToGo;

$("#progressbar").progressbar({
    value: percent,
    create: function(event, ui) {
        $('.ui-progressbar').append(daysToGo + ' days left!');
    }
});

Upvotes: 1

Related Questions