PDA

View Full Version : Question regarding changing the font on a piece of javascrip


becky gelke
04-05-2006, 06:36 AM
Hi, I am currently adapting a template, and have added a piece of javascript to insert the current date on each page (script below) What I am struggling with is getting the visible date text to appear in the same font as the rest of the page, and its frustrating the hell out of me. How do I change the font of the script belwo please.

Whilst I am on this subject is there a better script for including the date on a page than the one I have enclosed below.

Thanks as always if you can help me.


<script>
<!--

Style = 3; //pick a style from below

/*------------------------------
Style 1: March 17, 2000
Style 2: Mar 17, 2000
Style 3: Saturday March 17, 2000
Style 4: Sat Mar 17, 2000
Style 5: Sat March 17, 2000
Style 6: 17 March 2000
Style 7: 17 Mar 2000
Style 8: 17 Mar 00
Style 9: 3/17/00
Style 10: 3-17-00
Style 11: Saturday March 17
--------------------------------*/

months = new Array();
months[1] = "January"; months[7] = "July";
months[2] = "February"; months[8] = "August";
months[3] = "March"; months[9] = "September";
months[4] = "April"; months[10] = "October";
months[5] = "May"; months[11] = "November";
months[6] = "June"; months[12] = "December";

months2 = new Array();
months2[1] = "Jan"; months2[7] = "Jul";
months2[2] = "Feb"; months2[8] = "Aug";
months2[3] = "Mar"; months2[9] = "Sep";
months2[4] = "Apr"; months2[10] = "Oct";
months2[5] = "May"; months2[11] = "Nov";
months2[6] = "Jun"; months2[12] = "Dec";

days = new Array();
days[1] = "Sunday"; days[5] = "Thursday";
days[2] = "Monday"; days[6] = "Friday";
days[3] = "Tuesday"; days[7] = "Saturday";
days[4] = "Wednesday";

days2 = new Array();
days2[1] = "Sun"; days2[5] = "Thu";
days2[2] = "Mon"; days2[6] = "Fri";
days2[3] = "Tue"; days2[7] = "Sat";
days2[4] = "Wed";

todaysdate = new Date();
date = todaysdate.getDate();
day = todaysdate.getDay() + 1;
month = todaysdate.getMonth() + 1;
yy = todaysdate.getYear();
year = (yy < 1000) ? yy + 1900 : yy;
year2 = 2000 - year; year2 = (year2 < 10) ? "0" + year2 : year2;

dateline = new Array();
dateline[1] = months[month] + " " + date + ", " + year;
dateline[2] = months2[month] + " " + date + ", " + year;
dateline[3] = days[day] + " " + months[month] + " " + date + ", " + year;
dateline[4] = days2[day] + " " + months2[month] + " " + date + ", " + year;
dateline[5] = days2[day] + " " + months[month] + " " + date + ", " + year;
dateline[6] = date + " " + months[month] + " " + year;
dateline[7] = date + " " + months2[month] + " " + year;
dateline[8] = date + " " + months2[month] + " " + year2;
dateline[9] = month + "/" + date + "/" + year2;
dateline[10] = month + "-" + date + "-" + year2;
dateline[11] = days[day] + " " + months[month] + " " + date;

document.write(dateline[Style]);
//-->
</script>

davidj
04-05-2006, 02:35 PM
where you have...
document.write(dateline[Style]);

change this to...

document.getElementById("datedisplay").innerHTML = dateline[Style];

place this where you want your date to appear and assign a CSS class around it or as part of the <td>
<div id="datedisplay"></div>

becky gelke
04-05-2006, 03:27 PM
Thank you for that david, unfortunately you have lost me with the css class part of your answer, I have no idea how to do that. :oops:

ranjan
04-06-2006, 06:13 AM
I modified the script a bit

Inside your head tag place the following:


<script type="text/javascript">
window.onload = function () {
var today = new Date();
var dateLine = createDate(today);
document.getElementById('date').innerHTML = dateLine;
}
function createDate(today) {
var months = new Array ('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
var days = new Array ('Sunday','Monday','Tuesday','Wednesday','Thursday ','Friday','Saturday');
var dateLine = new Array ();
var d = today.getDate();
var day = today.getDay();
var m = today.getMonth();
var y = today.getFullYear();
dateLine[0] = months[m] + " " + d + ", " + y; //March 17, 2000
dateLine[1] = left(months[m],3) + " " + d + ", " + y; //Mar 17, 2000
dateLine[2] = days[day] + " " + months[m] + " " + d + ", " + y; //Saturday March 17, 2000
dateLine[3] = left(days[day],3) + " " + left(months[m],3) + " " + d + ", " + y; //Sat Mar 17, 2000
dateLine[4] = left(days[day],3) + " " + months[m] + " " + d + ", " + y; //Sat March 17, 2000
dateLine[5] = d + " " + months[m] + " " + y; //17 March 2000
dateLine[6] = d + " " + left(months[m],3) + " " + y; //17 Mar 2000
dateLine[7] = d + " " + left(months[m],3) + " " + right(y,2); //17 Mar 00
dateLine[8] = m+1 + "/" + d + "/" + right(y,2); //3/17/00
dateLine[9] = days[day] + " " + months[m] + " " + d; //Saturday March 17
return dateLine[2];
}
function left(str, n){
if (n <= 0)
return "";
else if (n > String(str).length)
return str;
else
return String(str).substring(0,n);
}
function right(str, n){
if (n <= 0)
return "";
else if (n > String(str).length)
return str;
else {
var i = String(str).length;
return String(str).substring(i, i - n);
}
}
</script>
<style type="text/css">
#date {
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
color:#666666;
}
</style>


And this wherever you want the date displayed


<div id="date"></div>


Now to change the font, just change font and color in #date

becky gelke
04-06-2006, 10:36 AM
Thank you very much, people are soooo kind. I greatly appreciate your help.