Hello everybody! This is Adam and coming to you with Episode 173 of the Daily Dose of Drupal. Exciting. Today we are looking at the JQuery Countdown Timer Module. This is a very very simple module but definitely comes in handy if you’re using Countdowns to certain dates or releases or anything like that. Really simple and has nice interface and kind of cool display.
So we’re going to quickly jump in to that here and show you and I’ll just show you how to fix this small little path with this module. But before we do all that we always need to do our housekeeping things. One of which is you head over to codekarate.com, make sure to check out all the videos.
We’re approaching 200 of the Daily Dose of Drupal videos as well as a handy of awesome blogs as well. of course make sure to check out the 200+ page EBook on becoming a Drupal 7 Ninja. We definitely have a lot of good feedback from that, definitely worth your time as well. Anything else? Obviously Twitter, you can follow us on Twitter, following shane @smthomas3 and myself @adamlearing, you can do that as well.
Let’s get to the module. So again, we’re using the JQuery Countdown Timer Module and at the time of this video I am using 1.5 in Drupal 7 as my version. So kind of important to note because if you’re watching this later on, they might fix this bug and then we’re going to go over. So just note that I am using the 1.5. Alright, so simple, begin and install, again just drop it in to your sites’ all modules or wherever if you’re using all these sites. It could be in this site module’s folder but otherwise drop it in, make sure you enable the JQuery Countdown Timer Module and that’s all you need. It does require the date API Module as well so make sure you have that and installed it and enabled.
So once you get it enabled, all you need to do is go under your structure and inside your structure blocks and what this does is it just creates a one block for you and it’s called the JQuery Countdown Timer Block. So we can first load it, I should say it will in the disabled field so just turn it on and enable it and then we’re going to configure it. Pretty simple standard configuration of a block.
You’ve probably seen it in the past here in Drupal. You can give it a title if you want. Obviously you can use None to display nothing or just leave the field blank. It gets up the font size of the display and then here’s where you can set basically the date that we’re going to countdown to. So I set this to 2015, November 10th. Let’s just change this to 2014 so I can show you something. You’re going to set where you want it to appear and then if you want it all in some certain pages, we’re trying to say only show on front page.
So I’m going to save this block and then I’m going to refresh my homepage and if I scroll at the bottom you’ll see that it says I have 31 days, 0 hours, 43 minutes and a bunch of seconds remaining until the countdown date which is awesome. That’s what its working, what we expect. One thing I notice is there’s a 0 here in the third field. Without using this patch where I’m going to show you it will not display that third value field.
So for example if we hop back into here and change this to 2015, so that’s going to be 300 and some days until today because we’re filling this on October 10th of 2014. So if I save the thing and refresh again my homepage, this 31 should become 390 something…96 days. So without this patch, what we would do is first we would only display the 96. It would correctly to say down here it would be 396 days but the timer would only say 96 which would lead you to believe 96 days and actually it’s 300. So that means we have to use a patch.
So if you actually look on the J Query Countdown Timer page underneath Issues, you can actually find that somebody posted a patch for this. Right here, code to provide 3 digit days in countdown. So if you click on that and you have scroll down here and read some of the comments, you end up coming across this patch by Silicon Mind, if you open that up it shows you the patch that you can implement into the JQuery Countdown Timer JS file and doing this will allow you to get the 3 digit timer to display which is this.
So I’ll hop over here quickly and show you the code. So this is the finished one, I already patched this file but if we look at the file, it can kind of show you a couple of things that change. So for example if we needed to change the difference of the days left, update duo, so if we look at that, you can find it here, you can see here we patch that, we patch this, basically we just change the number scheming there. For those of you who are not familiar with patching, basically how it works is you see a minus sign. That basically means this line needs to be edited or taken away and change to the line below it.
So update duo, whatever one do, so this line right here, before that line said 0 common, 1 common. I changed it to the 0. Below hand there’s more changes but again it’s really simple, you just got to find it and replace what needs to be replaced. They also give you the line numbers up here on the code files. It makes it a little easier to find. So anyway, after you input all these changes, save it and then refresh your page, you’ll be able to see the three digits displaying in the counter timer if applicable. Of course it has to be…it has a relative value on this, it be over a hundred days away.
I will include.js file on the post here and put at the bottom of the page so in case you just want to drop it in, but again it’s important to note that when we’re filming this we’re using 1.5, my guess is this will get included on a later version of the J Query Countdown Timer so you might not even need to implement the patch. It might just come downloaded with the module.
So just note that just try it out first, if it doesn’t work then use the patch that’s provided. Alright that’s it for today’s video on the Countdown Timer. If you have any questions, post it on the comments, otherwise until next time, see you.
