Simple Countdown - Working Demo :)

The time now is Thu 18 Apr, 2024 07:52 • All times are UTC + 1 Hour [DST enabled]

Simple Countdown - Working Demo :)

Page 1 of 1

mort

Spam Basher

Joined: August 2010
Posts: 998
Location:

Up a tree

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.



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

Last edited by mort on Sat 01 Sep, 2012 14:17; edited 2 times in total

#1 Fri 31 Aug, 2012 15:29

Sponsors	Icy Phoenix is an open source project, you can show your appreciation and support future development by donating to the project.

Joshua203

Joshua 203

Dutch A Go Go

Joined: August 2008
Posts: 1754
Location:

Earth, Europe, the Netherlands, Rotterdam

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:

____________
www.DutchaGoGo.com (development/under construction ...Forever?¿?)

#2 Fri 31 Aug, 2012 19:11

mort

Spam Basher

Joined: August 2010
Posts: 998
Location:

Up a tree

Re: Simple Countdown - Unfinished

Works fine for me as it comes (with your css and mark up).

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

#3 Sat 01 Sep, 2012 00:35

Joshua203 Joshua 203 Dutch A Go Go Joined: August 2008 Posts: 1754 Location: Earth, Europe, the Netherlands, Rotterdam	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?¿?)
#4 Sat 01 Sep, 2012 12:11

mort Spam Basher Joined: August 2010 Posts: 998 Location: Up a tree	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!
#5 Sat 01 Sep, 2012 12:34

Joshua203

Joshua 203

Dutch A Go Go

Joined: August 2008
Posts: 1754
Location:

Earth, Europe, the Netherlands, Rotterdam

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]