Jump to content

Problem with countdown clock

taliets

By taliets
in Javascript Help

Recommended Posts

taliets Newbie

taliets

Posted
Posted

Hi. I've got a problem with my countdown Javascript script. It doesn't display at all. Could someone perhaps help?

 

Here is the HTML code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Silvia & Daniel's Wedding Website" />
<title>Silvia & Daniel</title> 
<link href="css/main.css" rel="stylesheet" type="text/css" media="all" />
<style style="text/css">

.lcdstyle{ /*Example CSS to create LCD countdown look*/
background-color:black;
color:lime;
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">

/***********************************************
* Universal 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 cdLocalTime(center, server-php, 0, April 26, 2008 15:53:00, debugmode){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
var servertimestring=(servermode=="server-php")? 'November 26, 2007 13:13:09' : (servermode=="server-ssi")? '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' : '<%= Now() %>'
this.localtime=this.serverdate=new Date(servertimestring)
this.targetdate=new Date(targetdate)
this.debugmode=(typeof debugmode!="undefined")? 1 : 0
this.timesup=false
this.localtime.setTime(this.serverdate.getTime()+offsetMinutes*60*1000) //add user offset to server time
this.updateTime()
}

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

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

cdLocalTime.prototype.showresults=function(){
var thisobj=this
var debugstring=(this.debugmode)? "<p style=\"background-color: #FCD6D6; color: black; padding: 5px\"><big>Debug Mode on!</big><br /><b>Current Local time:</b> "+this.localtime.toLocaleString()+"<br />Verify this is the correct current local time, in other words, time zone of count down date.<br /><br /><b>Target Time:</b> "+this.targetdate.toLocaleString()+"<br />Verify this is the date/time you wish to count down to (should be a future date).</p>" : ""

var timediff=(this.targetdate-this.localtime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=debugstring+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=debugstring+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 cdLocalTime.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 cdLocalTime.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

//1) Display countdown using plain text
function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring="<span style='background-color: #CFEAFE'>"+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds</span> left until launch time"
}
else{ //else if target date/time met
var displaystring="Launch time!"
}
return displaystring
}

//2) Display countdown with a stylish LCD look, and display an alert on target date/time
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 launch time"
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("Launch time!") //Instead, perform a custom alert
}
return displaystring
}

</script>
</head>

<body>
<!-- Site navigation menu -->
<div id="container">
<div id="content">
<div id="header">
</div>

<ul class="navbar">
  <li><a href="index.php">Home</a></li>
  <li><a href="Verlobung.php">Verlobung</a></li>
  <li><a href="Standesamtliche Hochzeit Thalwil.php">Standesamtliche Hochzeit Thalwil</a></li> 
  <li><a href="Kirchliche_Hochzeit.php">Kirchliche Hochzeit Namibia</a></li>
  <li><a href="Danube.php">Farm Danubè</a></li>
  <li><a href=" Reiseziele.php">Reiseziele Namibia</a></li>
  <li><a href="Hochzeitsfotos.php">Hochzeitsfotos</a></li>
  <li><a href="Sonstiges.php">Sonstiges</a></li> 
  <li><a href="#">Gaestebuch</a></li>
  <li><a href="Kontakt.php">Kontakt</a></li>
  <li id="navbar2"><img src="../images/test_03.png" alt="Blom" width="129" height="138" border="0"/></li> 
</ul>




<!-- Main content -->
<h2><strong>Wir freuen uns mit Euch unseren grossen Tag zu feiern!!!</strong></h2>

<div id="main"> </div>
<div id="center"></div>
</div>
</div>
</body>
</html>

 

Here is the CSS code:

 

/* CSS Document */

body {
background:  url(../images/pix.gif) repeat;
margin: 0 auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #b5420c;
padding: 0px;	
}

#container {
margin: 0 auto;
padding: 0px;
width: 100%;
height: 100%;
}

#content {
    width: 760px;
height: 560px;	
margin: 0 auto 0 114px;	
font-size: 85%;
background-color: #FFCC66;
border-bottom: 1px solid #FFFFCC;
border-right: 1px solid #FFFFCC;
border-left: 1px solid #FFFFCC;
padding: 0px 0px 15px;
}

#content2 {
    background: url(/images/shadowlight_03.gif) no-repeat center bottom;
width: 760px;
margin: 0 auto 0 114px;
font-size: 85%;
background-color: #FFCC66;
border-bottom: 1px solid #FFFFCC;
border-right: 1px solid #FFFFCC;
border-left: 1px solid #FFFFCC;
padding: 0px 0px 15px;
}

#content2:after {
   content: "."; 
    display: block; 
    height: 0; 
    font-size:0;	
    clear: both; 
    visibility:hidden;
    }

/*
#content2{display: inline-block;} 

    /* Hides from IE Mac \*/
    * html #content2 {height: 1%;}
       #content2{display:block;}
    /* End Hack */ 


#content3 {
width: 760px;
margin: 0 auto 0 114px;
font-size: 85%;
background-color: #FFCC66;
border-bottom: 1px solid #FFFFCC;
border-right: 1px solid #FFFFCC;
border-left: 1px solid #FFFFCC;
padding: 0px 0px 15px;
}



#header {
background:#FFCC66 url(../images/headerN.jpg) no-repeat top;
padding: 0px;
height: 140px;
margin: 0px 0px 2em;	

}   
  
ul.navbar {
    float: left;
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 4em;
right: 0em;
width: 10em;
text-align: center;	
}

#tx {
font-style: normal;
margin-left: 5em;
margin-right: 5em;
text-align: justify;

}

#tx img {
padding: 0px;
text-decoration: none;
border: 2px solid #FFFFCC;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;

}

#map {
background: url(/images/map.gif) no-repeat 480px 25px;

}



.reiz {
width: 400px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;	
}

.reiz p {
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;

}

.reiz a:link {
color: #b5420c;
text-decoration: none;
}

.reiz a:hover {
color: #b5420c;
text-decoration: none;
border-bottom: 2px dotted #FF9933;
  }
  
.reiz a:visited {
  text-decoration: none;
  color: #b5420c;
  
}

.guestbook {
border: 2px solid #b5420c;
width: 400px;
padding: 5px;
background: #FFFFCC;

} 

#left {
width: 45%;
float: left;


}


#floatright {
float: right;
width: 45%;
display: inline;


}

#floatright p {
margin-bottom: 2em;    
}


h1 {
text-decoration:underline;
font-size: 1.5em;
padding: 0px 0px 4px;
margin: 0px;  
  
}

h2 {

text-decoration:none;
font-size: 1.5em;
text-align: center;
padding: 0em;
margin: 0px;
}


ul.navbar li {
  background: #FF9933;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black; 
  border: 2px solid #FFFFCC;
}

  
ul.navbar a {
  text-decoration: none; 
}


ul.navbar a:link {
  color: #b5420c; 
} 

ul.navbar a:hover {
  color: #FFCC66;
  text-decoration: none;
  border-bottom: 2px dotted;
  }
  
ul.navbar a:visited {
  text-decoration: none;
  color: #b5420c;
  
}

#navbar2{
background: none;
border: none;
margin-bottom: 0.5em;
padding-right: 3em;
padding-bottom: 0.3em;
padding-left: 0em;
margin-right: 8em;	 
  }

.im {
padding-top: 0em;	
padding-left: 5em;	

}


#main {
background: url(../images/mainR.jpg) no-repeat center;
height: 350px;
padding-top: 15px;		
}

#shadow {
background: url(/Silvia/images/shadowlight_03.gif) no-repeat center bottom;

   }
   
.form {

width: 170px;
font-style: normal;
padding-left: 8em;
padding-right: 0px;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding-top: 1em;
}

.form p {
margin: 0px;
padding: 0px;    
}

.form a:link {
color: #b5420c;
text-decoration: none;
}

.form a:hover {
  color: #b5420c;
  text-decoration: none;
  border-bottom: 2px dotted #FF9933;

  }
  
.form a:visited {
  text-decoration: none;
  color: #b5420c;
  
}

.formfields {

color: #b5420c;    
}

.senden {
text-align: left;
}

.formsubmit {

font-style: normal;
text-align: center;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding-top: 1em;

}

#kontimg {
     background: url(/images/main2.jpg) no-repeat 35em 1em;
 height: 367px;
 margin: 0 auto;
 padding: 0px;
}

/* Photo slide gallery */

#mygalone {
margin-right: 0px;
margin-left: 0px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;			

}


.center {

margin-left: 5em;
margin-right:5em;	
}



.center p {
padding: 4px 0px;
margin: 0px;
font-size: 80%;
color: #FF9933;
   }


.svw {width: 220px; height: 19px; background: #FFCC66; overflow: hidden;  }
.svw ul {position: relative; left: -999em;  
}



.stripViewer { /* this is the DIV container for your UL of images */
position: relative;
overflow: hidden;
border: 4px solid #FFFFCC;
margin: 0px 0 1px;
padding: 0px;	
}

.stripViewer ul { /* this is your UL of images */
position: relative;
left: 0;
top: 0;
width: 100%;
list-style-type: none;
margin-left: 0;
margin-top: 0;
padding-left: 0;
padding-top: 0;
margin-bottom: 0px;
padding-bottom: 0px;
}
.stripViewer ul li { /* each image is arranged horizontally */
float:left;
}
.stripTransmitter { /* this is the DIV for your transmitter */
clear:left;           				     

}
.stripTransmitter ul { /* the auto-generated set of links */
position: relative;
list-style-type: none;
padding: 0px;
margin: 2px 0px 0px;
}
.stripTransmitter ul li{ /* in this list too, each LI is arranged horizontally */
width: 20px;
float:left;
margin: 0 1px 1px;
padding: 0px;	
}
.stripTransmitter a{ /* the links. */
font: bold 10px/22px Verdana, Arial;
text-align: center;
background: #FF9933;
color: #FFFFCC;
text-decoration: none;
display: block;
margin: 0px;
padding: 0px;	
}
.stripTransmitter a:hover { /* hover */
background: #FF9933;
color: #fff;
}

.stripTransmitter a.current, .stripTransmitter a.current:hover { /* current */
background: #fff;
color: #FFCC66;
}

//tooltips formatting
#tooltip {
background: #fff;
color: #000;
opacity: 0.85;
border: 5px solid #dedede;
}

#tooltip h3 { 
font: normal 10px Verdana; 
margin: 0; 
padding: 6px 2px; 
border: 0;
}

Link to comment
https://forums.phpfreaks.com/topic/78908-problem-with-countdown-clock/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.