The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
#1
|
|||
|
|||
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> 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; |
#2
|
||||
|
||||
In an html block, you just put the html in there. No need to do $html = 'yada, yada'; which is actually php, not html
|
#3
|
|||
|
|||
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: ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' '}); --------------- Added [DATE]1290008194[/DATE] at [TIME]1290008194[/TIME] --------------- Wrapping script tags around it also did not do the trick for me. |
#4
|
||||
|
||||
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.) |
#5
|
|||
|
|||
Quote:
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> 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> 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> |
#6
|
||||
|
||||
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?
|
#7
|
|||
|
|||
Quote:
Code:
<style type="text/css">@import "jquery.countdown.css";</style> Code:
<link rel="stylesheet" type="text/css" href="http://www.<site>.com/forums/clientscript/jquery.countdown.css" /> |
#8
|
||||
|
||||
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> HTML Code:
<div id="defaultCountdown"></div> |
#9
|
|||
|
|||
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. |
Thread Tools | |
Display Modes | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|