Adding jquery Simple Countdown to Date Timer Problems

[jackolive]

I need to add a simple jquery countdown to date timer to my main page. I am trying to use the following code from https://github.com/hilios/jQuery.countdown.

I have searched all over (2 days now) for a tutorial on how to integate jquery into Zen Cart. I found this article http://www.zen-cart.com/showthread.p...Zen-Cart/page3.

I believe that I have set this up right but it is not working. I am using Zen Cart Version 1.5.1. I only have one plugin installed (ZX Slideshow).

These are the steps that I followed.

1. Created jscript_countdown.js (below) and inserted into /includes/templates/custom/jscript/jscript_countdown.js

$(function() {
$('div#clock').countdown("2015/06/28", function(event) {
var $this = $(this);
switch(event.type) {
case "seconds":
case "minutes":
case "hours":
case "days":
case "weeks":
case "daysLeft":
$this.find('span#'+event.type).html(event.value);
break;
case "finished":
$this.hide();
break;
}
});
});

2. Added the following to define_main_page.php (I have also tried using tpl_index_default.php) and inserted into the proper override folder

<div id="clock">
<span id="weeks"></span> Weeks
<span id="daysLeft"></span> Days
<span id="hours"></span> Hours
<span id="minutes"></span> Minutes
<span id="seconds"></span> Seconds
</div>
<script>$('div#clock').countdown(toDate, callback);</script>

3. Added the following to my stylesheet.css

div#clock { color: white; margin: 20px auto; width: 600px; overflow: hidden; text-align: center; }
div#clock p { background: #333; float: left; height: 88px; width: 88px; }
div#clock p span { display: block; font-size: 50px; font-weight: bold; padding: 5px 0 0; }
div#clock div.space { color: #ccc; display: block; line-height: 1.7em; font-size: 50px; float: left; height: 88px; width: 30px; }

I have uploaded all files with no luck. The html is showing without the timer. The page source shows that jscript_countdown.js is being called.

I believe that my problem is with the $('div#clock').countdown(toDate, callback);. I wrapped it with a <script> tag when I inserted it into define_main_page.php. Is this the right way? I even tried adding this to html_header.php (since removed).

I searched for a solution but can't find one. I have studied some jquery to figure this out to no avail. Can anyone point me in the right direction? Any help would be appreciated.

[discoverytdi]

Here is one I've used in the past just change the dates to your end date and edit size of font etc. Hope it's of use

<script LANGUAGE="JavaScript">

var present;
var future;
var tseconds;
var seconds;
var minutes;
var hours;
var days;
ID=setTimeout("countdown();", 1000);

function countdown()
{
present = new Date();
present = present.getTime() + (60000) + (12 * 60 * 60 * 1000);
future = new Date("December 18, 2012 23:59:00");

tseconds = (future - present) / 1000;

days = tseconds /24/60/60;
days = Math.floor(days);
tseconds = tseconds - (days * 24 * 60 * 60);

hours = tseconds /60/60;
hours = Math.floor(hours);
tseconds = tseconds - (hours * 60 * 60);

minutes = tseconds /60;
minutes = Math.floor(minutes);
tseconds = tseconds - (minutes * 60);

seconds = tseconds;
seconds = Math.floor(seconds);
document.getElementById('days').innerHTML = days;
document.getElementById('hours').innerHTML = hours;
document.getElementById('minutes').innerHTML = minutes;
document.getElementById('seconds').innerHTML = seconds;
ID=setTimeout("countdown();", 1000);
}
</script>

<script LANGUAGE="JavaScript">

today = new Date();
todayEpoch = today.getTime();

target = new Date("18 December, 2012");
targetEpoch = target.getTime();

daysLeft = Math.floor(((targetEpoch - todayEpoch) / (60*60*24)) / 1000);
</script>

<br>
<div style="TEXT-ALIGN: center">
<font size="6"><strong>

<SPAN id="days">0</SPAN> Days.
<SPAN id="hours">0</SPAN> hr.
<SPAN id="minutes">0</SPAN> min,
<SPAN id="seconds">0</SPAN> sec. </font>
</div> 

[Design75]

Don't forget you will need to load jquery as well in your header. otherwise the timer will not work

[jackolive]

discoverytdi and Design75,

Thank you for the prompt response and the information. I do need a little more help.

Can you tell me what files and where to put the information? I see that the javascript code above (in blue) is enclosed in a <script> tag, does this go in a .js file in the jscript folder? Or does it go in the header? Which header or file would that be?

Where does the javascript (in black) go?

What file does the html go in? Is it define_main_page.php or can I add it to tpl_index_default.php?

"Don't forget you will need to load jquery as well in your header. otherwise the timer will not work" Does this happen when you insert the javascript into the header?

Thanks again. Sorry if my questions seem simple. I am able to do a lot with Zen Cart, I just don't understand how jquery (or javascript) works within Zen Cart.

[discoverytdi]

discoverytdi and Design75,

Thank you for the prompt response and the information. I do need a little more help.

Can you tell me what files and where to put the information? I see that the javascript code above (in blue) is enclosed in a <script> tag, does this go in a .js file in the jscript folder? Or does it go in the header? Which header or file would that be?

Where does the javascript (in black) go?

What file does the html go in? Is it define_main_page.php or can I add it to tpl_index_default.php?

"Don't forget you will need to load jquery as well in your header. otherwise the timer will not work" Does this happen when you insert the javascript into the header?

Thanks again. Sorry if my questions seem simple. I am able to do a lot with Zen Cart, I just don't understand how jquery (or javascript) works within Zen Cart.

Sorry should have said I just paste it in the define main page through admin above anything you already have, but it only shows on the main page if you wanted it site wide you'd have to ask someone else

[jackolive]

discoverytdi ,

Thanks again! It did work, but the time was wrong. I found a better countdown timer.

http://www.rmkwebdesign.com/Countdow...Style_1_B.html

It took some time to figure out, but it works nice. When the timer counts down to zero it displays a message.