Using a Countdown (or Countup) Timer on a Freeway Page

We don't have a specific Freeway Action to create a Countdown Timer, but there are plenty of different Javascript solutions you can find on the web - and below are some steps to use on such solution along with links to some of the more simple ones to set up.

Most countdown and countup timers are very basic text-only solutions, and those that are not are usually heavily branded or have very limited customization options.

There are some elegant JQuery countdown/countup timers, but implementing JQuery in Freeway will require copying and pasting code into its correct location within the script and it will probably also need some hand-coding, so we can't offer specific support for using JQuery in Freeway.

All the solutions are slightly different. Some offer a way to link to a specified page when the counter reaches zero, others display a message and others can only count days rather than years, days, hours, minutes, seconds (and even mili-seconds). Unless you have good Javascript coding skills, you will need to find the Countdown/Countup Timer which suits you best - but you may need to compromise, as everyone has a different specific need and it is unlikely it will do exactly as you want or look exactly as you want unless you are prepared to write additional code yourself.

One sample Javascript Countdown Script

Visit the page at: http://www.hashemian.com/tools/javascript-countdown.htm

This is a free and simple Countdown/Countup Timer script (with no advertising, though the author states that he would appreciate a linkback to his page).

Click and drag across the code in the white panel of the Hashemian.com web page and copy it all. Go to Freeway, go to the page you want to use the timer item on, go to Insert>Markup item, paste the copied code into the HTML Markup window and click OK. This places an item of 100 pixels square on your page (which is the default size of all markup items) which has <H> in the top left corner (which signifies that it's a markup item). Resize the width of the item so the text will fit in the with (depending on how many lines you want the timer to display in) and then preview in a browser to see it working.

That basic code, however, needs to be adjusted to customize it for the date you want to count down (or up) to, what colors you want to use, etc. All the instructions for how to customize the timer are on that page or the page visited by clicking on the Countdown FAQ page. To edit the code, double-click on your markup item on your Freeway page and change the code in there for the custom values you want to use.

You will notice that the "BackColor" and "ForeColor" values in the code use standard HTML color names. You can see a list of all the colors in the standard list at http://www.w3schools.com/html/html_colornames.asp (click on the Color Name link to see the color's "hex" and "RGB" values). This means that to use Aquamarine (for example) you have the choice of using three different types of values:

"aquamarine"
"#7FFFD4"
or
"rgb(127,255,212)"

Note that you must use the double-quotes as shown above, and that you must use the same character structure for the hex/RGB values (otherwise the color will be ignored by a browser).

To change the size and font of the timer text, click on the Countdown FAQ page link on the Hashemian.com page. Question 1 deals with this - so you can copy the text in the solution to edit the code inside the markup item on your page.

The text you need to "wrap" with the <span> tag is highlighted in the screenshot below.



You need to change the text so it looks and reads like the code highlighted in the screenshot below.



Note that the new code shown in the markup item above specifies Verdana for the font and 20px for the text size - as you can see from the code used.

Finally, the author of the script has asked people to consider using the "countdown.js" file on their own site to prevent him receiving high usage warnings from their host. To do this, Control-click or right-click on the "countdown.js" hyperlink (which is just under the link to the Countdown FAQ page link on the main page) and choose Save Link As... to save it to your hard disk. You can then log on to your domain's server, go to the place where the .html files are uploaded to, create a new folder (call it "js" without the quotes), then upload the "countdown.js" file into that folder. In the code within your markup item you now need to change the "source" for the countdown script so it will be something like <http://www.mydomain.com/js/countdown.js> (where "mydomain.com" is the name of your domain).

Other Countdown/Countup solutions for markup items

As stated earlier, there are many different Javascript countdown/countup times you can find by Googling around. A selection of other easy-to-use scripts (which can be used in markup items in the same way as the Hashemian method) are as follows:

http://www.spiderwebmastertools.com/countdown.html
http://www.freecountdown.net/
http://www.skyrocketclock.com/premier/
http://www.7is7.com/otto/countdclock.html (use the "Generate iFrame Code" button to generate the code for a Freeway markup item)
http://www.countdownr.com/linking.html

Different ways to use markup code in Freeway

You may find code which doesn't work with the simple markup item method - and this may be because it requires two different types of markup code to be used. An example of this is the one at http://www.fabulant.com/downloadcenter/datecountdown/datecountdown.html.

With this code you need to copy all the code in "Step 3", go to Freeway, go to the page you want to use the timer on, go to Page>HTML Markup, choose Before </head>, paste the copied code into the main window and click OK to exit the Markup dialog. Then you need to copy the code in "Step 4", go back to Freeway, go to Insert>Markup item, paste in the code and click OK. The position of this item will determine where the countdown timer text will be placed on the Freeway page.

If you want to change the font, size, color, etc., of the text you can do this by first selecting and cutting the markup item on your page. You then need to draw a new HTML item on the page, type a space, paste the markup item into the text flow and then type another space. Go to Edit>Select All to select all the text in the item (including the two spaces) then you can set the font, color, size, etc. for the countdown timer text and change the alignment within the item. You can also add padding to the new item and colorize the item as you would with any normal HTML item.