0

I'm new here and I'm not sure if I'm posting in the right thread. However, Perhaps someone can lead me to the right place. I've developed a web page in Dreamweaver CS3 and save it as a template (so I can add more pages w/ the same overall theme) So, I want to add a live day & date display to my template so it will show up on every page of my site. I went Dynamic Drive website and I saw one called "Live Date Script" which seem perfect for what I'm trying to do. Here is the problem, I followed the instruction but it never works correctly. It said place the codes anywhere in the <body tag> and place this code in side the body <body onLoad="goforit()"> I did that and I still can't get it to display correctly I'm starting to bang my head on the computer screen because it's driven me nut trying to figure this out. Can someone here enlighten me or help me trouble shoot my dilemma?

4
Contributors
15
Replies
17
Views
8 Years
Discussion Span
Last Post by starengineer
0

Wow not even one response....I was told that this site was friendly and helpful

0

Here's a simple Javascript demo that will display time and date, based on the local time in your system.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Livedate Example</title>
<style id="internal" type="text/css">
/* <![CDATA[ */
span#timestamp {
   display : inline-block;
   font : normal normal normal 90%/1.6 Verdana, Arial, sans-serif;
   background-color : #f0f0f0;
   color : #708090;
   white-space : nowrap;
   letter-spacing : 2px;
   padding : .200em .500em .200em .500em;
   border : 1px solid #ccc; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var date;
var month, weekdays, day, year, hour, minute, seconds, ampm;
var livedate;
var showDate;

date = Date.prototype.date = function() {
   month = [ "January ", "February ", "March ", "April ", "May ", "June ", "July ", "August ", "September ", "October ", "November ", "December " ][ this.getMonth() ]; // Month Names
   weekdays = [ "Sunday - ", "Monday - ", "Tuesday - ", "Wednesday - ", "Thursday - ", "Friday - ", "Saturday - " ][ this.getDay() ]; // Weekday

   day = this.getDate();
   day = ((( day < 10 ? "0" : "" ) + day ) + ", " ); // Getting ate of the month.
   year = (( this.getFullYear() ) + " " ); // Current Year
   hour = this.getHours();
   ampm = (( hour >= 12 ) ? "pm" : "am" );
   hour = (( hour >= 13 ) ? hour - 12 : hour );
   hour = (( hour === 0 ) ? 12 : hour );
   hour = (( hour < 10 ? "0" : "" ) + hour );
   minute = this.getMinutes();
   minute = (( minute < 10 ? "0" : "" ) + minute );
   seconds = this.getSeconds();
   seconds = (( seconds < 10 ? "0" : "" ) + seconds );
   return weekdays + month + day + year + hour + ":" + minute + ":" + seconds + ampm.fontcolor("red");
};

showDate = function() {
   today = new Date();
   myDate = today.date();
   return (( document.getElementById ) ? document.getElementById("timestamp").innerHTML = myDate : document.all.timestamp.innerHTML = myDate ); 
};

window.onload = function() {
   livedate = setInterval("showDate()", 1000);
};
// ]]>
</script>
</head>
<body>
<div id="main">
<span id="timestamp"></span>

</div>
</body>
</html>

Hope it helps...

0

We are sorry if we came late with our responses...
There are also many other languages that can display dates like ( PHP, VBscript, ASP, etc.) -- but since my line is in javascript, so my preferred example comes in this format.

0

the usual thing with cut n paste scripts <script> as supplied should be <script type='text/javascript'> this implementation will work

<html>
<head>
<script type='text/javascript'>
<!--
/*
Live Date Script- 
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,
visit http://www.dynamicdrive.com
*/
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12) {dn="PM"}
if (hours>12){ hours=hours-12 }
if (hours==0) { hours=12 }
if (minutes<=9) { minutes="0"+minutes }
if (seconds<=9) { seconds="0"+seconds }
//change font size here
var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}
-->
</script>
</head>
<body onLoad="goforit()">
<span id="clock"></span><!-- the span at left goes exactly where you want the clock -->
</body>
</html>

in relation to your first two posts
it takes longer than 5 hours to get a response from a company you pay,
all responses here are from 530 000 plus volunteers,
hosting costs the Queen a heap,
you get to wander in and & **expletive deleted ** think, the people who fix it for you FREE are in another **expletive deleted ** timezone

0

Ok, no response to overwhelming acknowledgment. First let me say I hope I did not offend anyone here. But being the new kid on the block can be somewhat of a challenge. Trust me, I do appreciate the responses here.

I'll try working with the codes that almostbob & essential has so graciously offered thank you so much

StarEngineer

0

Here's a simple Javascript demo that will display time and date, based on the local time in your system.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Livedate Example</title>
<style id="internal" type="text/css">
/* <![CDATA[ */
span#timestamp {
   display : inline-block;
   font : normal normal normal 90%/1.6 Verdana, Arial, sans-serif;
   background-color : #f0f0f0;
   color : #708090;
   white-space : nowrap;
   letter-spacing : 2px;
   padding : .200em .500em .200em .500em;
   border : 1px solid #ccc; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var date;
var month, weekdays, day, year, hour, minute, seconds, ampm;
var livedate;
var showDate;

date = Date.prototype.date = function() {
   month = [ "January ", "February ", "March ", "April ", "May ", "June ", "July ", "August ", "September ", "October ", "November ", "December " ][ this.getMonth() ]; // Month Names
   weekdays = [ "Sunday - ", "Monday - ", "Tuesday - ", "Wednesday - ", "Thursday - ", "Friday - ", "Saturday - " ][ this.getDay() ]; // Weekday

   day = this.getDate();
   day = ((( day < 10 ? "0" : "" ) + day ) + ", " ); // Getting ate of the month.
   year = (( this.getFullYear() ) + " " ); // Current Year
   hour = this.getHours();
   ampm = (( hour >= 12 ) ? "pm" : "am" );
   hour = (( hour >= 13 ) ? hour - 12 : hour );
   hour = (( hour === 0 ) ? 12 : hour );
   hour = (( hour < 10 ? "0" : "" ) + hour );
   minute = this.getMinutes();
   minute = (( minute < 10 ? "0" : "" ) + minute );
   seconds = this.getSeconds();
   seconds = (( seconds < 10 ? "0" : "" ) + seconds );
   return weekdays + month + day + year + hour + ":" + minute + ":" + seconds + ampm.fontcolor("red");
};

showDate = function() {
   today = new Date();
   myDate = today.date();
   return (( document.getElementById ) ? document.getElementById("timestamp").innerHTML = myDate : document.all.timestamp.innerHTML = myDate ); 
};

window.onload = function() {
   livedate = setInterval("showDate()", 1000);
};
// ]]>
</script>
</head>
<body>
<div id="main">
<span id="timestamp"></span>

</div>
</body>
</html>

Hope it helps...

this code is working in IE perfectly

0

Essential I tried your codes and they work just fine like a charm. However, I do have one more question...is it possible to disable the time and just have the date showing? And you were right it works in IE also, when I look at it in Safari it good and in Firefox & opera but in IE8 it changes a little, the date font and time is very bold but it work good. thanks for the quick tip

StarEngineer

0

Simply Insert this block after line#23

<!--[if IE 8]><style type="text/css">span#timestamp { font-size : 80%; font-weight : normal; }</style><![endif]-->

if you want to control any css rules in IE 8 mode browser. Doing this will not affect other style rules'. -

And with the script, you'll need to replace the entire <script>...</script> block with this moded version. You will find comments inside the script were you can set the time (on/off).

<script type="text/javascript">
// <![CDATA[
var date;
var month, weekdays, day, year, hour, minute, seconds, ampm;
var livedate;
var showDate;
var displayTime;

displayTime = false; // set true if you want to show the current time.

date = Date.prototype.date = function( showTime ) {
   month = [ "January ", "February ", "March ", "April ", "May ", "June ", "July ", "August ", "September ", "October ", "November ", "December " ][ this.getMonth() ]; // Month Names
   weekdays = [ "Sunday - ", "Monday - ", "Tuesday - ", "Wednesday - ", "Thursday - ", "Friday - ", "Saturday - " ][ this.getDay() ]; // Weekday

   day = this.getDate();
   day = ((( day < 10 ? "0" : "" ) + day ) + ", " ); // Getting ate of the month.
   year = (( this.getFullYear() ) + " " ); // Current Year
   hour = this.getHours();
   ampm = (( hour >= 12 ) ? "pm" : "am" );
   hour = (( hour >= 13 ) ? hour - 12 : hour );
   hour = (( hour === 0 ) ? 12 : hour );
   hour = (( hour < 10 ? "0" : "" ) + hour );
   minute = this.getMinutes();
   minute = (( minute < 10 ? "0" : "" ) + minute );
   seconds = this.getSeconds();
   seconds = (( seconds < 10 ? "0" : "" ) + seconds );

   if ( showTime ) { // You can rearrange everything from here on how you'd want to display any date object. -->
   return weekdays + month + day + year + hour + ":" + minute + ":" + seconds + ampm.fontcolor("red");
   } return weekdays + month + day + year; 
};

showDate = function() {
   (( displayTime ) ? displayTime : clearInterval( livedate ));
   today = new Date();
   myDate = today.date( displayTime ); 
   return (( document.getElementById ) ? document.getElementById("timestamp").innerHTML = myDate : document.all.timestamp.innerHTML = myDate ); 
};

window.onload = function() {
   livedate = setInterval("showDate()", 1000);
};
// ]]>
</script>

Hope it get's what you really need...

0

essential this is the code sheet I used on line #23 is
var hours=mydate.getHours()

<!--

/*

Live Date Script-

© Dynamic Drive ([url]www.dynamicdrive.com[/url])

For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,

visit [url]http://www.dynamicdrive.com[/url]

*/

var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")

var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")

function getthedate(){

var mydate=new Date()

var year=mydate.getYear()

if (year < 1000)

year+=1900

var day=mydate.getDay()

var month=mydate.getMonth()

var daym=mydate.getDate()

if (daym<10)

daym="0"+daym

var hours=mydate.getHours()

var minutes=mydate.getMinutes()

var seconds=mydate.getSeconds()

var dn="AM"

if (hours>

=12) {dn="PM"}

if (hours>12){ hours=hours-12 }

if (hours==0) { hours=12 }

if (minutes<=9) { minutes="0"+minutes }

if (seconds<=9) { seconds="0"+seconds }

//change font size here

var cdate="<small> <font color='000000' face='Arial'> <b> "+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn

+"</b> </font> </small> "

if (document.all)

document.all.clock.innerHTML=cdate

else if (document.getElementById)

document.getElementById("clock").innerHTML=cdate

else

document.write(cdate)

}

if (!document.all&&!document.getElementById)

getthedate()

function goforit(){

if (document.all||document.getElementById)

setInterval("getthedate()",1000)

}

-->

</script>

</head>

<body onLoad="goforit()">

<span id="clock"></span><!-- the span at left goes exactly where you want the clock -->

</body>

</html>
0

You may place it anywhere inside the header section of your page.

Just make sure it doesn't interfere with your <script></script> block.

0

Ok, I have two questions. based on the codes below where do I disable or turn on/off the time display.

Question (2) there is a line that say //change font size here
what is the format or javascript language to change the font size please give an example:

<html>
<head>
<script type='text/javascript'>
<!--
/*
Live Date Script- 
© Dynamic Drive ([url]www.dynamicdrive.com[/url])
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,
visit [url]http://www.dynamicdrive.com[/url]
*/
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12) {dn="PM"}
if (hours>12){ hours=hours-12 }
if (hours==0) { hours=12 }
if (minutes<=9) { minutes="0"+minutes }
if (seconds<=9) { seconds="0"+seconds }
//change font size here
var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}
-->
</script>
</head>
<body onLoad="goforit()">
<span id="clock"></span><!-- the span at left goes exactly where you want the clock -->
</body>
</html>
0

an old, form of html gives font sizes as <small><large> etc
directly below the //change font size you will see the code includes <small>some text </small> to set font size.
The script is old, and though it works it doesnt take advantage of recent developments.
the line

var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"

is the one that contains the strings for what is displayed

-copy it -comment it
and you can mess with the copy as much as you need to get the display as you wish

//commented out 
//var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn +"</b></font></small>"
var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></small>"

and still retain a backup of all the fields

0

almostbob how can I take advantage of recent developments.

would it look something like this

var cdate="<style="font-size:150% font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></small>"

here is the original

var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></small>"
0
<body onLoad="goforit()"><script>
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
 
function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//change font size here
var cdate="<small><font color='0000FF' face='Tahoma'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}
 
</script>
<span id="clock"></span>
</body>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.