taliets Posted November 26, 2007 Share Posted November 26, 2007 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; } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.