vb.org Archive - Countdown timer block

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=252)

- - Countdown timer block - Help needed, please (https://vborg.vbsupport.ru/showthread.php?t=253793)

Countdown timer block - Help needed, please

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, 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:

Code:

<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. 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:

Code:

$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 :)

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

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.

Code:

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

' + '

' + '

' + '

' + '

' + '

' + '

'});

Any ideas?

--------------- Added [DATE]1290008194[/DATE] at [TIME]1290008194[/TIME] ---------------

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

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.)

Quote:

Originally Posted by Lynne (Post 2122799)

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:

Code:

<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:

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:

Code:

<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>

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?

Quote:

Originally Posted by Lynne (Post 2122900)

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

Code:

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

I changed that to be:

Code:

<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.

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):

HTML Code:

<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:

HTML Code:

<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.

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.

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (8)bbcode_code_printable (2)bbcode_html_printable (2)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (9)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01144 seconds Memory Usage 1,753KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (8)bbcode_code_printable (2)bbcode_html_printable (2)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (9)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: