jQuery; click to show html content and countdown, and then additional content

Question

I wanted to create a link that would show content before showing a direct link on my forum.

Show link to download attachment
After clicking, it shows html content with 5 second countdown below
When countdown has finished, it shows a direct link.

I have tried the following code:

$("button").click(function() { 
  $(function() {
    var count = 10; 
    countdown = setInterval(function() { 
      $("p.countdown").html(count + " seconds remaining!").show("slow"); 

      if (count == 0) { 
        $("p.new").show("slow");
      } 

      count--; 
    }, 1000);
  });
});

Florian Margaine · Accepted Answer · 2012-04-04T12:35:22.683

What about a magic function?

To talk about @Bradley Foster's answer, calling several times setTimeout is not reliable. setTimeout will stop if your browser lags, so with four differents, you're not sure the order is going to be the right one. Nesting the setTimeout as I'm showing down there is better.

$('#button').click(function() {
    var seconds = 5, // Declare some variables for reuse
        el = $('#some_link')
    el.text(seconds) // Put it a five!
    // Name your function so that you can call it later
    setTimeout(function countdown() {
        // Your countdown is already at 5, so decrement it
        // Remember that you've already waited for 1000ms before reaching this line the first time
        seconds--
        el.text(seconds) // Set the new time left
        // If the countdown is not over, recall this function after 1000ms
        if (seconds > 0) {
            setTimeout(countdown, 1000)
        }
        // If it is over, display the link
        // Note that js will stop there and not try to call itself another time as it would with setInterval()
        else {
            el.html('<a href="link">Download</a>')
        }
    }, 1000)
})

Btw, in your question, when you're doing $(function() {..., you're actually doing $(document).ready(function() {.... I guess this is not what you wanted :)

Jsfiddle here: http://jsfiddle.net/Ralt/kTbcm/

Could you set up an html exapmple as well? It doesn't seem to work for me with the html I'm using. Thanks for your help! — user1312608, Apr 04 '12 at 12:31
Thanks a lot. That's very helpful. There is only one problem. I'd like to display additional content (an ad for example), and the content is changing after 1st second -> http://jsfiddle.net/kTbcm/1/ so I was wondering if it would be possible to either put the additional content in html or in another variable? — user1312608, Apr 04 '12 at 12:48

score 1 · Answer 2 · answered Apr 04 '12 at 12:33

1

You could do something like this:

HTML:

<button>Download</button>

<p class="countdown" />
<p class="link">
    <a href="www.stackoverflow.com">StackOverflow</a>
</p>

CSS:

p { display: none; padding: 50px; border: solid 1px black; }
p.countdown { color: red; font-size: 24px; }

jQuery:

var $countdown = $("p.countdown"),
    $link = $("p.link"),
    $button = $("button");

$button.click(function() { 

    $countdown.hide(0);
    $link.hide(0);        

    var count = 10,
        countdown = setInterval(function() { 

           $countdown.html(count + " seconds remaining!").show("slow"); 

           if (count == 0) { 

               $countdown.hide(0);
               $link.show("slow");
               clearInterval(countdown);

           } 

           count--; 

       }, 1000);

});

answered Apr 04 '12 at 12:33

Code Maverick

20,171
12
62
114

-1 for using `setInterval`. It is not reliable. See this excellent answer to check why: http://stackoverflow.com/a/731625/851498 – Florian Margaine Apr 04 '12 at 12:40
@FlorianMargaine - I'm sorry, but did you read your own link? He clearly states in his conclusion, "I would consider an interval for one-off animations I wanted to be as smooth as possible, whilst chained timeouts are more polite for ongoing animations that would take place all the time whilst the page is loaded." The OP's scenario is a one-off animation that should be as smooth as possible and setInterval fits the bill. – Code Maverick Apr 04 '12 at 12:43
@FlorianMargaine - In fact, I'd further state that I always prefer `setInterval()` to `setTimeout()`. Trying to keep time in javascript is never reliable and varies per browser. – Code Maverick Apr 04 '12 at 12:47
In the link, I was more referring to the following sentence: `Chained-Timeout gives a guaranteed slot of free time to the browser; Interval tries to ensure the function it is running executes as close as possible to its scheduled times, at the expense of browser UI availability.` I don't like to crash my clients' browsers. – Florian Margaine Apr 04 '12 at 12:48
@FlorianMargaine - Again, this is a one-off animation that couldn't possibility crash his client's browser. This definitely shouldn't be a downvote. – Code Maverick Apr 04 '12 at 12:52

score 0 · Answer 3 · answered Apr 04 '12 at 10:59

0

Look into jQuery's show and hide, and JavaScript's native setTimeout.

answered Apr 04 '12 at 10:59

Nick

6,316
2
29
47

score 0 · Answer 4 · answered Apr 04 '12 at 10:59

function countdownfunction() {
    $('#some_link').innerHTML = "5";
    $('#some_link').innerHTML = setTimeout("4",1000);
    $('#some_link').innerHTML = setTimeout("3",1000);
    $('#some_link').innerHTML = setTimeout("2",1000);
    $('#some_link').innerHTML = setTimeout("1",1000);

    $('#some_link').innerHTML = '<a href="newlink.php">download now</a>;
};

$('#some_link').click( countdownfunction() );

jQuery; click to show html content and countdown, and then additional content

4 Answers4