Thread: Countdown

    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Location
    kerala, India
    Posts
    76
    Rep Power
    2

    Countdown


    Hi,

    1) Below script is countdown script. This works fine now. But my problem defined below Please Help.

    <script type="text/javascript" src="js/ajaxPost.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.countdown.pack.js"></script>
    <script type="text/javascript">
    function clock() {
    //alert("test");
    $(function () {

    shortly = serverTime2();
    $('#countdown').countdown({until:shortly,onExpiry:expiry,onTick: watchCountdown, serverSync: serverTime, layout:


    '<div id="timer">' +
    '<div id="timer_hours" class="timer_numbers">{hnn}</div>'+
    '<div id="timer_mins" class="timer_numbers">{mnn}</div>'+
    '<div id="timer_seconds" class="timer_numbers">{snn}</div>'+
    '<div id="timer_labels">'+

    '<div id="timer_hours_label" class="timer_labels">hours</div>'+
    '<div id="timer_mins_label" class="timer_labels">mins</div>'+
    '<div id="timer_seconds_label" class="timer_labels">secs</div>'+

    '</div>'



    });
    });

    }
    clock();

    function serverTime() {
    var time = null;
    // $.ajax({url: 'http://localhost/london/serverTime.php',
    $.ajax({url: 'http://www.londontradeprint.com/serverTime.php',
    async: false, dataType: 'text',
    success: function(text) {
    time = new Date(text);
    }, error: function(http, message, exc) {
    time = new Date();

    }});
    //alert(time);

    return time;
    }
    function serverTime2() {
    var time = null;
    $.ajax({url: 'http://www.quinnsprojects.com/london/serverTime2.php',
    // $.ajax({url: 'http://www.londontradeprint.com/serverTime2.php',
    async: false, dataType: 'text',
    success: function(text) {
    time = new Date(text);
    }, error: function(http, message, exc) {
    time = new Date();
    }});
    return time;
    }
    function watchCountdown(periods) {
    /*alert(periods[4]);
    alert(periods[5]);
    alert(periods[6]); */
    if(periods[4]==0 && periods[5]==0 && periods[6]==0 )
    {
    $('.proFormtable_sub').hide();
    $('.countdownOuter').hide();
    }
    }

    function expiry(){

    $('.proFormtable_sub').hide();
    $('.countdownOuter').hide();
    }
    </script>

    <div id="countdown"></div>
    /////////////////////////////////// code ends //////////////////////////////////////////////////////////////////

    2) My problem is how to show more than two countdown?

    We use while loop code is given below but not working.
    I know this jquery is wriitten for one countdown.
    How will we write more than one countdown code?
    Please help.

    <?
    while(condition)
    {
    ?>

    <div id="countdown"></div>

    <?
    }
    ?>


    Thanks
    Sarath_PHP
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,176
    Rep Power
    184
    Turn $("#countdown") into $(".countdown"); where "#countdown" only represented 1 element's id, but by changing "countdown" to a className; you will be able to have multiple instances of the countdown clock. Be sure to change this:
    Code:
    <div id="countdown"></div>
    Too... this:
    Code:
    <div class="countdown"></div>
    And... use this element, as needed; to display additional countdown clocks.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Location
    kerala, India
    Posts
    76
    Rep Power
    2
    Originally Posted by web_loone08
    Turn $("#countdown") into $(".countdown"); where "#countdown" only represented 1 element's id, but by changing "countdown" to a className; you will be able to have multiple instances of the countdown clock. Be sure to change this:
    Code:
    <div id="countdown"></div>
    Too... this:
    Code:
    <div class="countdown"></div>
    And... use this element, as needed; to display additional countdown clocks.
    Thanks

IMN logo majestic logo threadwatch logo seochat tools logo