SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Simple Jquery Help!

    Hello,

    I'm a bit of a js newbie and I can't seem to figure this thing out!

    I need a function that will stop this count-down timer (jQuery plugin) when someone clicks on a regular old html link (href using an onclick event):

    Plugin info page:
    plugins.jquery.com/project/jquery-countdown

    Plugin code:

    Code:
    jQuery.fn.countdown = function(options) {
        /**
         * app init
        */
        if(!options) options = '()';
        if(jQuery(this).length == 0) return false;
        var obj = this;    
    
        /**
         * break out and execute callback (if any)
         */
        if(options.seconds < 0 || options.seconds == 'undefined')
        {
            if(options.callback) eval(options.callback);
            return null;
        }
    
        /**
         * recursive countdown
         */
        var countdown = window.setTimeout(
            function() {
                jQuery(obj).html(String(options.seconds));
                --options.seconds;
                jQuery(obj).countdown(options);
            }
            , 1000
        );
        
        /**
         * return null
         */
        return this;
    
    }
    Can you help me? Thanks if you can!

    Aaron

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    In order to affect the timer you need some way to gain access to the timeout event after it's been created.

    Currently a local function variable is being assigned the timeout event. This makes it impossible to gain access to it afterwards. So instead, you can adjust the script to assign a timer variable to the countdown function itself so that you can change the countdown value later on.

    Code javascript:
    /**
     * recursive countdown
     */
    clearTimeout(jQuery(obj).countdown.timer);
    jQuery(obj).countdown.timer = window.setTimeout(
    	function() {
    		jQuery(obj).html(String(options.seconds));
    		--options.seconds;
    		jQuery(obj).countdown(options);
    	}
    	, 1000
    );

    The reason for clearing the timeout is so that if you later on want to assign it a different countdown number, the existing timeout would still trigger, so clearing any pre-existing timeout helps to clear things up so that the new countdown value can be set.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help Paul! I think this makes sense to me. I'll give it a try and see what happens. If it works, I'll report back.

    Aaron

  4. #4
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, so I'm still not figuring this out... How do I grab the countdown function later and get it to stop? I have included this script in an html page, and want it to stop when an onclick event fires. Thanks again for your help!

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You haven't said how you're calling the function, so I'll go by the example on the countdown page.

    If you're calling the countdown function as follows

    Code javascript:
    $('span.countdown').countdown({seconds: 30});

    Then after you have made my code update to the countdown script, you will be able to use the following to cancel the countdown when a link is clicked.

    Code javascript:
    $('a').click(function () {
        $('span.countdown').countdown({seconds: 0});
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for your help Paul! I'll give it a shot.

  7. #7
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked! Thanks for your help.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    That's great to hear.
    Thank you for coming back to let us know about the good news.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

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
  •