Xmas Countdown with Snow Block

akulion · December 12, 2006, 10:17:04 PM

hi,

The idea was given by crip - however the script he showed me had random images. I was unable to pull that off but using a free "snow applet" script from the net and the countdown script from Dynamic Drive this is what came about.

Demo can be found here just look on the left

Step 1:
Download the file attached at the bottom of this post unzip and upload the 3 files inside to your forum root (forum root is where you find the folders Themes, Sources, etc etc)

Step 2:
To install this create a PHP block and add this line in it:

Code Select


include "123.php";

Customization
- You can change the image in the PHP file in the line

Code Select


<param name="grph" value="christmas25.jpg">

- you can set the height and width of the image in this line, the applet will resize accordingly so this can be used for center as well as side blocks if needed, just adjust the size.

Code Select


<applet code="alcsnow.class" align="baseline" width="130" height="147" style="border: 6px ridge #008080">

Also I have included a 2nd zip file called more_images.zip containing some other images inside which you could use - just dont forget to fix the width and height according to image dimensions if u use any other images

enjoy:up:

Lesmond · December 12, 2006, 10:46:52 PM

nice one Aku, I tried it in its own folder but it says cant find alcsnow.class, I have this in the block

Code Select

include "count/123.php"; count being the folder

Crip · December 12, 2006, 10:52:44 PM

Your fantastic Aku..
it looks great, I knew you could do it....Thanks

Ant it purty.

akulion · December 13, 2006, 02:44:42 AM

You are welcome and Thanks

I also added a larger center block for people who want it as a center block

Its on the demo page and the zip is linked there as well :up:

G6Cad · December 13, 2006, 05:45:46 AM

it works, but for some reason i can click any of the links in the forum when i have activated this. It just ask me to download the index.php file when i try to browse the site.
Deleted the block again from the DB and every thing works fine again

akulion · December 14, 2006, 01:01:43 AM

thats strange - its working perfectly for me on the default theme

but i haven't tried it with custom themes

Eithrways it shouldn't do that at all - very strange

daftdate · December 14, 2006, 01:51:41 AM

am i doing something wrong with the code cause i have a parse error instead of the countdown.

akulion · December 14, 2006, 01:56:34 AM

can u post the error code here
and also a link to ur site? :up:

akulion · December 14, 2006, 05:55:41 AM

well since u didnt return..ill leave this for u

If ur getting a parse error then try this method - its basically putting the entire code from the PHP file as a script in a block

After u upload the images as explained in the 1st post
Create a script block and put the code in there

Code Select


<head>
<style style="text/css">

.lcdstyle{ /*Example CSS to create LCD countdown look*/
background-color:black;
color:yellow;
font: bold 18px MS Sans Serif;
padding: 3px;
}

.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 80%
}

</style>

<script type="text/javascript">

/***********************************************
* Dynamic Countdown script- Ã,Â© Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}

cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}

cdtime.prototype.showresults=function(){
var thisobj=this


var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left

//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc


function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days "+arguments[1]+" hours <br>"+arguments[2]+" minutes "+arguments[3]+" seconds<br> left until Christmas"
}
else{ //else if target date/time met
var displaystring="Future date is here!"
}
return displaystring
}

function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> left until this Christmas"
}
else{ //else if target date/time met
var displaystring="" //Dont display any text
alert("Christmas is here!") //Instead, perform a custom alert
}
return displaystring
}

</script>
</head>
<div align="center">
<table border="0" id="table1" cellpadding="0" style="border-collapse: collapse">
<tr><td bgcolor="#99CCFF"><center><font size="1" face="Verdana">Christmas Countdown</font></center></td></tr>
<tr><td bgcolor="#99CCFF">
<applet code="alcsnow.class" align="baseline" width="130" height="147" style="border: 6px ridge #008080">
<param name="grph" value="christmas25.jpg">
<param name="snows" value="700">
<param name="threadsleep" value="50"></applet></center>
</td></tr>
<tr><td bgcolor="#99CCFF"><center><font size="1" face="Verdana">
<div id="countdowncontainer"></div>
</font></center>
<script type="text/javascript">
var futuredate=new cdtime("countdowncontainer", "December 25, 2006 00:00:00")
futuredate.displaycountdown("days", formatresults)
</script>
</font>
</td></tr>
</table></div>

daftdate · December 14, 2006, 07:43:27 AM

sorry I didnt return but im in England so I went to bed.

I will give it a go when I get back in from work tonight, thanx

Recent

User

Stats

Members

Stats

Users Online

Xmas Countdown with Snow Block

akulion

Lesmond

Crip

akulion

G6Cad

akulion

daftdate

akulion

akulion

daftdate

This website is proudly hosted on Crocweb Cloud Website Hosting.