Incorporating JavaScript In A DHTMLMenu

On the DHTMLMenu Support Forum a user asked how to include a JavaScript in a menu. The user wanted to display the current week number and Gracie provided a sample .pgt file. This example uses a different script and explains how it was incorporated in the menu. The last item in the menu to the left displays the current day and date. Here is the JavaScript we used:

<SCRIPT language="JavaScript">
/******************************************
Today's Date by Joe Barta
http://www.pagetutor.com/todaysdate/
*******************************************/
Style = 4; //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>

Here are the steps used to incorporate the above script into the menu:

1) The item's background color was changed to distinguish it from the other items. The same background color was used for both the mouse out and mouse over states.

2) For the item description HTML was selected and [replace with date] was entered for the description.

3) In the item condition prefix the entire script was entered with the exception of the open and closing <script> tags and document.write line.

4) In the item condition suffix st_ci.txt=(dateline[Style]); was entered (this is the document.write line from the script with document.write replaced with st_ci.txt=).