Search code examples
jqueryfunctionparametersprogress-barcountdown

jquery issue with countdown timer and progress bar

I am attempting to use a jquery plugin https://github.com/eAdnan007/jquery-countdown Below is my html and JS. I have tried multiple settings and being fairly new to JQuery am not having any luck. I know my settings are wrong but can't seem to figure out what exactly they are supposed to be.

HTML

<div class="progressWrap">
    <div class="fullbar"></div>
    <div class="progress deal1" style="width:0%"></div>
</div>
<div class="timer deal1"></div>

JS

$('.timer.deal1').countdown({
end_time: "2014/12/10 16:06:28",
progress        : 1,
update_progress: (20,$('.progress.deal1')),
onComplete: function() {
            $('.timer').replaceWith("<div class=\"timer ended\">Deal Over</div>");
    }    
});

I know I need to have both progress: and update_progress but to me the directions inthe git are far from clear. Bewlow are the instructions from the above linked git:

progress

There dom element which should display the progressbar. False if you don't want to display.

update_progress

Function to process the progress for the preogress bar. It receives two arguments, Percentage of progress (0-100) and The dom element containing the progressbar.

Any help is appreciated as I am now lost and know my settings are completely wrong. Thanks!

UPDATE

Here is a JSFiddle with some css added so you can see what is going on: http://jsfiddle.net/L7n5hc43/1/

I have linked the fiddle to the External JS mentioned in the git. I get some errors in the console, but again I do not know enough about JQuery to be able to really trouble shoot the issue.

Solution

  • Ok I figured it out thanks to eAdnan007 (the owner of the plugin) for anyone that is looking, here is a JSFiddle that shows the updated code in action http://jsfiddle.net/L7n5hc43/4/

    Here is the updated JQuery:

    $('.timer.deal1').countdown({    
    end_time: '2014/12/19 17:00:00', //Time Progress bar is at 100% and timer runs out
    start_time: '2014/12/14 08:00:00', //Time when the progress bar is at 0%
    progress: $('.progress.deal1'), //There dom element which should display the progressbar.
    onComplete: function() {
            $('.timer.deal1').replaceWith("<div class=\"timer ended\">Deal Over</div>");
    }    
});

    I needed to add the start_time for when the progress bar would be 100%, you can play with the date and time to get the progress bar to be less or more on your actual start time. I would use this for increasing or decreasing the progress if there is a delay or advancement in progress but not in the end date.

    Also the "update_progress" was not needed just the "progress" function to identify the proper DOM element.

    Thanks everyone for stopping by and trying to help out!