How can I make a javascript/jQuery countdown that is only visible after X minutes?

Question

Hi folks,

After the users have been inactive for X minutes, I need to display the number of minutes left till the session times out in ASP.NET.

For e.g. after 5 minutes, they will see 'You have been inactive for 5 minutes. You will be logged off after another 10 minutes'. Each minute after that, the message will be updated.

I found a jQuery plugin called 'jQuery Countdown', but how can I make it visible only after X minutes have passed?

When the page loads, I will use RegisterStartupScript while passing Session.Timeout as a parameter to this function.

Thanks for your help.

Answer 1

you can use a regular javascript setTimeout function

and set it to 5 minutes...

and put a function there that will make your countdown visible

Answer 2

You could fade it in after 5 minutes using .delay() like this:

$("#timer").delay(299600).fadeIn(function() { // 5 * 60 * 1000 - 400ms for fade
  $(this).countdown({ ... countdown options ... });
});

This is basically just doing a setTimeout() behind the scenes on the queue, just a short/simple way of doing the same. That being set, setTimeout(showFunc, 300000) will do the job just fine.

Answer 3

var interval = setInterval(displayInactiveMessage, 300000);

300000 = 5 minutes in milliseconds.

Then clearInterval(interval) to stop it from running every 5 minutes.

Yo can you the same mechanism for you 1 minute updates - just don't clear it.