SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Earth
    Posts
    724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Countdown script

    Hey,

    Below is code for a jquery countdown.. How can I use this method to loop through a mysql database table and display a timer for each record in the table based on a date/time stored in one of the fields?

    PHP Code:
    <script type="text/javascript" src="jquery.countdown.js"></script>

    <script type="text/javascript">

    $(function () {
    var newserver = new Date(2012, 6 - 1, 28); 
    $('#defaultCountdown').countdown({until: newserver}); 
    $('#removeCountdown').toggle(function() { 
            $(this).text('Re-attach'); 
            $('#defaultCountdown').countdown('destroy'); 
        }, 
        function() { 
            $(this).text('Remove'); 
            $('#defaultCountdown').countdown({until: newserver}); 
        } 
    );
    });

    </script>

        <div id="defaultCountdown"></div> 
    Cheers

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by _matrix_ View Post
    Below is code for a jquery countdown.. How can I use this method to loop through a mysql database table and display a timer for each record in the table based on a date/time stored in one of the fields?
    You would need to rewrite the code so that it's capable of working as multiple timers, and also by passing the required amount of time to each timer.
    That way the PHP can write scripting code that just calls the function, and pass the amount of time to each timer.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Earth
    Posts
    724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any chance of a bit of help to get started? Im not very knowlagable with jquery and ajax

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by _matrix_ View Post
    Any chance of a bit of help to get started? Im not very knowlagable with jquery and ajax
    When rewriting the code so that it's capable of working as multiple timers, we look for which parts will need to be able to change.
    From what I see in the code there are three parts. The date, the defaultCountdown and the removeCountdown.

    We can set up a function that accepts those parameters:

    Code javascript:
    function createCountdown(date, counter, remove) {
        ...
    }

    And adjust the contents within to work with those parameters.

    That way your PHP can then create the div section for each countdown timer, and use the following code to add a new timer:

    Code javascript:
    createCountdown(new Date(2012, 6 - 1, 28), 'defaultCountdown', 'removeCountdown');

    Or if you have the information as an array, possibly as JSON data from the PHP code, you can loop through the array creating countdowns from that:

    Code javascript:
    var countdownTimers = [
        {year: 2012, month: 6, day: 28, timer: 'countdownTimer1': remove: 'removeTimer1'}
        {year: 2012, month: 6, day: 29, timer: 'countdownTimer1': remove: 'removeTimer1'}
        {year: 2012, month: 7, day: 2, timer: 'countdownTimer1': remove: 'removeTimer1'}
    ],
        timerInfo,
        i;
    for (i = 0; i < countdownTimers.length; i += 1) {
        timerInfo = countdownTimers[i];
        createCountdown(new Date(timerInfo.year, timerInfo.month - 1, timerInfo.day), timerInfo.timer, timerInfo.remove);
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •