Countdown timer block - Help needed, please

[AfterWorldForum]

Hi,

We're trying to get a new forum block for the sidebar, and while I have something working, it does not really look very nice. I would much rather try and see if I can get something working that looks great.

I found a nice script using jQuery (http://keith-wood.name/countdown.html), but am having trouble integrating this with our site. I added the jQuery link and the other two lines mentioned in the instructions to my headinclude.css using TMS. The two files, I put in /forums/clientscript:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">@import "clientscript/jquery.countdown.css";</style>
<script type="text/javascript" src="clientscript/jquery.countdown.js"></script>


Now I would like to have the block using the bottom layout from this page (http://keith-wood.name/countdown.html#layouts). I uploaded the image, and added the CSS code for the block to additional.css.

However, I cannot seem to be able to get the code working within the block page. I just end up with a white page, regardless of what I tried.

Would anyone with a bit more experience using jQuery in the SideBar blocks be able to give me some idea of what I am supposed to do?

Here's the last attempt I tried:


$html = $('#glowingLayout').countdown({until: new Date(2010, 12 - 1, 8), compact: true,
layout: '<table><tr><td><div class="image{d10}"></div><div class="image{d1}"></div>' +
'<div class="imageDay"></div><div class="imageSpace"></div>' +
'<div class="image{h10}"></div><div class="image{h1}"></div>' +
'<div class="imageSep"></div>' +
'<div class="image{m10}"></div><div class="image{m1}"></div>' +
'<div class="imageSep"></div>' +
'<div class="image{s10}"></div><div class="image{s1}"></div></td></tr></table>'});

return $html;


Thanks in advance :)

[Lynne]

In an html block, you just put the html in there. No need to do $html = 'yada, yada'; which is actually php, not html

[AfterWorldForum]

Hi Lynn,

Thanks for the tip. I switched the block to HTML instead of PHP, but it just outputs the plain HTML instead of actually parsing the code.


$('#glowingLayout').countdown({until: new Date(2010, 12 - 1, 8), compact: true, layout: '
' + '
' + '
' + '
' + '
' + '
' + '
'});


Any ideas?

--------------- Added 1290008194 at 1290008194 ---------------

Wrapping script tags around it also did not do the trick for me.

[Lynne]

I could have sworn I saw you write you were creating an HTML block. Hmmmm.

Exactly what is showing up in the block? (Something is in the page source, no?) Or do you mean literally a white page for the whole page? If so, you should look in your error_logs for a clue on what is happening (if you don't know where they are, ask your host.)

[AfterWorldForum]

I could have sworn I saw you write you were creating an HTML block. Hmmmm.

Exactly what is showing up in the block? (Something is in the page source, no?) Or do you mean literally a white page for the whole page? If so, you should look in your error_logs for a clue on what is happening (if you don't know where they are, ask your host.)

Hi Lynne,

Thanks for taking the time to reply :) It's frustrating me to no extent :)


At this moment, it is showing my page (that worked when I switched to HTML). However, the block just has an empty border in it. If I check the source, I only see the code the exact same way I posted it.

Viewing my source, I have the following lines in the header now:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="http://www.<site>.com/forums/clientscript/jquery.countdown.css" /> <script type="text/javascript" src="http://www.<site>.com/forums/clientscript/jquery.countdown.js"></script>


The additional.css contains the proper CSS code for the script, and the forumblock itself has been set to contain this code:


<table><tr><td>
<script type="text/javascript">
$('#glowingLayout').countdown({until: new Date(2010, 12 - 1, 8), compact: true,
layout: '<div class="image{d10}"></div><div class="image{d1}"></div>' +
'<div class="imageDay"></div><div class="imageSpace"></div>' +
'<div class="image{h10}"></div><div class="image{h1}"></div>' +
'<div class="imageSep"></div>' +
'<div class="image{m10}"></div><div class="image{m1}"></div>' +
'<div class="imageSep"></div>' +
'<div class="image{s10}"></div><div class="image{s1}"></div>'});
</script>
</td></tr></table>


The source shows the following for the block:


<div class="blockrow"><table><tr><td> <script type="text/javascript">
$('#glowingLayout').countdown({until: new Date(2010, 12 - 1, 8), compact: true,
layout: '<div class="image{d10}"></div><div class="image{d1}"></div>' +
'<div class="imageDay"></div><div class="imageSpace"></div>' +
'<div class="image{h10}"></div><div class="image{h1}"></div>' +
'<div class="imageSep"></div>' +
'<div class="image{m10}"></div><div class="image{m1}"></div>' +
'<div class="imageSep"></div>' +
'<div class="image{s10}"></div><div class="image{s1}"></div>'});

</script> </td></tr></table></div>

[Lynne]

You are trying to have a countdown timer like this - http://keith-wood.name/countdownBasics.html I don't see anything like what you wrote in the page source for his page. Are you sure you are doing this correctly?

[AfterWorldForum]

You are trying to have a countdown timer like this - http://keith-wood.name/countdownBasics.html I don't see anything like what you wrote in the page source for his page. Are you sure you are doing this correctly?

No, I'm not. But the instructions at the bottom of his page state using the three lines I added to the headerinclude. I made one change to that, though, and instead of using the line


<style type="text/css">@import "jquery.countdown.css";</style>


I changed that to be:


<link rel="stylesheet" type="text/css" href="http://www.<site>.com/forums/clientscript/jquery.countdown.css" />

The code I am using is under the tab Layouts. There's a section there called "alternate images". The buttons CSS and code next to that are what I am using.

[Lynne]

I got it working by doing exactly what was done on that minimal example page.

I added this at the end of the headinclude template (you said headinclude.css, that is not correct):
<style type="text/css">
@import "clientscript/jquery.countdown.css";

#defaultCountdown { width: 240px; height: 45px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="clientscript/jquery.countdown.js"></script>
<script type="text/javascript">
$(function () {
var austDay = new Date();
austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
$('#defaultCountdown').countdown({until: austDay});
$('#year').text(austDay.getFullYear());
});
</script>


And then I created an HTML block with this content:
<div id="defaultCountdown"></div>

So, get the very minimal working first (like above) and then go making changes to change buttons and dates and such.

[AfterWorldForum]

That is awesome, Lynne :) I got the minimal example working on this end as well.

Thank you so much!

Edit: It appears as if the main reason it did not work out for me earlier was not wrapping it in a function. I'm going to stick with the default, though.