For all of my projects, there comes a point in time where we start winding down towards launch and the team begins watching the calendar very closely.  This can be both a stressful and exciting time, but I feel that having a little bit of celebration around this is something that is worth doing.

For my current project, I decided I wanted to setup a countdown page that I could install on any computer and just launch and let it run.  My acceptance criteria:

1. Must display a countdown to the date of launch.
2. Must be able to display the current live site.
3. Must be able to display an example of the upcoming site.
4. Must toggle between current live site and upcoming site views
5. Must refresh view automatically so that when the live site changes it is displayed.
6. Refresh rate must be configurable.
7. Launch date must be configurable.

Countdown

I started off with needing a good countdown example.  Tutorialzine had a nice sample countdown using jQuery that fit all my countdown needs.  I made some minor modifications to configure it for a specific date, and updated the text to be about a launch date instead of the number of days from now.

Displaying Live Site and Upcoming Site

The next two criteria were easy to accomplish.  I could use a simple iFrame to embed a URL on the page.  By extending the HTML example provided for the countdown, I added a few lines to show the current live site and the site that will be launched.  The example I have here is actually faked out using web.archive.org to show an old version of our company site.

<div id="livesite" class="sitepreview">
    <h2>Live Site</h2>
    <iframe class="refreshable" src="http://web.archive.org/web/20060207011254/http://www.nonlinear.ca/"></iframe
</div>
<div id="newsite" class="sitepreview">
    <h2>New Site</h2>
    <iframe class="refreshable" src="http://www.nonlinear.ca/"></iframe
</div>

Toggle between sites

To maximize real-estate, I wanted to ensure that only one of the sites displayed at a time.  This was accomplished using a jQuery function to refresh the frames which had a refresh rate parameter on it.  Additionally, it would toggle visibility of the frames so that only one would show at a time. The final step was invoking a refresh of the iframe so that we could see when the site changes.

Initializing visibility and refresh rate

//Number of milliseconds between refreshes of display
var siteRefreshRate = 20000;

//Initialize visibility
$("#newsite").hide();
$("#livesite").show();

//Start the GoLive refresher
$().refreshFrames(siteRefreshRate);

Toggle visibility

(function ($) {

//Define refresh function
$.fn.refreshFrames = function (refreshRate) {
    (function refresh() {
        //Refresh the frame that is going to be hidden, so it will be reloaded for the next show
        $("iframe.refreshable").attr("src", function (i, val) { return val; });

        //Hide if visible, show if not
        $(".sitepreview").toggle();

        //Continue looping at specified refresh rate
        setTimeout(refresh, refreshRate);
    })();
}

})(jQuery);

Look and feel

The CSS is configurable, but I left it with most of the defaults in place from the Tutorialzine example.  This is what it wound up looking like in my version:

Displaying the Live Site

Displaying the Upcoming Site

Download it!

You can find the source code here: https://github.com/jst-cyr/GoLiveCountdown.  It should be pretty easy to configure for your own usage, and then you’ll be able to stand up your countdown site in your team area as well!

Let me know what you think!