Slick Countdown Timer

Todd1 · December 21, 2012, 4:41pm

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ashley2 · February 26, 2013, 5:15pm

Thanks for this Todd, I’ve just been looking for a countdown timer for Freeway, possibly as an action, but this seems much cooler than anything else I’ve seen so far.

Ashley

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Todd1 · February 26, 2013, 5:31pm

You’re welcome, Ashley.

Todd

Thanks for this Todd, I’ve just been looking for a countdown timer for Freeway, possibly as an action, but this seems much cooler than anything else I’ve seen so far.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Richard · February 27, 2013, 6:24pm

Wow, that’s a real beauty … countdown items like this would be great when actionized

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ashley2 · February 27, 2013, 6:44pm

Yes an action for this would be very useful but I wouldn’t have a clue how to create one. It would take somebody with far greater knowledge of Freeway. Perhaps Softpress?

Ashley

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

TeamSDA2 · January 23, 2014, 4:20pm

Hello…

How would you go about reversing this so it counts down from let’s say today to March 1st?
Also you could you display days, hours and min?

Kind regards, Dave

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 23, 2014, 8:39pm

Here’s how you do the math for a countdown timer:

http://scripty.walterdavisstudio.com/countdown.html

Not sure how you would apply that to this HTML and CSS fiesta, but this gets you a counter that goes in the direction you wanted. This example resets itself to 7 days from now each time you reload the page, but you would create a specific date by changing the first two lines of the script to read this:

var d = new Date('2014-01-30T19:19:26.224Z');

Obviously, change that date string to the exact time and date you want your counter to run out.

Walter

On Jan 23, 2014, at 11:20 AM, TeamSDA wrote:

Hello…

How would you go about reversing this so it counts down from let’s say today to March 1st?

Also you could you display days, hours and min?

Kind regards, Dave

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

TeamSDA2 · January 23, 2014, 11:08pm

Hello Walt . . . Thank you. What you have demonstrated seems a lot simpler. After inspecting the sample page you provided would I just use the javascript found their? Also I see you hand styled this, could I do this through Freeway instead?

Kind Regards,
Dave

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 24, 2014, 2:22am

Yes and yes. Looking at the code, here’s what you would need to do. Draw (or insert) an HTML box on the page where you want the counter to appear. Name this box ‘counter’, using the Name / ID field of the Inspector. Double-click into that box, and type two spaces, then click the left arrow once. From the main menu, choose Insert / Markup Item and paste in the following template string:

<span>#{days_0}</span><span>#{days_1}</span> <span>#{hours_0}</span><span>#{hours_1}</span>:<span>#{mins_0}</span><span>#{mins_1}</span>:<span>#{secs_0}</span><span>#{secs_1}</span>

Select the entire space-markup item-space sandwich, and apply your desired font and styling. Apply Protaculous 2 to the page, click in the DOM Loaded Observer editor, and paste in the JavaScript:

gist.github.com

https://gist.github.com/walterdavis/8590960

gistfile1.js

var d = new Date('2014-01-30T19:19:26.224Z');
var t = new Template($('counter').innerHTML);
function tick(){
  var time = {days_0: 0, days_1: 0, hours_0: 0, hours_1: 0, mins_0: 0, mins_1: 0, secs_0: 0, secs_1: 0};
  var secs = Math.floor((d.getTime() - new Date().getTime()) / 1000);
  if(secs > 0){
    var days = Math.floor(secs / 86400);
    time['days_0'] = (days.toString().length == 1) ? 0 : days.toString().slice(0,1);
    time['days_1'] = days.toString().slice(-1);
    secs -= days * 86400;

This file has been truncated. show original

Adjust the first line of the script to a real expiration date. Publish, and you should immediately see the counter start counting down. Pretend you’re McGuiver, break out your duct tape, and defuse the bomb! Those span tags are in there to give you something to hang your styling on – if you create a style called #counter span (using the Tag-only style trick) you will be able to create the rounded rectangle number panels if you like that look.

Walter

On Jan 23, 2014, at 6:08 PM, TeamSDA wrote:

Hello Walt . . . Thank you. What you have demonstrated seems a lot simpler. After inspecting the sample page you provided would I just use the javascript found their? Also I see you hand styled this, could I do this through Freeway instead?

Kind Regards,
Dave

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

TeamSDA2 · January 24, 2014, 2:55pm

Thank You Walt. . . I will give this a go.

Kind Regards,
Dave

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options