Amongst the settings provided, the alignment, language, label colour and margin can be changed. Labels can be toggled on or off with a simple checkbox setting. The stack settings are where you also provide your countdown date and time in Month Days, Year HH:MM:SS format. Unlike the original plugin, some modifications have been made to help the clock counter scale and fit better on mobile devices, using a CSS zoom technique.

StopWatch is designed to be placed inside another time sensitive stack, like TimeRelease, AdvancedPublisher or Expiry. You would typically configure this whole unit to be hidden after the date / time has expired. Certainly it is feasible to combine all these stacks with other design like background images, large fonts and bright text, to make a really big impact on users.

Example

This is an example of StopWatch counting-down to New Years day, 2024. From left to right, this is shown in days, hours minutes and seconds:
Obviously for best results, it is wise not to set a date a very long time into the future, otherwise the clock counter will be really wide! Our example above is quite extreme, and as a result the clock counter labels had to be disabled to prevent misalignment. Smaller clocks (using only double-digits) work better. Under normal circumstances, most users configure StopWatch to countdown for shorter time periods, of no more than a couple of months.

The clock time is taken from the web browser, via Javascript. Therefore if the clock on the computer being used to view the website is wrong, the clock shown in the page will be wrong too. For this reason, it is still best to place time-sensitive content within a PHP wrapper (like one of the suggested stacks). PHP takes its clock from the web server, so there is less-chance of this time being wrong and incorrect content showing. StopWatch is mostly intended for decoration on websites.

Setup

Follow these instructions for using StopWatch:
  1. Once installed into Stacks and RapidWeaver, open your Stacks library.
  2. Search for 'stopwatch'.
  3. Drag and drop a copy of the stack into your webpage.
  4. In the stack settings, configure the Countdown To setting (the date and time you want StopWatch to count-down to). This needs to be in Month Days, Year HH:MM:SS format.
  5. If you are publishing your website in a language other-than English, you may wish to change the language setting too. Or disable labels if they are not needed.
  6. Preview your webpage to check the clock is working. Export or publish your website when done.

If you mouseover the stack settings, small information tooltips are displayed explaining what each setting does.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.