Smart Countdown version 3.0 is distributed as a component/module package and it is not an update for Smart Countdown 2.5. Both versions can be installed on the same Joomla site. If you are currently using Smart Countdown 2.5 on your site you can start testing version 3.0 without losing old version modules and configurations. When and if you are happy with the new module version you can unpublish and uninstall version 2.5 modules from your site.

The reason why there is no upgrade from Smart Countdown 2.5 to 3.0 is that version 3.0 uses quite different (and reduced) set of options which cannot be automatically imported from version 2.5 on upgrade, thus making such an upgrade look mostly like a fresh install but with a significant flaw - the original version would be overwritten and custom configuration lost. You can read more about configuration here.

Application structure

Smart Countdown 3.0 is a package of a component and a module. The component is responsable for handling AJAX requests from the module when it looks for the next event for the countdown. That is why the front-end part of the component is not visible on site and doesn't have menu items. The back-end (administration) implements a simple Smart Countdown modules control panel, where you can see some basic information on Smart Countdown module instances on your site and also preview module output - useful if you are experimenting with settings: you can unpublish a module first and refresh it in preview after you update settings. All these changes will not be visible on your site until the module is published again.

The module is a tipical Joomla module, similar to Smart Countdown 2.5 but with a different set of options and a lot of new or improved features. When you first install Smart Countdown 3 package both component and module will be installed and enabled. Do not disable the component - it is required by the module, you will still be able to configure and save module settings but the module will not work without the component.

Smart responsive feature

Many web applications base their responsive behavior on device (browser) screen (width) and / or device type. This is a reasonable approach because it allows designers to make a rough guess about application layout and scale that will better match any certain device. This is how responsive templates basically work. Making a module responsive within a responsive Joomla template is a slightly different task because you never know the width of the template position a module will be published to and because the same position can change its width on different screens or screen orientations. Let's see an example: 

  • case 1. You embedd a module into an article via "" directive so that the module occupies at least a significant part of the page horizontal space (or the whole page width if this page has no sidebars). When viewed on iPad landscape it can be about 900px wide.
  • case 2. You publish a module in a sidebar and view the page on a desktop with a screen width > 1400px but the position width available for the module may be as low as 300px.

It is clear that an assumption on best module layout based on browser width could be wrong in similar scenarios.

Smart Countdown 3 implements another approach: it doesn't care about browser / screen width but simply checks current horizontal space available in its template position and selects correct layout and scale on the fly basing on the rules defined in layout preset selected in module options. There are several layout presets built-in to choose from and new presets can be created easily. Layout presets define more counter layout settings along with responsive behavior rules and are covered in detail here.

Months and years in counter intervals

Smart Countdown 3.0 can be configured to display years, months and weeks along with traditional days, hours, minutes and seconds in counter interval value. Keeping weeks apart as a simple case, months and years display is not a trivial task. In many cases the values obtained depend on the order of time units addition when going from one date to another. Let's see an example:

  • start date: FEB 28 2015
  • end date: APR 01 2015

Problem: calculate dates difference in months and days, both start and end dates included.

  • Solution 1: first add entire months to start date and then express the rest of the interval in days we get 1 month (FEB 28 -> MAR 28) + 4 days (MAR 29, 30, 31, APR 01).
  • Solution 2: go in reverse order and first substract entire months from the end date and then express the rest of the intervals in days we get 1 month (APR 01 -> MAR 01) + 1 day (FEB 28 is the last day of month in 2015).

Smart Countdown 3.0 uses the first method for both countdown and count up modes, i.e. always calculates dates difference starting from the earlier date and adding entire time periods starting from the biggest one (years) and expressing the rest of the difference in smaller units (months, weeks and/or days). In countdown mode the earlier date is "now" (page view moment) and the later date is the event date, in count up mode the earlier date in the event date and the later date is "now". Time difference is omitted from this discussion for the sake of simplicity.

Module configuration allows users to choose which time units to display in counter intervals. In some special or fancy scenarios one can configure the counter to show only seconds left/passed, only years, days and seconds, etc. A more natural use of this feature would be to hide seconds (avoid per-second digit animation which could distract your site visitors) or other small time units from display if target event is in far future and its nature doesn't suppose hour-based precision, e.g. for all-day events or alike. In any case, whatever set of time units you select for display in counter options, the time interval will be correct - this is guaranteed by date and time difference calculation algorithm implemented in Smart Countdown 3.0

Using Smart Countdown 3.0 on sites with caching enabled

Event date and time along with current time is requested via AJAX when the module is rendered on the page. If the module is connected to event import plugins AJAX request for the next event in timeline is also made each time current event is over. AJAX responses are not cached, that is why there is no need to configure your caching application to exclude certain module position(s) from caching or perform other complex caching algorithm fine-tuning. You can now safely publish the module to a cached template position or page, it will show correct time interval even if entire page HTML is taken from cache.

Module Preview

Module preview is another powerful feature in Smart Countdown 3.0 and it makes the life of a site administrator easier. Once a new Smart Countdown module instance is saved "Preview" button will appear at the bottom of "Layout" pane in module configuration. A click on this button will open a new window with the module rendered using recently saved settings. You don't have to publish the module to be able to open it in preview window, so managing unpublished modules is much safer. You can experiment with options, layout and styles, save new settings, make more changes (even those you are not sure about) without the risk of breaking you site layout - an unpublished module will not be displayed in your site front-end anyway.

It is recommended to use "Preview" feature on a desktop (in a windowed environment) where you can change preview browser window size. By resizing preview window you can simulate conditions when the template position where you are going to publish the module changes its size (this is a standard behavior of responsive templates). Preview window has an information and control box on top, the rest of the window space is occupied by the module. Think of this space as if it were a position in your template where the module will be published. You can open your site front-end in another browser window to get the idea about the given position responsive behavior, so you can make a good estimate of the module resulting layout if you make the preview window as wide (or as narrow) as the real template position.

Preview mode renders a real module, reading all settings except position, published state and publish-up/publish-down dates from current module configuration. That is why in some cases the module can be hidden in preview window. This is not an error, if you publish such a module to a real template position it will behave the same way. Check module settings - mostly event date and time and counter display modes - and make sure they are compatible. For example, if you choose "show countdown only" as counter display mode but event date is in past, the module will be automatically hidden. Also if the module instance has event import plugin(s) enabled, check that there are current events in the calendar plugins are connected to.