?
Solved

Countdown Timer

Posted on 2014-08-01
50
Medium Priority
?
274 Views
Last Modified: 2014-09-19
Hi all and thanks in advance

I am looking to put a time into my site that counts down to an event (date and time)

Every count down timer I have seen so far only counts down from a 'time' you specify... eg 60min, etc

Can any Genius help me? :)

Cheers in advance
0
Comment
Question by:Graeme
  • 22
  • 19
  • 3
  • +3
49 Comments
 
LVL 34

Expert Comment

by:Big Monty
ID: 40234406
taken from here, this code allows you to specify a time you want to specify.

<html>
   <head>
// set the date we're counting down to
var target_date = new Date("Aug 15, 2019").getTime();
 
// variables for time units
var days, hours, minutes, seconds;
 
// get tag element
var countdown = document.getElementById("countdown");
 
// update the tag with id "countdown" every 1 second
setInterval(function () {
 
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
     
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
     
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
     
    // format countdown string + set tag value
    countdown.innerHTML = days + "d, " + hours + "h, "
    + minutes + "m, " + seconds + "s";  
 
}, 1000);
   </head>
   <body>
        <span id="countdown"></span>
    </body>
</html>

Open in new window

0
 
LVL 22

Expert Comment

by:plusone3055
ID: 40234427
<html> 

<script type="text/javascript">
window.onload = function() {
    var countdownElement = document.getElementById('countdown'),

        seconds = 3, 
        second = 0,
        interval;
   

    interval = setInterval(function() {
        countdownElement.firstChild.data = 'CNN Webpage will load in ' + (seconds - second) + ' seconds';
        if (second >= seconds) {
           window.open ('http://www.cnn.com/','_self',false)
            clearInterval(interval);
        }

        second++;
    }, 1000);
}
</script>


<body>

<div id="countdown"> 
Greetings User
</div>

</body>

</html> 

Open in new window

0
 

Author Comment

by:Graeme
ID: 40234450
BigMonty, I have cut and paste this directly into my page and it does not show anything...

the Code has not been altered at all
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 22

Expert Comment

by:plusone3055
ID: 40234454
graeme

please try my code I made a simple  example for you to follow
0
 

Author Comment

by:Graeme
ID: 40234460
Cutting and pasting yours Plusone3055, shows nothing as well
0
 
LVL 22

Expert Comment

by:plusone3055
ID: 40234466
here is the code in  a .html file
CountDown.html
0
 

Author Comment

by:Graeme
ID: 40234469
its the same as i cut and pasted...
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40234471
Try this

 
<html>
   <head>
Function doTimer() {
// set the date we're counting down to
var target_date = new Date("Aug 15, 2019").getTime();
 
// variables for time units
var days, hours, minutes, seconds;
 
// get tag element
var countdown = document.getElementById("countdown");
 
// update the tag with id "countdown" every 1 second
setInterval(function () {
 
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
     
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
     
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
     
    // format countdown string + set tag value
    countdown.innerHTML = days + "d, " + hours + "h, "
    + minutes + "m, " + seconds + "s";  
 
}, 1000);
} 
   </head>
   <body onload="doTimer() ">
        <span id="countdown"></span>
    </body>
</html>

Open in new window

0
 

Author Comment

by:Graeme
ID: 40234480
Still nothing Big Monty

I am putting this code into <script> </script> too I am assuming...
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40234494
I'll get you something when I get back to my computer
0
 

Author Comment

by:Graeme
ID: 40234497
Thank you Big Monty
0
 
LVL 58

Expert Comment

by:Gary
ID: 40234663
No points for this, it's just Monty's code fixed

<html>
   <head>
<script>
function doTimer() {
// set the date we're counting down to
var target_date = new Date("Aug 15, 2019").getTime();
 
// variables for time units
var days, hours, minutes, seconds;
 
// get tag element
var countdown = document.getElementById("countdown");
 
// update the tag with id "countdown" every 1 second
setInterval(function () {
 
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
     
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
     
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
    // format countdown string + set tag value
    countdown.innerHTML = days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s";  
 
}, 1000);
} 
</script>
   </head>
   <body onload="doTimer()">
        <span id="countdown"></span>
    </body>
</html>

Open in new window

0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40234891
How do you want the counter to look?  I have been using moment  http://momentjs.com/  It is a js timer library.  It is very easy to use to convert, add, subtract date and time.  Especially useful when you have date in a database in one format and need to put in another.


I use moment for a count down timer to show the amount of time left until you are logged out.  If the other solution does not work out, I would be happy to detail.  But it is at least worth the time to look over moment.js if you use time in your  projects.
0
 

Author Comment

by:Graeme
ID: 40239159
Ray -  tried that code you suggested, nothing appears

Gary -  cheers, still nothing showing

Scott - Would like a Days, Hours, Minutes, Seconds Countdown, however from the event (pulled from database, changes week to week)
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40239171
the code Gary fixed does indeed work - http://www.exchangetree.org/test.asp

did you copy the code exactly as is or did you integrate it into existing code? do you have a test link we can see the page in question? what browser are you using?
0
 

Author Comment

by:Graeme
ID: 40239181
Argh! had something out of place :/

now all I need to do is pull the event times/dates out of an Access database to show the countdown
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40239189
You would just use a call from the db to set the event date/time

var target_date = new Date("Aug 15, 2019").getTime();

convert to

var target_date = new Date("<%=rs("date")%>")
0
 

Author Comment

by:Graeme
ID: 40239215
ok updated the code to reflect the db date/time

NaNd NaNh NaNm NaNs until Practice 1.. ideas?
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40239216
excellent, now to get the data from the database, you would modify the code to look something like:

<%
dim conn, rs, sql, targetDate

set conn = Server.CreateObject("ADODB.Connection")
set rs = Server.CreateObject("ADODB.RecordSet")
conn.Open connectionString     '-- fill in your db connection details here

sql = "select targetDate from tblName where......"    '-- sql to grab your date
set rs = conn.Execute( sql )

if not rs.BOF and not rs.EOF then
     targetDate = rs("targetDate")
else
     targetDate = Now()    '-- set a default value in case it doesnt get a date from the database, this is of course optional
end if

if rs.state <> 0 then rs.Close
conn.Close
set rs = nothing
set conn = nothing
%>
<html>
   <head>
<script>
function doTimer() {
// set the date we're counting down to
var target_date = new Date("<%=targetDate%>").getTime();
 
// variables for time units
var days, hours, minutes, seconds;
 
// get tag element
var countdown = document.getElementById("countdown");
 
// update the tag with id "countdown" every 1 second
setInterval(function () {
 
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
     
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
     
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
    // format countdown string + set tag value
    countdown.innerHTML = days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s";  
 
}, 1000);
} 
</script>
   </head>
   <body onload="doTimer()">
        <span id="countdown"></span>
    </body>
</html>

Open in new window

0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40239219
it would help to see the code you're using as well as the output (do a view source and copy & paste that here
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40239223
also, what format is the date in?
0
 

Author Comment

by:Graeme
ID: 40239229
<html><!-- InstanceBegin template="/Templates/template.dwt.asp" codeOutsideHTMLIsLocked="false" -->
<head>
<title>Aus F1 Tours.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%
	Dim oConn

	Set oConn=Server.CreateObject("ADODB.Connection")
	Set Enquiry=Server.CreateObject("ADODB.Recordset")

	oConn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("core/core.mdb")

	SESSION("cn")="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("core/core.mdb")&";Persist Security Info=False"
	
	Today=Day(date())&"/"&Month(date())&"/"&Year(date())
	
	Set RaceNext=oConn.Execute("SELECT * FROM race_weekends WHERE confirmed=YES AND Date_from>"&Today)
	Set NextSession=oConn.Execute("SELECT * FROM race_sessions WHERE GP_ID="&RaceNext("ID"))
%>
<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
body {
	background-color: #000000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url();
}
a:link {
	color: #CCCCCC;
}
a:visited {
	color: #CCCCCC;
}
.style1 {color: #000000}
.style2 {font-size: 10px}
.style6 {
	font-size: 50px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-53350090-1', 'auto');
  ga('send', 'pageview');
</script>
<script>
function doTimer() {
// set the date we're counting down to
var target_date = new Date("<%=NextSession("Session_DateTime")%>")
 
// variables for time units
var days, hours, minutes, seconds;
 
// get tag element
var countdown = document.getElementById("countdown");
 
// update the tag with id "countdown" every 1 second
setInterval(function () {
 
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
     
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
     
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
    // format countdown string + set tag value
    countdown.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s";  
 
}, 1000);
} 
</script>
</head>
<body onload="doTimer()">
	<table width=1346 border=0 align="center" cellpadding=0 cellspacing=0 background="images/formula_1_bg.jpg">
<!-- InstanceBeginEditable name="body" -->
<%
	Set Races=oConn.Execute("SELECT * FROM race_weekends WHERE confirmed=YES AND Date_from>"&Today&" ORDER BY Date_to")
'	Response.Write("SELECT * FROM race_weekends WHERE confirmed=YES AND "&Races("Date_from")&">"&Today&" ORDER BY Date_to")
%>
		<tr>
			<td width=998 height=134 valign=middle><span class="style6"><img src="images/logo.png" width="290" height="119" align="absbottom"></span></td>
			<td width=350 height=134 rowspan=3 valign=top>
<%
	Count=0
	Do Until Races.EOF
	If Count=10 Then Exit Do
%>
				<table width=100%>
                  <tr>
                    <td width=250 valign="middle"><div align="left" class="style1"><%=Races("Season")%>&nbsp;<%=Races("Grand_Prix")%><br><span class="style2"><%=Races("City")%>&nbsp;-&nbsp;<%=Races("Circuit")%></span><br><%=Day(Races("Date_from"))%><% If Month(Races("Date_from"))<>Month(Races("Date_to")) Then Response.Write("&nbsp;"&MonthName(Month(Races("Date_from")))) End If%>-<%=Day(Races("Date_to"))%>&nbsp;<%=MonthName(Month(Races("Date_to")),True)%>&nbsp;<%=Year(Races("Date_to"))%></div></td>
                    <td width=110 height=80><img src="images/<%=Races("flag")%>-flag-icon.png" width="110" height="80"></td>
                  </tr>
                </table>
<%
	Count=Count+1
	Races.MoveNext
		Loop
	Races.Close
%>
			</td>
		</tr>
		<tr>
			<td height=40>&nbsp;:: Home || Race Packages || Race Tickets || Contact Us :: <input name=login type=text> <input name=password type=password> :: Login || Register ::</td>
		</tr>
		<tr>
			<td>
			<table width="990" height=700 cellpadding="0" cellspacing="0">
              <tr>
                <td width=790 height=248 valign=top background="images/<%=RaceNext("season")-1%>-<%=RaceNext("flag")%>.jpg"><div align="left">
                  <p>&nbsp;</p>
                  <p>&nbsp;<span id="countdown"></span> until Practice 1</p>
                </div></td>
                <td width=200 height=248 valign=top background="images/<%=RaceNext("season")-1%>-<%=RaceNext("flag")%>-winner.jpg">&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </table>
			</td>
		</tr>
<%
	RaceNext.Close
%>
<!-- InstanceEndEditable -->
		<tr>
			<td>footer</td>
			<td><div align="center"><span class="style1">List All Race Weekends</span></div></td>
		</tr>
	</table>
    <div align="center"></div>
</body>
<!-- InstanceEnd --></html>

Open in new window

0
 

Author Comment

by:Graeme
ID: 40239233
The Format for DateTime is General Date 19/06/2012 5:45:32 PM
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40239244
can you copy and paste the source code (do a view source to get it)?
0
 

Author Comment

by:Graeme
ID: 40239251
<html><!-- InstanceBegin template="/Templates/template.dwt.asp" codeOutsideHTMLIsLocked="false" -->
<head>
<title>Aus F1 Tours.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
body {
	background-color: #000000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url();
}
a:link {
	color: #CCCCCC;
}
a:visited {
	color: #CCCCCC;
}
.style1 {color: #000000}
.style2 {font-size: 10px}
.style6 {
	font-size: 50px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-53350090-1', 'auto');
  ga('send', 'pageview');
</script>
<script>
function doTimer() {
// set the date we're counting down to
var target_date = new Date("10:00:00 AM")
 
// variables for time units
var days, hours, minutes, seconds;
 
// get tag element
var countdown = document.getElementById("countdown");
 
// update the tag with id "countdown" every 1 second
setInterval(function () {
 
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
     
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
     
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
    // format countdown string + set tag value
    countdown.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s";  
 
}, 1000);
} 
</script>
</head>
<body onload="doTimer()">
	<table width=1346 border=0 align="center" cellpadding=0 cellspacing=0 background="images/formula_1_bg.jpg">
<!-- InstanceBeginEditable name="body" -->

		<tr>
			<td width=998 height=134 valign=middle><span class="style6"><img src="images/logo.png" width="290" height="119" align="absbottom"></span></td>
			<td width=350 height=134 rowspan=3 valign=top>

				<table width=100%>
                  <tr>
                    <td width=250 valign="middle"><div align="left" class="style1">2014&nbsp;Belgian Grand Prix<br><span class="style2">Spa&nbsp;-&nbsp;Spa Francorchamps</span><br>22-24&nbsp;Aug&nbsp;2014</div></td>
                    <td width=110 height=80><img src="images/belgium-flag-icon.png" width="110" height="80"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="middle"><div align="left" class="style1">2014&nbsp;Italian Grand Prix<br><span class="style2">Monza&nbsp;-&nbsp;Autodromo Nazionale</span><br>5-7&nbsp;Sep&nbsp;2014</div></td>
                    <td width=110 height=80><img src="images/italy-flag-icon.png" width="110" height="80"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="middle"><div align="left" class="style1">2014&nbsp;Singapore Grand Prix<br><span class="style2">Singapore&nbsp;-&nbsp;Singapore Streets</span><br>19-21&nbsp;Sep&nbsp;2014</div></td>
                    <td width=110 height=80><img src="images/singapore-flag-icon.png" width="110" height="80"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="middle"><div align="left" class="style1">2014&nbsp;Japanese Grand Prix<br><span class="style2">Suzuka City&nbsp;-&nbsp;Suzuka</span><br>3-5&nbsp;Oct&nbsp;2014</div></td>
                    <td width=110 height=80><img src="images/japan-flag-icon.png" width="110" height="80"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="middle"><div align="left" class="style1">2014&nbsp;Russian Grand Prix<br><span class="style2">Sochi&nbsp;-&nbsp;Sochi Autodrom</span><br>10-12&nbsp;Oct&nbsp;2014</div></td>
                    <td width=110 height=80><img src="images/russia-flag-icon.png" width="110" height="80"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="middle"><div align="left" class="style1">2014&nbsp;US Grand Prix<br><span class="style2">Austin&nbsp;-&nbsp;Circuit of The Americas</span><br>1-3&nbsp;Nov&nbsp;2014</div></td>
                    <td width=110 height=80><img src="images/usa-flag-icon.png" width="110" height="80"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="middle"><div align="left" class="style1">2014&nbsp;Brazilian Grand Prix<br><span class="style2">Interlagos&nbsp;-&nbsp;Autodromo Interlagos</span><br>8-10&nbsp;Nov&nbsp;2014</div></td>
                    <td width=110 height=80><img src="images/brazil-flag-icon.png" width="110" height="80"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="middle"><div align="left" class="style1">2014&nbsp;Abu Dhabi Grand Prix<br><span class="style2">Abu Dhabi&nbsp;-&nbsp;Yas Marina</span><br>21-23&nbsp;Nov&nbsp;2014</div></td>
                    <td width=110 height=80><img src="images/uae-flag-icon.png" width="110" height="80"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="middle"><div align="left" class="style1">2015&nbsp;Australian Grand Prix<br><span class="style2">Melbourne&nbsp;-&nbsp;Albert Park</span><br>13-15&nbsp;Mar&nbsp;2015</div></td>
                    <td width=110 height=80><img src="images/australia-flag-icon.png" width="110" height="80"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="middle"><div align="left" class="style1">2015&nbsp;Spanish Grand Prix<br><span class="style2">Barcelona&nbsp;-&nbsp;Circuit du Catalunya</span><br>8-10&nbsp;May&nbsp;2015</div></td>
                    <td width=110 height=80><img src="images/spain-flag-icon.png" width="110" height="80"></td>
                  </tr>
                </table>

			</td>
		</tr>
		<tr>
			<td height=40>&nbsp;:: Home || Race Packages || Race Tickets || Contact Us :: <input name=login type=text> <input name=password type=password> :: Login || Register ::</td>
		</tr>
		<tr>
			<td>
			<table width="990" height=700 cellpadding="0" cellspacing="0">
              <tr>
                <td width=790 height=248 valign=top background="images/2013-belgium.jpg"><div align="left">
                  <p>&nbsp;</p>
                  <p>&nbsp;<span id="countdown"></span> until Practice 1</p>
                </div></td>
                <td width=200 height=248 valign=top background="images/2013-belgium-winner.jpg">&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </table>
			</td>
		</tr>

<!-- InstanceEndEditable -->
		<tr>
			<td>footer</td>
			<td><div align="center"><span class="style1">List All Race Weekends</span></div></td>
		</tr>
	</table>
    <div align="center"></div>
</body>
<!-- InstanceEnd --></html>

Open in new window

0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40239274
it seems

NextSession("Session_DateTime")

is just a time, that's why you're getting the NaN output.

does the database value contain an actual date or is just a time?
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40239275
Just use

var target_date = new Date("<%= year(rs("date"))%>,<%= month(rs("date"))%>,<%= day(rs("date"))%>,<%= hour(rs("date"))%>,<%= minute(rs("date"))%>")

Open in new window

0
 

Author Comment

by:Graeme
ID: 40239285
Big Monty - its just showing a time

Should I add another column for a date too??
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40239294
well, it depends, do you just want the countdown for hours/minutes/seconds or do you want the countdown to include days/weeks/years (or any combo of those options)?
0
 

Author Comment

by:Graeme
ID: 40239296
days/hours/mintues/seconds please
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40239310
then yes, you can either add another column for the date field or preferably, just change the Session_DateTime field to be a Date/Time field (I would go with this option), and then update your data to include a date in as well.

if you have a lot of data that you don't want to / can't update, you could always put in some code that'll just convert the time to include todays date in it. That way you can only worry about new data going forward and adding in the date for new records. depends on what you're requirements are
0
 

Author Comment

by:Graeme
ID: 40239315
whilst waiting for you posting, I have added in a separate date field :P
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40239336
while that may be the easy solution now, I strongly recommend changing the Session_DateTime field to Date/Time as that will be less maintenance in the long run.

are you open to doing it that way, or is there just too much data to update?
0
 

Author Comment

by:Graeme
ID: 40239339
Yeah defiantely open to it! :)

Fire away sir!
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40239349
ok, then follow the steps listed here and ask any questions you have. once you have the proper data in the database, no code changes should be necessary
0
 

Author Comment

by:Graeme
ID: 40239377
ok so I have updated the fields for dates and time in it, the format is general date

output on page: NaNd NaNh NaNm NaNs until Practice 1

http://www.ausf1tours.com/index.asp
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40239421
looks like the format of the date is causing issues, try updating your javascript to the following:

function doTimer() {
// set the date we're counting down to
var dateString = new Date("<%=NextSession("Session_DateTime")%>");

var target_date = new Date(parseInt(dateString.getMonth() + 1) + "/" + dateString.getDay() + "/" + dateString.getFullYear() );

Open in new window

0
 

Author Comment

by:Graeme
ID: 40240841
Hi Big Monty, have just replaced my code with yours, still same output, NaN
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40241328
can you post the code you're using?
0
 

Author Comment

by:Graeme
ID: 40253102
Sorry! sorta got distracted by a lady! :P

Here we are:
<html><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<title>Aus F1 Tours.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%
	Dim oConn

	Set oConn=Server.CreateObject("ADODB.Connection")
	Set Enquiry=Server.CreateObject("ADODB.Recordset")

	oConn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("core/core.mdb")

	SESSION("cn")="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("core/core.mdb")&";Persist Security Info=False"
	
	Today=Day(date())&"/"&Month(date())&"/"&Year(date())
	
	Set RaceNext=oConn.Execute("SELECT * FROM race_weekends WHERE confirmed=YES AND Date_from>"&Today)
	Set NextSession=oConn.Execute("SELECT * FROM race_sessions WHERE GP_ID="&RaceNext("ID"))
	Set Races=oConn.Execute("SELECT * FROM race_weekends WHERE confirmed=YES AND Date_from>"&Today&" ORDER BY Date_to")
'	Response.Write("SELECT * FROM race_weekends WHERE confirmed=YES AND "&Races("Date_from")&">"&Today&" ORDER BY Date_to")
%>
<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
body {
	background-color: #000000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url();
}
a:link {
	color: #000000;
}
a:visited {
	color: #000000;
}
.style1 {color: #000000}
.style2 {font-size: 10px}
.style6 {
	font-size: 50px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
a:active {
	color: #000000;
}
.style7 {color: #FFFFFF}
-->
</style>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-53350090-1', 'auto');
  ga('send', 'pageview');
</script>
<script>
function doTimer() {
// set the date we're counting down to
var dateString = new Date("<%=NextSession("Session_DateTime")%>");

var target_date = new Date(parseInt(dateString.getMonth() + 1) + "/" + dateString.getDay() + "/" + dateString.getFullYear() );

// variables for time units
var days, hours, minutes, seconds;
 
// get tag element
var countdown = document.getElementById("countdown");
 
// update the tag with id "countdown" every 1 second
setInterval(function () {
 
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
     
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
     
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
    // format countdown string + set tag value
    countdown.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s";  
 
}, 1000);
} 
</script>
</head>
<body onload="doTimer()">
	<table width=1346 border=0 align="center" cellpadding=0 cellspacing=0 background="images/formula_1_bg.jpg">
		<tr>
			<td width=998 height=120 valign=middle><span class="style6"><img src="images/logo.png" width="290" height="119" align="absbottom"></span></td>
			<td width=350 rowspan=3 valign=top>
<%
	Count=0
	Do Until Races.EOF
	If Count=10 Then Exit Do
%>
				<table width=100%>
                  <tr>
                    <td width=250 valign="top"><div align="left" class="style1"><%=Year(Races("date_from"))%>&nbsp;<%=Races("Grand_Prix")%><br><span class="style2"><%=Races("City")%> - <%=Races("Circuit")%></span><br><%=Day(Races("Date_from"))%>-<%=Day(Races("Date_to"))%>&nbsp;<%=MonthName(Month(Races("Date_to")))%></div></td>
                    <td width=108><img src="/images/<%=Races("flag")%>-flag-icon.png" width="100%" height="80%"></td>
                  </tr>
                </table>
<%
	Count=Count+1
	Races.MoveNext
		Loop
	Races.Close
%>
        	</td>
		</tr>
	<form name=BodyForm method=POST action=process.asp id=BodyForm>
		<tr>
			<td height=40>&nbsp;:: Home || Race Packages || Race Tickets || Contact Us :: <input name=login type=text> <input name=password type=password> :: Login || Register ::</td>
		</tr>
<!-- InstanceBeginEditable name="body" -->
		<tr>
			<td valign="top">
			<table width="990" height=100% cellpadding="0" cellspacing="0">
              <tr>
                <td width=790 height=248 valign=top background="images/<%=YEAR(RaceNext("DATE_FROM"))-1%>-<%=RaceNext("flag")%>.jpg"><div align="left"><p>&nbsp;</p><p>&nbsp;<span id="countdown"></span> until Practice 1</p></div></td>
                <td width=200 height=248 valign=top background="images/<%=YEAR(RaceNext("DATE_FROM"))-1%>-<%=RaceNext("flag")%>-winner.jpg">&nbsp;</td>
              </tr>
              <tr>
                <td colspan=2><br>
				  <table width="25%" height=300 cellpadding="0" cellspacing="0">
				    <tr>
					  <td valign="top"><div align="center"><h2>7-Day Budget Package<br>from $3999pp*</h2></div></td>
				    </tr>
				    <tr>
					  <td valign="top">includes:</td>
				    </tr>
				    <tr>
					  <td valign="top">-Return Economy Airfares</td>
				    </tr>
				    <tr>
					  <td valign="top">-General Admin Weekend Ticket </td>
				    </tr>
				    <tr>
					  <td valign="top">-2-Berth Campervan*</td>
				    </tr>
				    <tr>
					  <td valign="top">-Camping Grounds Accomodation</td>
				    </tr>
				    <tr>
					  <td valign="top">-Track Day*</td>
				    </tr>
				    <tr>
					  <td valign="top">-Shirt and Cap of your favorite Driver or Team*</td>
				    </tr>
       			  </table>
				</td>
              </tr>
            </table>
			</td>
		</tr>
<%
	RaceNext.Close
%>
<!-- InstanceEndEditable -->
	</form>
		<tr>
			<td>footer </td>
			<td><div align="center"><span class="style7">List All Race Weekends</span></div></td>
		</tr>
	</table>
</body>
<!-- InstanceEnd --></html>

Open in new window

0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40253301
happens to the best of us :)

when you do a view source of the page, what does the variable datestring equal?

var dateString = new Date("<%=NextSession("Session_DateTime")%>");
0
 

Author Comment

by:Graeme
ID: 40258924
This is from source

var dateString = new Date("22/08/2014 10:00:00 AM");
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40259149
try this for your code:

<html><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<title>Aus F1 Tours.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%
	Dim oConn

	Set oConn=Server.CreateObject("ADODB.Connection")
	Set Enquiry=Server.CreateObject("ADODB.Recordset")

	oConn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("core/core.mdb")

	SESSION("cn")="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("core/core.mdb")&";Persist Security Info=False"
	
	Today=Day(date())&"/"&Month(date())&"/"&Year(date())
	
	Set RaceNext=oConn.Execute("SELECT * FROM race_weekends WHERE confirmed=YES AND Date_from>"&Today)
	Set NextSession=oConn.Execute("SELECT * FROM race_sessions WHERE GP_ID="&RaceNext("ID"))
	Set Races=oConn.Execute("SELECT * FROM race_weekends WHERE confirmed=YES AND Date_from>"&Today&" ORDER BY Date_to")
'	Response.Write("SELECT * FROM race_weekends WHERE confirmed=YES AND "&Races("Date_from")&">"&Today&" ORDER BY Date_to")

         dim startCounter : startCounter = Now()
         if not NextSession.BOF and not NextSession.EOF then 
               startCounter = NextSession("Session_DateTime")
                startCounter = Month( startCounter ) & "/" & Day( startCounter ) & "/" & Year( startCounter ) & " " & Hour( startCounter ) & ":" & Minute( startCounter ) & ":" & Second( startCounter )
          end if

 
%>
<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
body {
	background-color: #000000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url();
}
a:link {
	color: #000000;
}
a:visited {
	color: #000000;
}
.style1 {color: #000000}
.style2 {font-size: 10px}
.style6 {
	font-size: 50px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
a:active {
	color: #000000;
}
.style7 {color: #FFFFFF}
-->
</style>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-53350090-1', 'auto');
  ga('send', 'pageview');
</script>
<script>
function doTimer() {
// set the date we're counting down to
var dateString = new Date("<%=startCounter%>");

var target_date = new Date(parseInt(dateString.getMonth() + 1) + "/" + dateString.getDay() + "/" + dateString.getFullYear() );

// variables for time units
var days, hours, minutes, seconds;
 
// get tag element
var countdown = document.getElementById("countdown");
 
// update the tag with id "countdown" every 1 second
setInterval(function () {
 
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
     
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
     
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
    // format countdown string + set tag value
    countdown.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s";  
 
}, 1000);
} 
</script>
</head>
<body onload="doTimer()">
	<table width=1346 border=0 align="center" cellpadding=0 cellspacing=0 background="images/formula_1_bg.jpg">
		<tr>
			<td width=998 height=120 valign=middle><span class="style6"><img src="images/logo.png" width="290" height="119" align="absbottom"></span></td>
			<td width=350 rowspan=3 valign=top>
<%
	Count=0
	Do Until Races.EOF
	If Count=10 Then Exit Do
%>
				<table width=100%>
                  <tr>
                    <td width=250 valign="top"><div align="left" class="style1"><%=Year(Races("date_from"))%>&nbsp;<%=Races("Grand_Prix")%><br><span class="style2"><%=Races("City")%> - <%=Races("Circuit")%></span><br><%=Day(Races("Date_from"))%>-<%=Day(Races("Date_to"))%>&nbsp;<%=MonthName(Month(Races("Date_to")))%></div></td>
                    <td width=108><img src="/images/<%=Races("flag")%>-flag-icon.png" width="100%" height="80%"></td>
                  </tr>
                </table>
<%
	Count=Count+1
	Races.MoveNext
		Loop
	Races.Close
%>
        	</td>
		</tr>
	<form name=BodyForm method=POST action=process.asp id=BodyForm>
		<tr>
			<td height=40>&nbsp;:: Home || Race Packages || Race Tickets || Contact Us :: <input name=login type=text> <input name=password type=password> :: Login || Register ::</td>
		</tr>
<!-- InstanceBeginEditable name="body" -->
		<tr>
			<td valign="top">
			<table width="990" height=100% cellpadding="0" cellspacing="0">
              <tr>
                <td width=790 height=248 valign=top background="images/<%=YEAR(RaceNext("DATE_FROM"))-1%>-<%=RaceNext("flag")%>.jpg"><div align="left"><p>&nbsp;</p><p>&nbsp;<span id="countdown"></span> until Practice 1</p></div></td>
                <td width=200 height=248 valign=top background="images/<%=YEAR(RaceNext("DATE_FROM"))-1%>-<%=RaceNext("flag")%>-winner.jpg">&nbsp;</td>
              </tr>
              <tr>
                <td colspan=2><br>
				  <table width="25%" height=300 cellpadding="0" cellspacing="0">
				    <tr>
					  <td valign="top"><div align="center"><h2>7-Day Budget Package<br>from $3999pp*</h2></div></td>
				    </tr>
				    <tr>
					  <td valign="top">includes:</td>
				    </tr>
				    <tr>
					  <td valign="top">-Return Economy Airfares</td>
				    </tr>
				    <tr>
					  <td valign="top">-General Admin Weekend Ticket </td>
				    </tr>
				    <tr>
					  <td valign="top">-2-Berth Campervan*</td>
				    </tr>
				    <tr>
					  <td valign="top">-Camping Grounds Accomodation</td>
				    </tr>
				    <tr>
					  <td valign="top">-Track Day*</td>
				    </tr>
				    <tr>
					  <td valign="top">-Shirt and Cap of your favorite Driver or Team*</td>
				    </tr>
       			  </table>
				</td>
              </tr>
            </table>
			</td>
		</tr>
<%
	RaceNext.Close
%>
<!-- InstanceEndEditable -->
	</form>
		<tr>
			<td>footer </td>
			<td><div align="center"><span class="style7">List All Race Weekends</span></div></td>
		</tr>
	</table>
</body>
<!-- InstanceEnd --></html>

Open in new window

0
 

Author Comment

by:Graeme
ID: 40276622
Hiya, i got numbers!! however they are counting up :P

-16d -23h -15m -56s until Practice 1
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40276638
can you post your latest code?
0
 

Author Comment

by:Graeme
ID: 40276646
<html><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<title>Aus F1 Tours.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
body {
	background-color: #000000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url();
}
a:link {
	color: #000000;
}
a:visited {
	color: #000000;
}
.style1 {color: #000000}
.style2 {font-size: 10px}
.style6 {
	font-size: 50px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
a:active {
	color: #000000;
}
.style7 {color: #FFFFFF}
-->
</style>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-53350090-1', 'auto');
  ga('send', 'pageview');
</script>
<script>
function doTimer() {
// set the date we're counting down to
var dateString = new Date("8/22/2014 10:0:0");

var target_date = new Date(parseInt(dateString.getMonth() + 1) + "/" + dateString.getDay() + "/" + dateString.getFullYear() );

// variables for time units
var days, hours, minutes, seconds;
 
// get tag element
var countdown = document.getElementById("countdown");
 
// update the tag with id "countdown" every 1 second
setInterval(function () {
 
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
     
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
     
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
    // format countdown string + set tag value
    countdown.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s";  
 
}, 1000);
} 
</script>
</head>
<body onload="doTimer()">
	<table width=1346 border=0 align="center" cellpadding=0 cellspacing=0 background="images/formula_1_bg.jpg">
		<tr>
			<td width=998 height=120 valign=middle><span class="style6"><img src="images/logo.png" width="290" height="119" align="absbottom"></span></td>
			<td width=350 rowspan=3 valign=top>

				<table width=100%>
                  <tr>
                    <td width=250 valign="top"><div align="left" class="style1">2014&nbsp;Belgian Grand Prix<br><span class="style2">Spa - Spa Francorchamps</span><br>22-24&nbsp;August</div></td>
                    <td width=108><img src="/images/belgium-flag-icon.png" width="100%" height="80%"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="top"><div align="left" class="style1">2014&nbsp;Italian Grand Prix<br><span class="style2">Monza - Autodromo Nazionale</span><br>5-7&nbsp;September</div></td>
                    <td width=108><img src="/images/italy-flag-icon.png" width="100%" height="80%"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="top"><div align="left" class="style1">2014&nbsp;Singapore Grand Prix<br><span class="style2">Singapore - Singapore Streets</span><br>19-21&nbsp;September</div></td>
                    <td width=108><img src="/images/singapore-flag-icon.png" width="100%" height="80%"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="top"><div align="left" class="style1">2014&nbsp;Japanese Grand Prix<br><span class="style2">Suzuka City - Suzuka</span><br>3-5&nbsp;October</div></td>
                    <td width=108><img src="/images/japan-flag-icon.png" width="100%" height="80%"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="top"><div align="left" class="style1">2014&nbsp;Russian Grand Prix<br><span class="style2">Sochi - Sochi Autodrom</span><br>10-12&nbsp;October</div></td>
                    <td width=108><img src="/images/russia-flag-icon.png" width="100%" height="80%"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="top"><div align="left" class="style1">2014&nbsp;US Grand Prix<br><span class="style2">Austin - Circuit of The Americas</span><br>1-3&nbsp;November</div></td>
                    <td width=108><img src="/images/usa-flag-icon.png" width="100%" height="80%"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="top"><div align="left" class="style1">2014&nbsp;Brazilian Grand Prix<br><span class="style2">Interlagos - Autodromo Interlagos</span><br>8-10&nbsp;November</div></td>
                    <td width=108><img src="/images/brazil-flag-icon.png" width="100%" height="80%"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="top"><div align="left" class="style1">2014&nbsp;Abu Dhabi Grand Prix<br><span class="style2">Abu Dhabi - Yas Marina</span><br>21-23&nbsp;November</div></td>
                    <td width=108><img src="/images/uae-flag-icon.png" width="100%" height="80%"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="top"><div align="left" class="style1">2015&nbsp;Australian Grand Prix<br><span class="style2">Melbourne - Albert Park</span><br>13-15&nbsp;March</div></td>
                    <td width=108><img src="/images/australia-flag-icon.png" width="100%" height="80%"></td>
                  </tr>
                </table>

				<table width=100%>
                  <tr>
                    <td width=250 valign="top"><div align="left" class="style1">2015&nbsp;Spanish Grand Prix<br><span class="style2">Barcelona - Circuit du Catalunya</span><br>8-10&nbsp;May</div></td>
                    <td width=108><img src="/images/spain-flag-icon.png" width="100%" height="80%"></td>
                  </tr>
                </table>

        	</td>
		</tr>
	<form name=BodyForm method=POST action=process.asp id=BodyForm>
		<tr>
			<td height=40>&nbsp;:: Home || Race Packages || Race Tickets || Contact Us :: <input name=login type=text> <input name=password type=password> :: Login || Register ::</td>
		</tr>
<!-- InstanceBeginEditable name="body" -->
		<tr>
			<td valign="top">
			<table width="990" height=100% cellpadding="0" cellspacing="0">
              <tr>
                <td width=790 height=248 valign=top background="images/2013-belgium.jpg"><div align="left"><p>&nbsp;</p><p>&nbsp;<span id="countdown"></span> until Practice 1</p></div></td>
                <td width=200 height=248 valign=top background="images/2013-belgium-winner.jpg">&nbsp;</td>
              </tr>
              <tr>
                <td colspan=2><br>
				  <table width="25%" height=300 cellpadding="0" cellspacing="0">
				    <tr>
					  <td valign="top"><div align="center"><h2>7-Day Budget Package<br>from $3999pp*</h2></div></td>
				    </tr>
				    <tr>
					  <td valign="top">includes:</td>
				    </tr>
				    <tr>
					  <td valign="top">-Return Economy Airfares</td>
				    </tr>
				    <tr>
					  <td valign="top">-General Admin Weekend Ticket </td>
				    </tr>
				    <tr>
					  <td valign="top">-2-Berth Campervan*</td>
				    </tr>
				    <tr>
					  <td valign="top">-Camping Grounds Accomodation</td>
				    </tr>
				    <tr>
					  <td valign="top">-Track Day*</td>
				    </tr>
				    <tr>
					  <td valign="top">-Shirt and Cap of your favorite Driver or Team*</td>
				    </tr>
       			  </table>
				</td>
              </tr>
            </table>
			</td>
		</tr>

<!-- InstanceEndEditable -->
	</form>
		<tr>
			<td>footer </td>
			<td><div align="center"><span class="style7">List All Race Weekends</span></div></td>
		</tr>
	</table>
</body>
<!-- InstanceEnd --></html>

Open in new window

0
 
LVL 34

Accepted Solution

by:
Big Monty earned 600 total points
ID: 40277371
just came across the following plug-in, maybe it's something you want to consider using?

http://www.gieson.com/Library/projects/utilities/countdown/

if you want to continue using what we have built, use the following javascript code:

function doTimer() {
// set the date we're counting down to
var target_date = new Date("8/22/2014 10:0:0");

//var target_date = new Date(parseInt(dateString.getMonth() + 1) + "/" + dateString.getDay() + "/" + dateString.getFullYear() );

// variables for time units
var days, hours, minutes, seconds;
 
// get tag element
var countdown = document.getElementById("countdown");
 
// update the tag with id "countdown" every 1 second
setInterval(function () {
 
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
     
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
     
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
     
    // format countdown string + set tag value
    countdown.innerHTML = days + "d, " + hours + "h, "
    + minutes + "m, " + seconds + "s";  
 
}, 1000);
} 

Open in new window


note that i commented out the second line and used the first line as the target_date contents
0
 

Author Closing Comment

by:Graeme
ID: 40332139
Works a treat! :) Thank you very much! :)
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question