Icy Phoenix

     
 


Post new topic  Reply to topic 
Page 1 of 1
 
 
Reply with quote Download Post 
Post Simple Countdown - Working Demo :) 
 
Who wants to finish this?  

As I don't really feel like installing phpBB and MG themes just to finish it.

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

countdown.zip
Description:  
Download
Filename: countdown.zip
Filesize: 51.32 KB
Downloaded: 164 Time(s)

 



 
Last edited by mort on Sat 01 Sep, 2012 14:17; edited 2 times in total 
mortSend private message  
Back to topPage bottom
Icy Phoenix is an open source project, you can show your appreciation and support future development by donating to the project.

Support us
 
Reply with quote Download Post 
Post Re: Simple Countdown - Unfinished 
 
Well sofar...

countdown.html (give a br at top and/or bottom if needed):
Code: [Download] [Hide] [Select]
<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">&nbsp;</td></tr>
        </table>
<div class="tbl-f-l"><div class="tbl-f-r"><div class="tbl-f-c">&nbsp;</div></div></div></div>


main.css:
Code: [Download] [Hide] [Select]
#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;
}


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

EDIT .. this is an example of how it looks:
 counter
 




____________
www.DutchaGoGo.com (development/under construction ...Forever?¿?)
 
Joshua203Send private messageVisit poster's website  
Back to topPage bottom
Reply with quote Download Post 
Post Re: Simple Countdown - Unfinished 
 
Works fine for me as it comes (with your css and mark up).

 untitled_1_1346452672_721133

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.
 



 
Edited by mort, Sat 01 Sep, 2012 02:23: I need to be more observant :)
mortSend private message  
Back to topPage bottom
Reply with quote Download Post 
Post 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 (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  
 




____________
www.DutchaGoGo.com (development/under construction ...Forever?¿?)
 
Joshua203Send private messageVisit poster's website  
Back to topPage bottom
Reply with quote Download Post 
Post Re: Simple Countdown - Unfinished 
 
Joshua203 wrote: [View Post]
(I have nothing to countdown anyway)


Hahaha!  

If you ever do you could use something like this.

http://www.countdownclockcodes.com/sports-countdown-clocks/

Quote:

I forgot to validate the html and css though but I expect you would have noticed any errors even without checking  


You did well!  
 



 
mortSend private message  
Back to topPage bottom
Reply with quote Download Post 
Post 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  

oooh for anyone trying this ...the include can be added anywhere below
Code: [Download] [Hide] [Select]
<div id="wrapcentre">

 




____________
www.DutchaGoGo.com (development/under construction ...Forever?¿?)
 
Joshua203Send private messageVisit poster's website  
Back to topPage bottom
Post new topic  Reply to topic  Page 1 of 1
 


Display posts from previous:    

HideWas this topic useful?

Link this topic
URL
BBCode
HTML




 
Permissions List
You cannot post new topics
You 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