PDA

Click to See Complete Forum and Search --> : Changing font size and colour of DATE

timla
12-09-2003, 07:16 PM
Hi. I am new to using Javascript so this is probably a basic question for you guys.

I am trying to change the font size and colour of the DATE Javascript below:

<BODY>

<SCRIPT LANGUAGE="JavaScript1.2">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var months=new Array(13);
months[1]="January";
months[2]="February";
months[3]="March";
months[4]="April";
months[5]="May";
months[6]="June";
months[7]="July";
months[8]="August";
months[9]="September";
months[10]="October";
months[11]="November";
months[12]="December";
var time=new Date();
var lmonth=months[time.getMonth() + 1];
var date=time.getDate();
var year=time.getYear();
if (year < 2000) // Y2K Fix, Isaac Powell
year = year + 1900; // http://onyx.idbsu.edu/~ipowell
document.write("<center>" + lmonth + " ");
document.write(date + ", " + year + "</center>");
// End -->
</SCRIPT>
</CENTER>


In my browser (IE6 & N7.1) the DATE is a fixed size and colour. I want it to show as black, arial with size 8 font.

Any help here would be greatly appreciated.
ray326
12-09-2003, 07:31 PM
In the <head> section:

<style class="text/css">
.date {
font-family: arial, sans-serif;
font-size: x-large;
color: black;
text-align: center;
}

Then in your js:

document.write('<p class="date">' + lmonth + " ");
document.write(date + ", " + year + "</p>");

I'm assuming font size "8" is really big and not "8px", which would be really small.
Paul Jr
12-09-2003, 09:22 PM
Originally posted by ray326
document.write('<p class="date">' + lmonth + " ");
document.write(date + ", " + year + "</p>");

Woudn't it be double quotes, then single quotes? Like so:
document.write("<p class='date'>" + lmonth + " ");
ray326
12-09-2003, 09:28 PM
It works both ways but I wanted the doubles in the document body.
timla
12-09-2003, 09:38 PM
Hi, Thanks guys. I think I have done it as you have stated however nothing shows in the browser when I do it like this. All of the code goes pink (dreamweaverMX) when I add the stuff in the <HEAD>



<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head><style class="text/css">
.date {
font-family: arial, sans-serif;
font-size: x-large;
color: black;
text-align: center;
}

<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>
<SCRIPT LANGUAGE="JavaScript1.2">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var months=new Array(13);
months[1]="January";
months[2]="February";
months[3]="March";
months[4]="April";
months[5]="May";
months[6]="June";
months[7]="July";
months[8]="August";
months[9]="September";
months[10]="October";
months[11]="November";
months[12]="December";
var time=new Date();
var lmonth=months[time.getMonth() + 1];
var date=time.getDate();
var year=time.getYear();
if (year < 2000) // Y2K Fix, Isaac Powell
year = year + 1900; // http://onyx.idbsu.edu/~ipowell
document.write("<p class='date'>" + lmonth + " ");
document.write(date + ", " + year + "</p>");

// End -->
</SCRIPT>
</CENTER>


</body>
</html>
Paul Jr
12-09-2003, 09:56 PM
Originally posted by timla
<html>
<head><style class="text/css">
.date {
font-family: arial, sans-serif;
font-size: x-large;
color: black;
text-align: center;
}


Should look like


<html>
<head>
<style type="text/css">
.date {
font-family: arial, sans-serif;
font-size: x-large;
color: black;
text-align: center;
}
</style>
timla
12-09-2003, 10:12 PM
Thanks mate. Works perfectly.
ray326
12-10-2003, 09:47 AM
Thanks, Paul. I obviously had "class" on my mind. 8-(
send2me
12-10-2003, 01:28 PM
This is along the same lines, how would I get this script to work?


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style class="text/css">
.days {
font-family: arial, sans-serif;
font-size: x-large;
color: black;
text-align: center;
}
</style>


</head>

<body>
It has been&nbsp;
<script type="text/javascript">
var dt = new Date(2003,0,5); // 5th Jan 2003
var now = new Date();
var nDays = Math.floor((now.getTime() - dt.getTime()) / 86400000);
document.write('<p class="ndays">'</p>');

</script>
&nbsp;days since last problem.

</body>
</html>