Countdown Timer

A timer that allows for quick implementation in your everyday projects. Developed for in-house use at Banyan Hill Publishing, LLC. This program was written using the JavaScript OOP pattern. Basic knowledge of this pattern is a recommended, but not required.

Table of Contents

Features

top ↑

Screenshots

Deadline timer example Minutes timer example Expired message example Expired message example

top ↑

Getting Started

Usage

To use this timer on your site, you must insert the element and scripts into your document. Then, adjust the timer.settings object properties to your specifications.

You may set HTML to the displayHeading, expiredMessage, and redirectText properties.

Be sure to include https:// in your redirect url.

⚠️ The autoRedirect property:

If you set the autoRedirect property to true, then you must also include the redirectLink property.

Setting this property to false allows for you to omit the redirectLink property.

Example object when autoRedirect is set to true:

    timer.settings({
        timerType: "deadline",
        deadlineDate: "2022-10-01T09:00:00",
        displayHeading: "Your Offer <span class='nobr'>Ends In:</span>",
        expiredMessage: "<h2>Offer Expired</h2> <h2 class='h4'>We're sorry you <span class='nobr'>missed it!</span></h2>",
        redirectText: "Let\'s Get Started!",
        redirectLink: "https://www.banyanhill.com",
        autoRedirect: true,
        showDays: true,
        showHours: true
    });

See the full timer setup documentation below.

The timer stylesheet will be added to your document head dynamically.

top ↑

Deadline Timer

Implementation

First, insert the element and scripts into your document. You may place them anywhere within the opening and closing body tags.

Element:

<div id='deadlineTimer'></div>

Scripts:

<script src="https://cloudcollective.s3.amazonaws.com/scripts/assets/countdownTimer/countdownTimer.js.gz"></script>
<script type="text/javascript">
   timer.settings({
       timerType: "deadline",
       deadlineDate: "20XX-00-00T00:00:00",
       displayHeading: "Your Offer <span class='nobr'>Ends In:</span>",
       expiredMessage: "<h2>Offer Expired</h2> <h2 class='h4'>We're sorry you <span class='nobr'>missed it!</span></h2>",
       redirectText: "Let\'s Get Started!",
       redirectLink: "https://www.banyanhill.com",
       autoRedirect: true,
       showDays: true,
       showHours: true
   });
</script>

To initilize the Deadline Timer, you must set the timerType property to "deadline" Next, you must include and define the following property values on your timer object:

The following properties and are set to "true" by defualt. You may change them to "false" if you want to hide them:

You may choose to define the following property values on your timer, as they are optional:

⚠️ If you set the autoRedirect property to true, then you must also include the redirectLink property.

When the autoRedirect property is set to true and the redirectText is an empty string, the default hyperlinked text will say You will be automatically redirected...

When the autoRedirect property is set to false and the redirectText is an empty string, the default hyperlinked text will say Learn about our other services.

The redirectLink property default setting is hyperlinked to the Banyan Hill website.

top ↑

Minutes Timer

Implementation

First, insert the element and scripts into your document. You may place them anywhere within the opening and closing body tags.

Element:

<div id='deadlineTimer'></div>

Script:

<script src="https://cloudcollective.s3.amazonaws.com/scripts/assets/countdownTimer/countdownTimer.js.gz"></script>
<script type="text/javascript">
   timer.settings({
       timerType: "minutes",
       displayHeading: "Your Offer <span class='nobr'>Ends In:</span>",
       expiredMessage: "<h2>Offer Expired</h2> <h2 class='h4'>We're sorry you <span class='nobr'>missed it!</span></h2>",
       redirectText: "Let\'s Get Started!",
       redirectLink: "https://www.banyanhill.com",
       autoRedirect: true,
       minutesStart: 15,
       secondsStart: 0,
   });
</script>

To initilize the Minutes Timer, you must set the timerType property to "minutes". Next, you must include and define the following property values on your timer object:

You may choose to define the following property values on your timer, as they are optional:

⚠️ If you set the autoRedirect property to true, then you must also include the redirectLink property.

When the autoRedirect property is set to true and the redirectText is an empty string, the default hyperlinked text will say You will be automatically redirected...

When the autoRedirect property is set to false and the redirectText is an empty string, the default hyperlinked text will say Learn about our other services.

The redirectLink property default setting is hyperlinked to the Banyan Hill website.

top ↑

Custom Settings

top ↑

Notes

You should refer to the browser console to review errors and warnings if the timer does not behave as expected (Shift + Ctrl + K on Windows and Command + Option + J on Mac;

You can also right click on the broswer's page and use the menu to inspect the page).

top ↑

Special Thanks

top ↑

Want to Contribute?

Contributions are always welcomed!

If you'd like to contribute to this project, please email me at ataylor.banyanhill@gmail.com.

Please put "Countdown Timer: Banyan Hill" in the subject line, then briefly share what you'd like to contribute to this project and how you think it could be implemented.

Copyright @

top ↑