Dec 10
20
The jQuery T-minus Countdown has grown up from a little widget to a full featured WordPress Plugin, complete with shortcode as demonstrated below:
Some of the new features include:
- Multiple instance sidebar widgets
- HTML content areas located above and below the countdown
- Shortcode for placing countdown in a page or post
- Launch Event HTML that can replace the above, below or entire countdown areas
The Plugin
Download the jQuery T(-) CountDown Plugin from Twinpictures.
Download the jQuery T(-) CountDown Plugin from the WordPress Plugin Repository.
The Sidebar Widget
jQuery T(-) Countdown 2.0 Widget - Compact View
jQuery T(-) Countdown 2.0 Widget - Expanded View
Countdown Widget Styles
The [tminus] Shortcode
The shortcode is used to place a countdown in a post or page. In the simplest form the shortcode is: [tminus t="DD-MM-YYYY HH:MM:SS"/] but the shortcode can also be used to wrap HTML to be displayed on launch: [tminus t= "DD-MM-YYYY HH:MM:SS"]HTML to be displayed when the countdown reaches zero.[/tminus] A complete list of shortcode attributes follows:
T Attribute – Launch Date and Time
[tminus t="+1 hour 45 minutes"/]
The t attribute is used to assigned a date and time in almost any format. If no t value is assigned, the default launch date and time is assigned Nov 11, 2011 at 11:11:11 — mostly because it’s kind of a cool date.
Note: Dates in the m/d/y or d-m-y formats are disambiguated by looking at the separator between the various components: if the separator is a slash (/), then the American m/d/y is assumed; whereas if the separator is a dash (-) or a dot (.), then the European d-m-y format is assumed.
To avoid potential ambiguity, it’s best to use ISO 8601 (YYYY-MM-DD)
- DD-MM-YYYY HH:MM:SS
- DD.MM.YYYY HH:MM:SS
- MM/DD/YYYY HH:MM:SS
- YYYY-MM-DD HH:MM:SS
ID Attribute
[tminus t="31-12-2010 23:59:59" id="new-years-eve"/]
A unique ID for the countdown element. If the id attribute is not defined, a unique, random number will be assigned.
Weeks Attribute
[tminus t="01.01.2011" weeks="woche"/]
Replaces the default title for ‘weeks’.
Days Attribute
[tminus t="1/1/2011" days="tage"/]
Replaces the default title for ‘days’.
Hours Attribute
[tminus t="next Thursday" hours="stunden"/]
Replaces the default title for ‘hours’.
Minutes Attribute
[tminus t="10 September 2011" minutes="minuten"/]
Replaces the default title for ‘minutes’.
Seconds Attribute
[tminus t="2010-12-31 23:59:59" seconds="sekunden"/]
Replaces the default title for ‘seconds’.
Omitweeks Attribute
[tminus t="2011-01-01" omitweeks="true"/]
Omit the weeks ‘true’ or show the weeks ‘false’. Default is ‘false’.
Style Attribute
[tminus t="2011-01-01" style="carbonite"/]
Defines the style to be used by the countdown (carbonite, darth or jedi). Default is ‘jedi’.
Jsplacement Attribute
[tminus t="2011-01-01" jsplacement="inline"/]
Where to inject the required javascript (footer or inline). The default setting ‘footer’ is recommended.
Before Attribute
[tminus t="2011-01-01" before="<p>May the force...</p>"/]
The HTML to be displayed above the countdown.
After Attribute
[tminus t="2011-01-01" after="<p>...be with you.</p>"/]
The HTML to be displayed below the countdown.
Width Attribute
[tminus t="2011-01-01" width="300"/]
The pre-launch width in px of the countdown – default is ‘auto’.
Height Attribute
[tminus t="2011-01-01" height="200"/]
The pre-launch height in px of the countdown – default is ‘auto’.
Launchwidth Attribute
[tminus t="2011-01-01" launchwidth="400"/]
The post-launch width in px of the countdown – default is ‘auto’.
Launchheight Attribute
[tminus t="2011-01-01" launchheight="700"/]
The post-launch height in px of the countdown – default is ‘auto’.
Launchtarget Attribute
[tminus t="2011-01-01" launchtarget="below"/]
The area that the post-launch HTML is to be displayed in (above, below or countdown – default is ‘countdown’)
Rate & Vote
We are very happy to offer this plugin to this great community of open-source lovin’ WordPress users. Now go be a nice social netwookiee and visit the WordPress.org plugin page to rate the plugin. Don’t forget to let others know if everything worked for your configuration by voting in the compatibility section.
Blab To Others
Join the Twinpictures Facebook Page or hit us up on the Twitter. If you post a nice video review, let us know and we will be happy to include it on the Twinpictures YouTube Channel.
Flying Houseboat Fund
If this plugin really just floats-n-flys your boat, why not throw in a bean or two in the Twinpictures Flying Houseboat Fund!
The Flying Houseboat Project envisions an extremely efficient future flying abode, powered by sea and air.
This post is also available in: German
Its a great plugin. The only one which is easy to customize and smooth on almost every browser. I wrote almost because there is an annoying issue on Opera Mini.
When the website is loaded, everythig seems fine and the countdown works. But after about 5 seconds the website reloads itself, the plugin stops countdown and whats the worst – if you scrolled on the website within the 5 seconds, it would push you back to the place when you were when the website first loaded. Which means the user is totaly confused and dont know what happened.
I have no idea how to fix that. Any tips?
@Zbysek: Can you provide a link to the page with this problem?
The timer has stopped counting down actively–in real time. It is still correct each time I reload. I’ve just upgraded wp and the timer…any suggestions? It’s on the home page of site listed above.
@Chantal: Yes, you are getting a jQuery error on your page. Have you installed/updated any plugins that might be causing the error:
Uncaught TypeError: Cannot read property 'nodeName' of undefinedI was working with Meteor Slides and it had caused problems in other ways so I deactivated it. But still this issue. What do I do to correct it?
@Chantal: for some reason there are two countdown timers being defined on your page, however only one timer exists. This code needs to be removed.
jQuery('#1365-dashboard').countDown({targetDate: {
'day': 21,
'month': 02,
'year': 2012,
'hour': 19,
'min': 00,
'sec': 00,
'localtime': '1/18/2012 09:39:02'
},
style: 'carbonite',
omitWeeks: true });
Is there some kind of cache plugin activated on your site?
Okay, I see that at line 157. There are two sets of them, one right after the other. They both fall after the code that reads
on lines 152-3. But this code isn’t on my home page; it’s somewhere in the code files…where would I find it? It’s not in my custom file editor and I haven’t manually changed anything in any other files.
@Chantal: Try completely removing the countdown, verify that both of these code blocks are remove, then add a new one.
I’ve removed the countdown, deactivated the plug-in, and even deleted the plug-in for the time being but it is still showing up, albeit differently, on lines 147 and 148:
I’ll look for this in the code files but I don’t know exactly where to start.
Very cool plugin!! Does just what I need, except for a couple of minor issues.
The first issue is that it seems to be ignoring my UTC setting (-8, PST). When I set a target time, the countdown displays with a UTC offset of +0 instead.
Second issue is that the widget doesn’t always properly save the additional field entries across saves. For example, in the Above Countdown field, it sometimes takes a few saves in a row to get the contents to “stick”. For the first few attempts, the contents seem to be reverting back to a previous state. After initial install, that meant wiping out the contents whenever it refreshed. After editing later, it would revert back to the original contents instead.
Like I said, minor issues, and the timer does work very well. Thanks so much!
I haven’t been able to resolve this. Couldn’t find it in any of the files. Do you have any other recommendations?
I’ve not been able to resolve this and I’m not sure what to do next. I really like the timer, though, and would like to be able to continue using it. Do you have any suggestions?
The plugin seems to working okay and looks great, but it’s showing the totally wrong countdown time. It’s showing DOUBLE the number of weeks than it should. Where do I fix this? Otherwise, looks great!
@Jessica: Can you provide us a link to the page you are experiencing this issue?
Is there any way to have the sidebar widget display Days Hours minutes and seconds on one line?
How about changing the colours?
@Forest: Yes, how comfortable are you with editing CSS? Then again, you could just use the carbonlite style, it’s all on one line. But to change the colors and and really make a unique new style you must modify the CSS. There is quite a bit of info on that in the comments. However, if you need further help, hit us back and we can provide some step-by-step for you.
[...] 10. jQuery T-minus Countdown 2.0 [...]
Hi. how could i put the days in the same row as hours, minutes and seconds. Thanks!
@grandt: Hello. Use either the carbonlite style, or edit the CSS. Search the comments and/or facebook page for step-by-step instructions on editing the css. Let us know if you need further assistance.
.jedi-dash_title {
*/
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg); /* Opera */
writing-mode: tb-rl; /* from IE 5.5
/* filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); */ /* old browser must die!!! */
…}
@Gut: Cool. We’ll check it out.
Where can I edit, for example, the css file for the carbonlite style? The only css file I have access to in the plugin editor is collapse-style.css and I don’t know what that one pertains to.
Cheers.
@Chris: Plugins > Collapse-O-Matic > css > [style_name] > style.css
Thanks, Baden. So this means I can’t access the file from the wordpress dashboard, right? Instead I need access to the files on the server. My friend hosts the website so I’ll have to get a usernma/password from him, right? Thanks pal.
@Chris: You can also install by ‘uploading a .zip file’ from the dashboard…. but I think you will still need FTP access.
Thanks again. Best plugin support I’ve ever seen.
I like the looks of the countdown timer and at first glance it appears to be working correctly. However it is off by 4 hours (longer than actual). So it seems like a time zone issue. I’ve set the target as 28-09-2012 @ 18:00:00 EST (USA).
So what am I doing wrong? Is there some time zone setting that I’ve missed? Or do I have to adjust the target by 4 hours to get it on target?
Thanks for the help.
Terry Brandon
@Terry Brandon: Check your WordPress local time settings under: Settings > General > Timezone.
Fantastic wordpress plugin. Is there any way for it to just top when it hits the main event rather than going into -minus numbers?
@MGT Design: It’s going into minus numbers? Do you have a url that demonstrates this? Is there any onlaunch event defined?
Thanks Baden for your quick response. My WordPress local time settings are “New York” standard time. UTC time is 5 hours later. That seems right to me. What am I missing?
So it’s still off by 4 hours.
@Terry: So your WordPress local time is correct… then what is exact date/time format you are using?