This is the talk page for discussing improvements to the Countdown page.
- Please sign and date your posts by typing four tildes (
~~~~). - Put new text under old text. Click here to start a new topic.
- If you're new to the wiki, please take a look at the talk page help.
- Be polite
- Assume good faith
- Be welcoming
Misc
It doesn't seem to work.--Chris talk blog 16:08, August 9, 2010 (UTC)
Is there a way to remove the "T minus" part of the countdown? Neocarleen • Talk
Update to Code
I'd like to propose an update to the code. My modified code here determines whether it should be sigular or plural (1 second instead of 1 seconds). ǝsʞpɐןǝ (talk page) 20:01, 6/07/2011
- I've added the code. Feel free to remove it if I shouldn't have. ǝsʞpɐןǝ (talk page) 15:24, 7/07/2011
Error
Okay, the message when the countdown isn't working is displaying. But what do I do now? Bereisgreat Shout! [[Special:Editcount/Bereisgreat| Special:Editcount/Bereisgreat edits on this Wiki ]] 19:24, March 29, 2012 (UTC)
No more counting up!
I'd like to offer some improvement for the code. You can see my version here. It adds another <span class> where you can make a custom message to display once the countdown is finished. The timer now will not count up once the countdown has finished and this message will be displayed instead. Land Raider 20:34, July 1, 2012 (UTC)
- I considered changing the code a while back to work this way. The version of the code I run at Casualty Wiki has been customised so it knows when an episode is on air or has finished airing. However, after some reflection and looking at how other wikis use the code, I decided not to - as some wikis actually do use countups instead of countdowns. Your idea has merit, so I will look into integrating it into version 2. ǝsʞpɐןǝ (talk page) 09:34, 02/07/2012
Countdown code need to be checked
The current countdown script works really slow and need to be improved. Currently the script use is also really messy so maybe we beter make an total new version for it
What code should be used (my opinion, if possible)
<countdown>January 01 2013 00:00:00</countdown>
And with all options:
<countdown configuration="preload:Javascript disabled.; additions:Only <t> until the new year...; display:ymdhms;" style="...">January 01 2013 00:00:00</countdown>
--Jens Ingels (talk) 00:59, August 16, 2012 (UTC)
- By 'script', are you referring to the html used to insert the countdown, or the JavaScript itself?
I agree that the current html is messy, butany change to how the html is used would mean a separate version of the JavaScript would be needed, as a lot of wikis use the current format. This would be possible, but I just want to clarify what you think should be done. I personally think the script is rather quick. ǝsʞpɐןǝ (talk page) 14:32, 16/08/2012
With the script speed I'm talking about the switch between non JavaScript and when the script is activated. Currently it takes an long time (like 1-2 seconds) te replace the alternative text to the countdown what's in my opinion really slow. The code is just an example how it could display beter, I never said it could be an working code. Couldn't there be an save cookie option or something that can speedup the loading time ones you visited the page the first time.--Jens Ingels (talk) 15:57, August 17, 2012 (UTC)
- The script loads virtually instantly on the wikis I use it on. Either your 1-2 seconds is an over estimate, or the wiki you have it applied to has a lot of js to load. Would you mind linking me to the wiki you run the script on, and a page with a countdown so I can test?
- The main bulk of the countdown code was developed by an old user, but from what I understand of it, it seems very efficient as it is. If you want to suggest some actual script changes then of course, feel free, as I don't know the extent of your js knowledge. ǝsʞpɐןǝ (talk page) 14:06, 19/08/2012
2 Questions
- Is the "JavaScript disabled" thingy really necessary?
- Why does the countdown count up after it's finished?
I added a Dutch translation btw. -- pecoes 07:08, December 08, 2012 (UTC)
- When the code was first written, I suspect it was more necessary than it is today. However, this is still useful to to wikis, as alternate text if for some reason the code isn't working. For example, this template counts down to the next episode of a show. if you look closely, you will see that the alternate text provides the same information, but without the live countdown: "will air on 15 December 2012 at 21:00". However, you can just not use the 'nocountdown' bit, and it will work fine.
- This is by design. I have seen some wikis use the code to count up - not many, but enough to justify keeping the functionality in this way. The main reason I haven't changed a lot of things in this code is because of it's wide usage on other wikis. At Casualty Wiki, I ran a customised version of the code. When the countdown reaches zero, it displays a line of text instead. While this can easily be done here, it would need to be customisable on a per-countdown basis - requiring another span tag in the syntax. While this isn't a big problem, compatibility is something I have always put first when considering changes to the code.
- I am not a very good coder. I will be the first to admit that - and it is often obvious when others look at my codes. I 'adopted' the Countdown script as I needed it to be more versatile at the time. If you think you can improve the script without breaking the compatibility, feel free to suggest changes. I've done a lot of patchwork editing on this, and I'm sure it can be streamlined.
- Thanks for the translation. ǝsʞpɐןǝ (talk page) 10:40, 8 December 2012
- The "JavaScript disabled" thing is already optional. It cannot be removed from the code of course, but if it was up to me, I'd remove it from the documentation at least. There was a time when Wikia was usable without JavaScript but that's a distant memory :)
- If some wikis count on counting up, then it must stay, but I think other options should be provided:
- remove the countdown
- let it stay at zero
- show alternate content
- All of these can be done without breaking compatibility.
- If you don't mind I'll write something... -- pecoes 10:54, December 08, 2012 (UTC)
- No problem. You've taken this addon in your care. I respect that.
- This is a bit unorthodox, but since it's apparently possible to have more than one countdown per page I'd suggest adding the data directly to the wikitext instead of the JS code. That might be simpler...
- So I propose to add three (optional) new attributes to the countdown span:
- data-end — specifies how the end should be handled:
- value: "continue" (default) — continue counting
- value: "stop" — stop at zero
- value: "remove" — remove the countdown
- value: "toggle" — set another tag's display to "inline" and the countdown's to "none"
- value: "callback" — call a JavaScript function
- data-toggle — another inline tag to show instead (to be used with data-end="toggle")
- data-callback — a JavaScript function to call (to be used with data-end="callback")
- data-end — specifies how the end should be handled:
- Example:
<span data-end="toggle" data-toggle="countdown-end" class="countdown" style="display:none;">
Only <span class="countdowndate">January 01 2013 00:00:00</span> until the new year...
</span>
<span class="countdown-end" style="display: none;">Happy 2013!</span>
- I hope this is sufficiently flexible without making things complicated.
- (I've already tested it btw: The wikitext parser does not discard attributes with a "data-" prefix.)
- -- pecoes 12:57, December 08, 2012 (UTC)
- This seems practical - I assume it defaults to countup if no data-end is defined?
- I would like to see the script in action before we commit it to the dev version. There's no rush toany of this, but when/if you get a chance to code it, put on a sandbox or something so I can take a look. ǝsʞpɐןǝ (talk page) 14:20, 8 December 2012
- Alright. Here's the my rewrite proposal: [[w:c:pecoes:Countdown.js]] and you can test it here: [[w:c:pecoes:Countdown]]. If you want to test the callback, try "demo". The demo function will show an alert when the countdown ends. -- pecoes 20:32, December 08, 2012 (UTC) (Files have been removed)
- Yeah, I'm perfectly happy with that. It's nice to see the script rewritten actually. I certainly would not have been able to overhaul the script like this, so thank you.
- If you think it is ready, feel free to update the code page and documentation. Something that might be useful to add to the code though is checks to see if we need days/hours/minutes and remove the largest interval once it reaches zero. A simple delta > 0 should do. What are your thoughts? ǝsʞpɐןǝ (talk page) 11:38, 9 December 2012
Yeah. That's easy to do. Personally I like the leading zeros. They give the countdown more gravitas :)
I will have to add another option then. This may not be the last option request, so I'd rather use something generic like data-option="hide-leading-zeros"
pecoes 13:18, December 09, 2012 (UTC)
- I just read Jens Ingels post... he seems to want more formatting options for the output. Has that been requested a lot? Cause that would be a boatload of work :( -- pecoes 13:54, December 09, 2012 (UTC)
Suggestion: Short counter
I use a customised version of Splarka's original countdown script, with a short form of the countdown "d days, h:m:s" to save space. It would be convenient if this script had a short option. -452 18:54, March 26, 2013 (UTC)
- I could alter the script so that it would accept a custom format function. Something like this:
window.countdownTimer = {
format: function (seconds) {
return seconds + ' left';
}
};
pecoes 19:16, March 26, 2013 (UTC)
Chinese localization
There should be more localization options for Chinese language.
For example, 263 days, 19 hours, 10 minutes and 14 seconds = 263天19小時10分14秒
We don't have spaces and commas between "words". Please add an option to skip those. Sammylau (talk) 20:51, April 11, 2013 (UTC)
- This can probably be resolved my modifications discussed above about different countdown formats. Not sure if Pecoes got any further with it though. ǝsʞpɐןǝ (talk page) 21:27, 11 April 2013
- Take a look at this library and tell me if it's possible to format a chinese date with it, please! -- pecoes 21:36, April 11, 2013 (UTC)
- I'd suggest a more "universal" way to solve this problem. Many Asian languages doesn't need these spaces and commas too.
- Add an option in the translation part:
- I'd suggest a more "universal" way to solve this problem. Many Asian languages doesn't need these spaces and commas too.
zh: {
and: '', //Nothing is needed for 'and' in Chinese
second: '秒',
seconds: '秒',
minute: '分',
minutes: '分',
hour: '小时',
hours: '小时',
day: '天',
days: '天',
skipSpaceComma: 'true'
},
- Then add more conditions into the output function:
function output (i, diff) {
/*jshint bitwise:false*/
var delta, result, parts = [];
var space = ' ';
if (i18n.skipSpaceComma=='true') space='';
delta = diff % 60;
parts.unshift(delta + space + i18n[delta === 1 ? 'second' : 'seconds']);
diff = Math.floor(diff / 60);
delta = diff % 60;
parts.unshift(delta + space + i18n[delta === 1 ? 'minute' : 'minutes']);
diff = Math.floor(diff / 60);
delta = diff % 24;
parts.unshift(delta + space + i18n[delta === 1 ? 'hour' : 'hours' ]);
diff = Math.floor(diff / 24);
parts.unshift(diff + space + i18n[diff === 1 ? 'day' : 'days' ]);
result = parts.pop();
if (countdowns[i].opts & NO_LEADING_ZEROS) {
while (parts.length && parts[0][0] === '0') {
parts.shift();
}
}
if (parts.length) {
if (i18n.skipSpaceComma=='true')
result = parts.join('') + i18n.and + result;
else
result = parts.join(', ') + ' ' + i18n.and + ' ' + result;
}
countdowns[i].node.text(result);
}
- I can see how that would work, yes. That's certainly a good suggestion, but it's less universal than the library I suggested above. With that library everybody could format the time how he/she sees fit for their wiki. Check out the request by 452 above as an example. He apparently wants even more flexibility than your suggestion can provide. Now, if I knew he'd be the last one to make such a request, I'd say "I'm terribly sorry, but I cannot accommodate absolutely everybody" and leave it at that. But chances are, he's just the first one to make such a request...
Simply, yes. The library should fix everything. A little hold back for me is that is you need to explain that in depth to let people know how to format it properly. Sammylau (talk) 07:05, April 12, 2013 (UTC)
- Yes, I agree. The explanations over there are far too short. It needs more detail. Thanks for testing it though! I'll convert the code. -- pecoes 07:24, April 12, 2013 (UTC)
Customization
Is it possible to customize the countdown so that you can use the span tags under specific parts? Sort of like <DAYS> being big and in bold, and the rest are smaller, in italics. Maybe even the option to use D:H:M:S, too. I want to do it but I really don't know how I would be able to pull it off. Is it possible, then? Masatoshino (talk) 16:51, April 29, 2013 (UTC)
Putting it in a template
Hi there... I'm trying to put your code into a template so that I can use it on a page like this: {{Countdown}}. For some reason, I can't get it to work properly =( If/When you have time, would you mind having a look for me please. Much appreciated http://img255.imageshack.us/img255/6670/squirrel3kk9.gif Wolbee 12:15, July 2, 2013 (UTC)
Can someone help me?
Can someone tell me what code I would use to add months and years to my count down timers?
HurricaneTeen6900 (talk) 21:50, August 11, 2013 (UTC)HurricaneTeen6900HurricaneTeen6900 (talk) 21:50, August 11, 2013 (UTC)
ISSUE: Using the countdown timer as a count up timer
Greeting everyone,
I have an issue with the countdown timer in a page of my wiki. I've been using the coundown timer template as a "count up timer", because of the lack of a code for it (and my poor knowledge of programming).
[Watch here a view from Google Chrome]
The problem is that, in some dates, it appears "FECHA ERRÓNEA" (WRONG DATE). Here is the JS of the countdown. --See ya':
22:42, September 12, 2013 (UTC)
div Tag Limits Functionality
For a while I was frustrated with the options, such as no-leading-zeros and the various data-end settings not working, and it turned out that the <div> tag I was using to change the font size is what caused the problem. I just wanted to point out that putting the countdown inside <div> tags creates such problems, in case anyone else has the issue. --Kelerik (talk) 17:06, January 27, 2014 (UTC)
Support Countdown on wikia mobile display
hi,
would it be possible to make the countdown behave properly on mobile browsers (i.e. in chrome on andriod, the countdown isn't displayed properly). Rlsf (talk) 06:53, March 3, 2014 (UTC)
- JavaScript is not loaded in the mobile skin (unless you use some hack for it).~UltimateSupreme 08:44, March 3, 2014 (UTC)
Malay countdown display
Can you put countdown display for Malay? (code:ms)
ms: {
and: 'dan',
second: 'saat',
seconds: 'saat',
minute: 'minit',
minutes: 'minit',
hour: 'jam',
hours: 'jam',
day: 'hari',
days: 'hari'
}
SNN95|Talk to me beybeh! 02:25, March 5, 2014 (UTC)
- Done :) cqm 13:01, 5 Mar 2014 (UTC)\
- Thanks! SNN95|Talk to me beybeh! 18:50, March 7, 2014 (UTC)
Vietnam countdown display
vi: {
and: 'và',
second: 'giây',
seconds: 'giây',
minute: 'phút',
minutes: 'phút',
hour: 'giờ',
hours: 'giờ',
day: 'ngày',
days: 'ngày'
}
- Added in, sorry about the delay. cqm 10:25, 21 Jun 2014 (UTC)
Multiple counters on same page
I am using two counters on the same page that count down to different end dates. But when I specify an date-end for one of them, the other ends at the same time. Is there a way to make each counter independent of the other for the end conditions?
Cornbread4 (talk) 13:35, May 23, 2014 (UTC)Cornbread4
- Have you tried:
<span data-end="remove" class="countdown" style="display:none;"> Only <span class="countdowndate">January 01 2015 00:00:00</span> until the new year... Only <span class="countdowndate">January 01 2016 00:00:00</span> until the next new year... </span>
- It removes both times once the first date has passed. I'm trying to think of a way to set them up as unique entries wihout having to embed another page, but no luck so far.
- Cornbread4 (talk) 14:13, May 25, 2014 (UTC)Cornbread4
- Oh, I understand what you mean now, sorry.
- I also see the problem:
- c.remove();
- "c" is the .countdown span rather than the .countdowndate span - it should probably be changed to :
- countdowns[i].node.remove();
- For now, you should be able to sidestep the problem by changing "remove" to "stop" which should stop the first countdown while allowing the second to continue.
- Again, I haven't tested any of this, so this information might be incorrect. -452 (talk) 22:42, May 25, 2014 (UTC)
Countdown Template
I don't know if this is useful to anyone else, but I created a template on the Clash of Clans wiki that makes it a little easier for folks to add countdowns to their pages. I'm happy to include it here if you would want to make it part of the countdown page. It requires this code but defaults a lot of the more popular options. The link is here: w:c:clashofclans:Template:Countdown 
(talk) 12:30, May 25, 2014 (UTC-8)
BUG: multiple countdowns on page may throw exception
There appears to be a bug if there are multiple countdowns on a page where an ended (i.e. any behaviour other than to continue counting up) timer is followed by at least one other live timer later on the page. A JS exception will be thrown which kills all subsequent updates for all remaining live timers on the page. This may be related to issue described by Cornbread4 above.
The sequence of events for a page with timers A and B is as follows:
- A and B are initially both ticking down, although A is approaching end
- On the first update() after passing the end time for A, iterate over countdowns = [ A, B ], find that A is ended, and call end(0)
- end(0) performs appropriate action to end that timer, then removes A from countdowns, leaving countdowns = [ B ], and returns
- Iterator in update() continues to B, and calls end(1) because the array being iterated over is still [ A, B ]
- end(1) throws an exception as soon as it tries to access countdowns[1]
- uncaught exception kills update() prematurely, and the next tick will not fire
Propose a fix whereby end(n) returns a value indicating whether or not that timer should be removed from countdowns instead of simply splicing countdowns. update() can splice countdowns to remove any ended timers after the iterator is finished. --Asaba (talk) 19:56, June 15, 2014 (UTC)
- Here's a fixed version of the end(n) and update() functions:
function end(i) {
var c = countdowns[i].node.parent();
switch (c.attr('data-end')) {
case 'remove':
c.remove();
return true;
case 'stop':
output(i, 0);
return true;
case 'toggle':
var toggle = c.attr('data-toggle');
if (toggle && $(toggle).length) {
$(toggle).css('display', 'inline');
c.css('display', 'none');
return true;
}
break;
case 'callback':
var callback = c.attr('data-callback');
if (callback && $.isFunction(module[callback])) {
output(i, 0);
module[callback].call(c);
return true;
}
break;
}
countdowns[i].countup = true;
output(i, 0);
return false;
}
function update () {
var now = Date.now();
var countdownsToRemove = [];
$.each(countdowns.slice(0), function (i, countdown) {
var diff = Math.floor((countdown.date - now) / 1000);
if (diff <= 0 && !countdown.countup) {
if (end(i)) countdownsToRemove.push(i);
} else {
output(i, Math.abs(diff));
}
});
var x;
while((x = countdownsToRemove.pop()) != null) {
countdowns.splice(x, 1);
};
if (countdowns.length) {
window.setTimeout(function () {
update();
}, 1000);
}
}
- Your explanation of the issue seems sensible, I couldn't see anything in the code that selected more than one timer but this is the first time anyone has noticed the exception. I'll try to test this tomorrow and then hopefully merge it if it works ok. cqm 09:27, 20 Jun 2014 (UTC)
- Seems to be working as expected, so I've merged in your fix along with the vietnamese translations posted above some time ago :) cqm 10:22, 21 Jun 2014 (UTC)
Time/Date Display Format
Would it be possible to display the timer in a customized format? i.e. 10 days, 23:59:59 compared to the default 10 days, 23 hours, 59 minutes, 59 seconds.
That's just one example. There's tons of formatting for times & dates though... --Lloyd Dunamis (talk) 06:05, June 17, 2014 (UTC)
- It's something that's been oft requested above. It looks like Pecoes was planning on doing something like that, but he disappeared some time ago. I'm only doing bugfixes and i18n updates for the time being, but if someone wants to have a go at implementing it they're free to :) cqm 10:27, 21 Jun 2014 (UTC)
Not working/nothing displayed
I can't get this to work over on the homepage of w:c:findingcarter. I implemented the JS where needs be, and I've tried and tried with the timezone and everything else… I can't even get it to work without being edited. —Liz 03:52, April 9, 2015 (UTC)
- Remove the "var " from in front of "countdownTimer.translations" on line 8. You cannot (and don't need to) declare an object property using the "var" keyword. — Foodbandlt (talk) 05:03, April 9, 2015 (UTC)
- Actually, that entire statement doesn't need to be there unless you want to override the words that are displayed. At the moment you have it set to use the default. So the only thing you need in your Common.js is the importArticles statement. — Foodbandlt (talk) 05:09, April 9, 2015 (UTC)