/    Sign up×
Community /Pin to ProfileBookmark

Changing font size and colour of DATE

Copy linkTweet thisAlerts:
Dec 10.2003

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!! [url]http://javascript.internet.com[/url] –>

<!– 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; // [url]http://onyx.idbsu.edu/~ipowell[/url]
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.

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Dec 10.2003 — 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.
Copy linkTweet thisAlerts:
@Paul_JrDec 10.2003 — [i]Originally posted by ray326 [/i]

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

document.write(date + ", " + year + "</p>");
[/QUOTE]
Woudn't it be double quotes, then single quotes? Like so:

document.write([color=red]"[/color]<p class=[color=blue]'[/color]date[color=blue]'[/color]>[color=red]"[/color] + lmonth + " ");
Copy linkTweet thisAlerts:
@ray326Dec 10.2003 — It works both ways but I wanted the doubles in the document body.
Copy linkTweet thisAlerts:
@timlaauthorDec 10.2003 — 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>
Copy linkTweet thisAlerts:
@Paul_JrDec 10.2003 — [i]Originally posted by timla [/i]

<html>

<head><style class="text/css">

.date {

font-family: arial, sans-serif;

font-size: x-large;

color: black;

text-align: center;

}
[/QUOTE]

Should look like

<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;style [color=red]type[/color]="text/css"&gt;
.date {
font-family: arial, sans-serif;
font-size: x-large;
color: black;
text-align: center;
}
[color=red]&lt;/style&gt;[/color]
Copy linkTweet thisAlerts:
@timlaauthorDec 10.2003 — Thanks mate. Works perfectly.
Copy linkTweet thisAlerts:
@ray326Dec 10.2003 — Thanks, Paul. I obviously had "class" on my mind. 8-(
Copy linkTweet thisAlerts:
@send2meDec 10.2003 — 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>
×

Success!

Help @timla spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...