Interval timer

Question

I have a jquery timer on my page that counts from 10 to 0. After 5 seconds I want to show a warning, and then after 0 seconds I want to show another message.

I used the code below, which will count down in the form field and also give warnings, however the countdown stops when warnings appear:

$(function(){ var count = 10; countdown = setInterval(function(){ $("#Exam_Timer").val(count + " seconds remaining!"); if (count == 5) { alert('Only 5 Seconds Left'); } if (count == 0) { alert('Times Up') } count--; }, 1000); }); 

Can someone let me know how I will restructure this so that warnings don't stop the countdown?

I tried to include the alert in a separate function, but that didn't help. I created a script:

http://jsfiddle.net/CQu7T/

Answer 1

You cannot do this with alert , because it stops the execution of scripts . However, you can achieve this using jQuery UI dialogs. Check out the following demo

Working demo

Answer 2

Warnings are strange things that essentially violate the default browser settings (controls and scripts) when they are displayed.

What you can do is place a warning in another element using jquery html

 $(function(){ var count = 10; countdown = setInterval(function(){ $("#Exam_Timer").val(count + " seconds remaining!"); if (count == 5) { $("#message").html('Only 5 Seconds Left'); } if (count == 0) { $("#message").html('Times Up') } count--; }, 1000); }); 

See jsfiddle . You can style this element with css so that it looks like a modal window.