Who wants to finish this? :mryellow:
As I don't really feel like installing phpBB and MG themes just to finish it. :P
It's only the paths you have to change, and add some block mark-up in the countdown.html for the theme you are using.
You will also no doubt have to edit the one and only image path in the main.css.
COPY countdown.html to your style/template/countdown.html
COPY the countdown folder and contents to: root/countdown/*.*
In your style/template/
OPEN:
overall_header.html
FIND:
</head>
<body class="{S_CONTENT_DIRECTION}">
BEFORE ADD:
<script type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script type="text/javascript" src="countdown/js/add-date.js"></script>
<link rel="stylesheet" type="text/css" href="countdown/style/main.css" />
##########################
Change the "Countdown Dates" in root/countdown/js/add-date.js
##########################
ADD this var to wherever you want the countdown clock to appear in another template.html or block etc.
<!-- INCLUDE countdown.html -->
Simple Countdown - Working Demo :)
Subject: Simple Countdown - Working Demo :)
Last edited by mort on Sat 01 Sep, 2012 14:17; edited 2 times in total
Last edited by mort on Sat 01 Sep, 2012 14:17; edited 2 times in total
| countdown.zip | ||
| Description: |  Download |
|
| Filename: | countdown.zip | |
| Filesize: | 51.32 KB | |
| Downloaded: | 306 Time(s) | |
Subject: Re: Simple Countdown - Unfinished
Well sofar...
countdown.html (give a br at top and/or bottom if needed):
main.css:
But eventhough it reads the main.css in forumroot/countdown (telling me those paths are correct) it doesn't start counting ...maybe I'm overlooking the obvious?
The above code was tested on black pearl but should fit milkyway too I guess :wink:
EDIT .. this is an example of how it looks:
countdown.html (give a br at top and/or bottom if needed):
<div><div class="tbl-h-l"><div class="tbl-h-r"><div class="tbl-h-c"><div class="tbl-title"><h4>Something Here</h4></div></div></div></div>
<table width="100%" class="tablebg" cellspacing="1" >
<tr>
<th>We're counting down</th>
</tr>
<tr>
<td class="row1" align="center">
<div id="dash_container">
<!-- Countdown dashboard start -->
<div id="countdown_dashboard">
<div class="dash weeks_dash">
<span class="dash_title">weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">hours</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">minutes</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">seconds</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
<!-- Countdown dashboard end -->
</div>
</td>
</tr>
<tr><td class="cat-bottom"> </td></tr>
</table>
<div class="tbl-f-l"><div class="tbl-f-r"><div class="tbl-f-c"> </div></div></div></div>
<table width="100%" class="tablebg" cellspacing="1" >
<tr>
<th>We're counting down</th>
</tr>
<tr>
<td class="row1" align="center">
<div id="dash_container">
<!-- Countdown dashboard start -->
<div id="countdown_dashboard">
<div class="dash weeks_dash">
<span class="dash_title">weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">hours</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">minutes</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">seconds</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
<!-- Countdown dashboard end -->
</div>
</td>
</tr>
<tr><td class="cat-bottom"> </td></tr>
</table>
<div class="tbl-f-l"><div class="tbl-f-r"><div class="tbl-f-c"> </div></div></div></div>
main.css:
#dash_container {
width: 700px;
color: #555555;
}
#countdown_dashboard {
height: 110px;
}
.dash {
width: 110px;
height: 114px;
background: transparent url('../images/dash.png') 0 0 no-repeat;
float: left;
margin-left: 20px;
position: relative;
}
.dash .digit {
font-size: 55pt;
font-weight: bold;
float: left;
width: 55px;
text-align: center;
font-family: Times;
color: #555555;
position: relative;
}
.dash_title {
position: absolute;
display: block;
bottom: 0px;
right: 6px;
font-size: 9pt;
color: #555555;
text-transform: uppercase;
letter-spacing: 2px;
}
width: 700px;
color: #555555;
}
#countdown_dashboard {
height: 110px;
}
.dash {
width: 110px;
height: 114px;
background: transparent url('../images/dash.png') 0 0 no-repeat;
float: left;
margin-left: 20px;
position: relative;
}
.dash .digit {
font-size: 55pt;
font-weight: bold;
float: left;
width: 55px;
text-align: center;
font-family: Times;
color: #555555;
position: relative;
}
.dash_title {
position: absolute;
display: block;
bottom: 0px;
right: 6px;
font-size: 9pt;
color: #555555;
text-transform: uppercase;
letter-spacing: 2px;
}
But eventhough it reads the main.css in forumroot/countdown (telling me those paths are correct) it doesn't start counting ...maybe I'm overlooking the obvious?
The above code was tested on black pearl but should fit milkyway too I guess :wink:
EDIT .. this is an example of how it looks:
Subject: Re: Simple Countdown - Unfinished
Works fine for me as it comes (with your css and mark up). :mryellow:
Check that you don't already have jquery in your theme
If you do, then drop this from the header.
<script type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
You can also get rid of this and the misc.js as it's junk for something else that was in the html.
<script type="text/javascript" src="countdown/js/misc.js"></script>
Edit:
Mmmm, you already do have the core jquery.js installed.
<script type="text/javascript" src="./mods/jquery-1.2.2.pack.js"></script>
And that is more than likely the problem. ;)
Check that you don't already have jquery in your theme
If you do, then drop this from the header.
<script type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
You can also get rid of this and the misc.js as it's junk for something else that was in the html.
<script type="text/javascript" src="countdown/js/misc.js"></script>
Edit:
Mmmm, you already do have the core jquery.js installed.
<script type="text/javascript" src="./mods/jquery-1.2.2.pack.js"></script>
And that is more than likely the problem. ;)
Subject: Re: Simple Countdown - Unfinished
Yeah, I think you're right Mort but I'm glad to know it should be ok for others to use ...this time I'll give it a miss :LOL: (I have nothing to countdown anyway)
I forgot to validate the html and css though but I expect you would have noticed any errors even without checking :LOL:
I forgot to validate the html and css though but I expect you would have noticed any errors even without checking :LOL:
Subject: Re: Simple Countdown - Unfinished
Hahaha! :mryellow:
If you ever do you could use something like this.
http://www.countdownclockcodes.com/sports-countdown-clocks/
You did well! :P
Joshua203 wrote: [View Post]
Hahaha! :mryellow:
If you ever do you could use something like this.
http://www.countdownclockcodes.com/sports-countdown-clocks/
Quote:
You did well! :P
Subject: Re: Simple Countdown - Unfinished
I can confirm removing the 1.2.2pack from the footer definately makes the clock tick and not look like it's beyond "lift off" time.
Now let's wait for a reply from The Crow so you can mark it solved (and/or name it finished)
If I ever know my date of death I now have lots of counters to choose from ..thanks :LOL:
oooh for anyone trying this ...the include can be added anywhere below
Now let's wait for a reply from The Crow so you can mark it solved (and/or name it finished)
If I ever know my date of death I now have lots of counters to choose from ..thanks :LOL:
oooh for anyone trying this ...the include can be added anywhere below
Page 1 of 1
You cannot post new topicsYou cannot reply to topics
You cannot edit your posts
You cannot delete your posts
You cannot vote in polls
You cannot attach files
You can download files
You cannot post calendar events
This is a "Lo-Fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Powered by Icy Phoenix based on phpBB
Generation Time: 0.2398s (PHP: 63% SQL: 37%)
SQL queries: 18 - Debug Off - GZIP Enabled