making jQuery code static for different pages

Question

Hello,

I am trying to use the jQuery Countown plugin to let my users now how much time they have left for a certain task.

So I use the following code to start the countdown with 30 minutes.

<script type="text/javascript">
$(function () {
 $('#defaultCountdown').countdown({until: '+30m'});
});
</script>

The problem is that the users are going to be navigating to diffrent pages for a given task, and if I just include this code on all the pages the timer would start from 30 minutes every time a user goes to a new page or refreshes the current one. I am new to jQuery so I would like to know if there is a way to make this code static so that is starts after a given event(in one page) and is and stops when an event on another page has occured?

EDIT: I should mention that the countdown will only be used for a usability test in a controlled environment so that the application will only be run on one computer.

Thanks!

Answer 1

This is not possible unless some synchronisation mechanism is provided:

• Each page passes to the other the time remaining in the query string. Initialisation code needs to be modified in order to start the countdown from the received parameter.
• Each page posts the time remaining in the server. This is more difficult to implement as it requires a persistense layer in the server.

What usually happens is to have the countdown in one tab/window and open the other pages in new ones. You can ask the user not to close the original window.

Answer 2

I see three solutions:
1) Give starting time from server side.
2) Load other pages with AJAX, so page will not refresh
3) Use frames (worst choice).

Answer 3

Client side solution:
Instead of counting up to a relative time, count to an absolute time and store it in a cookie.
Each page can lookup the value and start the timer.