0

okay so im having trouble getting this countdown to run , i provide the date-time for jquery Date() to a function and i want it to run every second but for some strange reason im throwing undefined error. *note this is a 100% dynamic there could be 1 countdown on the page or 1000 for every user .

HTML MARKUP:

    <li class="clu">
    <legend>Clutch # 1</legend>
    <ul class='clutch-des'>
        <li class='it-d'>2012-05-12 23:55:59</li>
        <li class='it'>Remaining: <span class="timeremaining" id="dlvdfovwdfivwsf">
            <span class="hours">03</span>
            <span class="mins">09</span>
            <span class="sec">55</span>
            </span>
        </li>

     </ul>
</li>
<li class="clu">
    <legend>Clutch # 1</legend>
    <ul class='clutch-des'>
        <li class='it-d'>2012-05-12 23:55:59</li>
        <li class='it'>Remaining: <span class="timeremaining" id="dlvdfovwdfivwsf">
            <span class="hours">03</span>
            <span class="mins">09</span>
            <span class="sec">55</span>
            </span>
        </li>

     </ul>
</li>
<li class="clu">
    <legend>Clutch # 2</legend>
    <ul class='clutch-des'>
        <li class='it-d'>2012-05-12 23:55:59</li>
        <li class='it'>Remaining: <span class="timeremaining" id="dlvdfovwdfivwsf">
            <span class="hours">03</span>
            <span class="mins">09</span>
            <span class="sec">55</span>
            </span>
        </li>

     </ul>
</li>
<li class="clu">
    <legend>Clutch # 3</legend>
    <ul class='clutch-des'>
        <li class='it-d'>2012-05-12 23:55:59</li>
        <li class='it'>Remaining: <span class="timeremaining" id="dlvdfovwdfivwsf">
            <span class="hours">03</span>
            <span class="mins">09</span>
            <span class="sec">55</span>
            </span>
        </li>

     </ul>
</li>
​

JQUERY :

  var a = new Array(); var i = 0;
$('.timeremaining').each(function(index , el){
    var ID = $(this).attr('id');
    // get due date for countdown
    var dd = $(this).parent().parent().children('.it-d').text().split('Due :'); var dd = dd[1];
    var kids = $(this).children();
    $(kids).each(function(){
    a[i] = $(this).attr('class');
    i++;
    });

    Cdtd(x,a[0],a[1],a[2],ID);
});    
function Cdtd(x,hrd,md,sd,ID){

    var dd = new Date(x);
    var now = new Date();
    var dif = dd.getTime() - now.getTime() ;
    if(dif <= 0){
        clearTimeout(CountDown);
        alert('Clutch done!');
    }
    var sec = Math.floor(dif / 1000);
    var min = Math.floor(sec / 60);
    var hr = Math.floor(min / 60);
    var day = Math.floor(hr / 24);
    min %= 60;
    sec %= 60; 
    hr  %= 24;
    $('#'+ID+' '+sd).text (sec+ 'secs');
    $('#'+ID+' '+md).text (min+ 'mins');
    $('#'+ID+' '+hrd).text(hr+  'hrs' );
    var CountDown = setInterval('Cdtd(x,hrd,md,sd)',1000);

}
​
4
  • Can you set a Fiddle with your code? Commented May 13, 2012 at 4:48
  • jsfiddle.net/e8LCV its not working.... Commented May 13, 2012 at 5:07
  • So, your values for x, hrd, md, sd and ID are "x, hrd, md, sd and ID"? Commented May 13, 2012 at 5:12
  • Your fiddle code doesn't match the code on this page. Commented May 13, 2012 at 5:17

2 Answers 2

1

I finally got your code working here, with a few modifications. Also, remember to never use the same ID for an element; they need to each be unique.

Sign up to request clarification or add additional context in comments.

1 Comment

You are the best. next time you have a php error hit me up il take care of it for you!
0

Try this javascript library. His code is easy to read and customize as you want.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.