Question

I am trying to modify this JQuery Countdown plugin to initialize itself when it has a value in its div or span. I need because I’m building an application that will allow people to have any amount of countdowns on their page and they chose what the target date/time is.

As a reference, I’m doing my web app in ASP.Net, but I don’t think it really matters for my problem.

The date will be coming from a Database but I will probably be converting it in seconds in the code-behind. Basically, I want to be able to throw something like

<div id="93" class="countdown">300</div> /* Countdown of 300 seconds, 5 minutes */
<div id="104" class="countdown">19483</div> /*Countdown of 5 hours, 24 minutes and 43 seconds */

and initialize all this from a single line of JQuery

$(".countdown").countdown();

or

$(".countdown").countdown("initializeFromValue");

I’m starting to get familiar with JQuery itself, but I have a hard time changing the javascript in the back. I have started creating a new part in the code. My issue here is to verify if the div has a value in integer and then initialize the value of the Countdown to that value, deleting that value after.

I have also been trying in a test page to put 4 countdown:

    $(function () {
        $("#countdown").countdown({ until: $("#countdown").text() });
        $("#countdown2").countdown({ until: $("#countdown2").text() });
        $("#countdown3").countdown({ until: $("#countdown3").text() });
        $("#countdown4").countdown({ until: $("#countdown4").text() });
    });

This is working since every countdown has an unique ID and I can also get its own text value. But it is not flexible. Can I proceed from there as well? I know for sure that

$(".countdown").countdown({ until: $(this).text() });

doesn’t work because it thinks that “this” is “document”.

Can someone please redirect me to some documentation/tutorial that could help me fix this problem I have? Thank you.

Answer 1

32bitkid has the right idea. Here is why:

when you use $(“.countdown”) you are selecting ALL of the divs that have class countdown. YOu can even assign them to an array and iterate through with a for loop but jquery gives us the .each() syntatic sugar so the idea is

 $(".countdown").each(function()   //loop through all divs with countdown as class
 {
   $(this).countdown({until: $(this).text()};  // "this" is not the specific div we are 
 }                                             //iterating on

Hope that helps with why his method works