-2

I would like to implement a modern countdown timer into my website, and I've found this one works very nicely, but after downloading it off of Github I'm having trouble getting it to work! What am I doing wrong?

https://github.com/PragmaticMates/jquery-final-countdown

This is the link to their GitHub, I downloaded the 'demo' folder and opened both the html files, but the countdown won't just start!

Here is my result: http://infntest.altervista.org/countdown/data-attributes.html

This is the tutorial, it's got the whole code: http://goo.gl/D4a9c9

My head tag: 

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.1/jquery.countdown.min.js"></script>
FET
  • 942
  • 4
  • 13
  • 35
  • 2
    Please post the code directly in your post not just link to a repository. Also, what doesn't work? What have you tried in terms of debugging? – wahwahwah Nov 18 '15 at 21:02
  • Alright, posting the code, by the way, the issue is that the timer will just show 00s and not the countdown @wahwahwah – FET Nov 18 '15 at 21:03
  • You have a 404 error so the plugin script doesn't load – Alon Eitan Nov 18 '15 at 21:04
  • check the directory of the URL that you embedded to your html if its pointing to the right path where you put the countdown script – mCube Nov 18 '15 at 21:05
  • @Jake - if you inspect the console, you'll immediately see (as NextLocal pointed out) that the js file isn't loading. – wahwahwah Nov 18 '15 at 21:08

2 Answers2

3

Your jquery-countdown.js file is pointing to the wrong location. Specifically, change this part:

<script type="text/javascript" src="../jquery.final-countdown.js"></script>

Here are all of the Javascript libraries required to run: (not counting css)

<script src="//code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.min.js"></script>
<script src="//final-countdown.pragmaticmates.com/jquery.final-countdown.js"></script>

Working Demo

Source Code

jaggedsoft
  • 3,858
  • 2
  • 33
  • 41
  • I deem by doing this, its the most efficient way of handling sources in your javascript, hosting it from the primary webserver can slow things down a bit – Christopher Allen Nov 18 '15 at 21:06
  • 3
    It's also worth noting that if the OP had inspected the console it would have been immediately evident what the issue was... – wahwahwah Nov 18 '15 at 21:06
  • you mean my kinetic.js file? @NextLocal – FET Nov 18 '15 at 21:07
  • Just like my good friend wahwahwah pointed out, the developers console can be reached by pressing ````Ctrl+Shift+J```` then going to the Console tab. It's a life saver! – jaggedsoft Nov 18 '15 at 21:07
  • Ok, great, thank you guys! So what should I basically edit, the script path for the js file? – FET Nov 18 '15 at 21:09
  • @Jake - see revised answer. Let us know if you still need any help – jaggedsoft Nov 18 '15 at 21:10
  • Yes, still won't work, edited my question with my head tag – FET Nov 18 '15 at 21:12
  • @Jake Now your jquery just needs to come before it in the head tag. Good luck! – jaggedsoft Nov 18 '15 at 21:14
  • Dude, please forgive me, I remember I have to get the JQuery tag before any js using it, but now how many scripts tag should I implement? – FET Nov 18 '15 at 21:18
  • Man, forgive my bad memory (really bad though) @NextLocal – FET Nov 18 '15 at 21:18
  • @Jake You also will need kinetic before that tag. And I revised my answer again, since I accidentally referenced some other similar countdown script. Now it should work for you – jaggedsoft Nov 18 '15 at 21:20
  • ` ` – FET Nov 18 '15 at 21:25
  • Where's the issue? D: @NextLocal You wish you never met me ahah – FET Nov 18 '15 at 21:26
  • @Jake if you update your altervista so your head has all the scripts at the bottom of my answer (it was revised again) it should work, if not tell me and I will look at it. But right now your site still has the old code. Basically as long as jquery is above what you pasted though it should be good – jaggedsoft Nov 18 '15 at 21:28
  • Wanna move on chat? @NextLocal – FET Nov 18 '15 at 21:30
  • 'cause I've modified my head tag, but it won't start anyways – FET Nov 18 '15 at 21:36
  • @Jake update your site so I can see what it looks like updated, because it's still the same to me – jaggedsoft Nov 18 '15 at 21:37
  • Done, it was in a parallel link, there you go – FET Nov 18 '15 at 21:40
  • For whatever reason the javascript file I linked wasn't the right one either. Sorry. This one is: ```````` Now remember to delete the old ```` – jaggedsoft Nov 18 '15 at 21:47
  • Thanks for the correction, but I don't know where to write that Js (and what to write inside that wrap).. such a shame >. – FET Nov 18 '15 at 21:58
  • Such as you helped me really a lot so far.. whenever you find some free time from here til tomorrow I'd like to see how this all ends.. Thank you again! – FET Nov 18 '15 at 21:59
  • @Jake just see the updated answer, those are the scripts you should have and in that order. Anywhere before your ````final_countdown()```` call should suffice, ideally in the head element. Delete any leftover old scripts at the bottom. – jaggedsoft Nov 18 '15 at 22:24
  • As it stands all you need to do is put this above the other scripts in your head: ```````` and get rid of the old scripts at the bottom of the page. – jaggedsoft Nov 18 '15 at 22:28
  • I guess you need to see my file system in the backend to see each file's name, that's 'cause I think part of the code might have changed some names of some js files. You able to make a chat? I cannot do that yet @NextLocal – FET Nov 19 '15 at 13:12
  • @Jake Here's a demo without using your server: http://jsbin.com/hurofi/edit?output – jaggedsoft Nov 19 '15 at 16:56
  • Copy the entire code from here and use this as a starting point: http://pastebin.com/et3CP5Kz Glad to hear you got it working man, cheers! – jaggedsoft Nov 19 '15 at 20:18
  • Hey dude, just a last little question, I tried to implement it (not the background, just the countdown) inside a div, but it's not working, and it says `Uncaught TypeError: $(...).final_countdown is not a function` any ideas? – FET Nov 19 '15 at 20:44
  • @Jake now you're executing it before the html div exists. Just move ```````` down to the bottom of your page. Also you're including jquery twice, I'd replace the ```````` at the top of your page with ```````` and then get rid of the ````jquery.min.js```` at the bottom – jaggedsoft Nov 19 '15 at 21:12
  • Shouldn't the tags be in the head? @NextLocal – FET Nov 19 '15 at 21:13
  • Loading CSS and JS in the head is useful because it will start loading external resources faster. But in this case it doesn't matter, anywhere in the html will be fine, you just have to understand that there is a certain order things have to happen in, and in this case your ````final_countdown()```` has to happen at the bottom of the page. (After countdown div) The ideal way to do it wouldn't be to load another ```````` somewhere at the bottom before ```` – jaggedsoft Nov 19 '15 at 21:15
  • Another way to get your existing code working would be changing ````$(document).ready```` to ````$(window).load```` - the latter will wait until your page is done to run your script. See: http://stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load – jaggedsoft Nov 19 '15 at 21:18
  • All you need to understand is that the reason previousMeetings.html isn't working is because the final_countdown function is being called before you even have a ````
     – jaggedsoft Nov 19 '15 at 21:23
  • Personally how I would fix it is get rid of ```````` since you don't need to load an external script just for a small bit of code. Just inline it at the bottom before ```` – jaggedsoft Nov 19 '15 at 21:27
  • I did it, still not working, I'm sorry about that but can't understand what should be changed, maybe let's just review the head as I've already placed that line of code at the bottom (?) @NextLocal You my hero you know yeah? – FET Nov 19 '15 at 21:32
  • Now you have jquery included in there three times. All I had to do to make it work was remove the two ```````` – jaggedsoft Nov 19 '15 at 21:41
  • Were those 2 links 1 at the bottom and 1 above? – FET Nov 19 '15 at 21:44
  • You still have a ```````` in there. Get rid of it – jaggedsoft Nov 19 '15 at 21:44
  • Awesome, now I'll try to make it responsive! Whenever you get back up and feel rested I'd like at least to share to you this other question of mine, feel free to join such as not to, you've already a lot to me, thanks @NextLocal – FET Nov 19 '15 at 21:55
  • If you're designing something from scratch, just design everything with percents for the width. Then it'll be responsive automatically – jaggedsoft Nov 19 '15 at 22:00
  • Mh, well if you check the question I guess the main class/id is wrong 'cause it's set in px, isn't it? – FET Nov 19 '15 at 22:10
  • I mean, it shouldn't be set in pixels – FET Nov 19 '15 at 22:10
  • @NextLocal what if I wanna set the time of `now` and `start` to the current one, so that it doesn't restart everytime I refresh the page? I've the Js code, but where do I insert it in? `Math.round(new Date().getTime()/1000.0)` – FET Nov 20 '15 at 14:04
  • @Jake Countdown from Nov 1 to 30 days after. http://jsbin.com/hurofi/6/edit?js,output – jaggedsoft Nov 20 '15 at 17:43
  • @NextLocal What if I can just set the end date? Like the start and the now are the same – FET Nov 20 '15 at 17:47
0

It appears that you aren't using the same call signature.

Their example has this: 

$(document).ready(function() {
        $('.countdown').final_countdown({
                'start': 1362139200,
                'end': 1388461320,
                'now': 1387461319
        }, function() {
                // Finish Callback
        });
});

Note the Finish Callback

Paurian
  • 1,372
  • 10
  • 18
  • 1
    Astute observation, but the second parameter is optional, as callbacks usually are. Source: http://hilios.github.io/jQuery.countdown/documentation.html#introduction – jaggedsoft Nov 18 '15 at 21:12
  • @Paurian, yeah the code in the tutorial is slightly different from the one on github, and now I copied the one in github, but the tutorial is a short version so it might be helpful to understand it faster – FET Nov 18 '15 at 21:15
  • Thanks @NextLocal for pointing that out. I also tried a few variants of the URL that Jake used for jquery-countdown.js, confirming that the file isn't in the path referenced in his code (nor in other possibly misconstrued paths on his server). – Paurian Nov 18 '15 at 21:21