magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Countdown


This lightweight extension shows a count-down cycle and optional events are triggered when the specified date and time are reached.

It comes in two versions:

- standalone, that includes all the visual part with many customization and styling.
- external (connection), that connects with other objects (usually text elements) in the page in order
  to allow the maximum designer's freedom.

Some features:

- The future date includes a specific time in that date.
- Selectable colors, fonts, sizes and styles for both the numbers and texts.
- Several display modes.
- Show and hides objects at specified delays (once the date and time are reached).
- Page replacement (like a redirector) at a specified delay.
- Custom JavaScript function call at a specified delay.
- Lightweight, no dependencies, no jQuery.
- Sample included.

...and more!


HTML 4.01 Transitional
W3C compliant


DEMO


How to use?

Standalone version:

1. Once you have designed your page as you usually do, drag and drop an extension instance in
    the workspace.
2. Optionally, in the extension properties dialog box, setup the visual style that matches your design.
3. Setup the future date and time that you want to trigger the events you need (like show and hide
    specific objects in the page).
4. Optionally, translate the labels to your language.
5. Preview or publish.

External connection version:

1. Design your page as you usually do.
2. Add in your page the counters holders (one element for the numeric part and one element for the
    text part); weeks, days, hours, minutes and seconds (x2); remember, if weeks elements are not
    specified, the count-down cycle will be shown in days, and so on...
3. In the extension properties dialog box, enter the (external) elements names in order to connect
    with them.
4. Setup the future date and time that you want to trigger the events you need (like show and hide
    specific objects in the page).
5. Optionally, translate the labels to your language.
6. Preview or publish.

Enjoy!
w3c compliant
© 2012-20 by MAGNA web studio • all rights reserved


new shop with