Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2004
    Location
    South Carolina
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem w/Firefox interpreting a JavaScript

    This script works fine fine in IE but in FireFox 0.92 it keeps telling me that monName & frmCalendar are undeclared. Any enlightment would be appreciated.

    File Edited: Highlighted problems in Red, Fixed comment to indicate correct data file name, Appended missing data file.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
    <!-- Modified 01 Apr 2004 by: BEK -->
    <!--
       Rolling Calendar: This calendar will initialize with the current month shown
       if the user then selects a month prior to the current month it will display
       that month for the next calendar year. Thus you must clear out the previous
       months events at the start of each month. You don't have to put in the events
       for the following year's month until you know them.
       
       Required files: multiYrCalData.js
                       This file contains the fillmonth() function which contains
    				   the listing of months where you insert your events.
    -->
    <META http-equiv="pragma" content="no-cache">
    <META http-equiv="Content-Type" content="text/html; charset=us-ascii"> 
    <TITLE>Clarendon County Sesquicentennial Form Calendar</TITLE>
    <LINK REL=stylesheet Type="text/css" HREF="clarendonhistory.css">
    <STYLE type="text/css">
     <!--
       TABLE {width: 100%; border-style: none;}
       TD {width: 14%; text-align: center; vertical-align: top;
           border-width: 1px; border-style: solid; border-color: black;}
       .DayHdr {vertical-align: Middle; Font-weight: bold; background: #0044FF;
                color: white;}
       .Month {Font-Size: 36; text-align: center; border-style: none;}  
     -->
    </STYLE>
    <Script type="text/javascript" src="multiYrCalData.js"></Script>
    <Script type="text/javascript">
    <!-- Hide from old browsers
    // Declaration of Variables -------------------------------------------------------------
     myMon = new Array
     events = new Array
     /**** Note the monNames & maxdays arrays are 0 based 
           due to the values used by getMonth & setMonth   */
     monNames = new Array ("January","February","March","April","May","June","July","August","September","October","November","December")
     maxdays = new Array (31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)
     
    var cntmyMonth = 42  //Max array positions
    var ofsFD            //Offset to first day of month
    var maxDay = 30      //Last day of the month
    var curDay           //Current date
    var curMonth         //Current Month zero based adjust by 1 
    var curYear          //Current 4 digit year
    var firstMonday      //Date of the 1st Monday of the Month
    var secondMonday
    var thirdMonday
    var fourthMonday
    var ofsFirstThurs     // Where does the 1st thursday fall will be -1 to 5
    var fourthThursday    //For Thanksgiving
    var leapYear
    
                                 // End of Variable Declarations ***
    
    function clrArray() {
    
       for(var n=0; n < 32; n++) {
           events[n] = "" ;
    	 }
    }                            // End of function clrArray ***
    
    function setmonth(iMonth, iYear) {
    
       now = new Date;
       curMonth = now.getMonth();
       curYear = now.getFullYear();
       
       if(arguments.length == 1) iYear = "2003";
       
       if(iMonth >= 0) {
         curMonth = iMonth;
       }
    
       if(iYear >= 0) {
          curYear = iYear;
       }	  
    
       now.setYear(curYear);
       now.setMonth(curMonth);
    
        
       maxdays[1] = 28 ; <!-- Default days for Feb - reset below for leap years -->
       
       if((curYear % 4 == 0) && (curYear % 100 != 0 || curYear % 400 == 0)){
         maxdays[1] = 29 ;
       } 
          
       now.setDate(1);               //Set date to 1st of the month
       ofsFD = now.getDay();         //Find the day of the week the month starts on
    
       firstMonday = 7 - ofsFD + 2;  //Compute the 1st, 2nd, & 3rd Monday of the month
       if(firstMonday == 9) {
          firstMonday = 2;
       }
       if(firstMonday == 8) {
          firstMonday = 1;
       }
       secondMonday = firstMonday + 7 ;
       thirdMonday = firstMonday + 14 ;
       fourthMonday = firstMonday + 21;
       
       ofsFirstThurs = 5-ofsFD; // > 0 if 1st day of month is before Thurs.
       if (ofsFirstThurs > 0)
         fourthThursday = 21 + ofsFirstThurs;
       else
         fourthThursday = 28 + ofsFirstThurs;	 
    
      if(firstMonday<4) {                 // Compute last friday of Month
        MemorialDay=fourthMonday + 7;
    	}
      else {
        MemorialDay = fourthMonday;
      }
     
    }                            // End of function SetMonth ***
    
    function fDrawCal(){
      document.write('<TABLE style="border-collapse: collapse;"><TR>');
      document.write('<TD colspan="7" class="Month" id=monName>');
      document.write(monNames[curMonth]+"&nbsp;"+curYear);
      document.write('</TD>');
      document.write('</TR>');
      document.write('<TR>');
      document.write('<TD class="DayHdr">SUN</TD>');
      document.write('<TD class="DayHdr">MON</TD>');
      document.write('<TD class="DayHdr">TUE</TD>');
      document.write('<TD class="DayHdr">WED</TD>');
      document.write('<TD class="DayHdr">THU</TD>');
      document.write('<TD class="DayHdr">FRI</TD>');
      document.write('<TD class="DayHdr">SAT</TD>');
      document.write('</TR>');
    
              for(i=0; i<6; i++) {
                 document.write('<TR>');
    	         for(j=0; j<7; j++) {
    	            document.write('<TD id=calDateText>');
    	        	document.write(myMon[i*7+j]);
    		        document.write('</TD>');
    				
    	         }
    	         document.write('</TR>');
              }
      document.write('</TABLE>');		  
    }                            //End fDrawCal ***
    
    function fUpdateCal(iMonth,iYear){
      clrArray();
      setmonth(iMonth,iYear);
      fillmonth();
              monName.innerHTML = monNames[curMonth]+"&nbsp;"+curYear ;
              for(i=0; i<6; i++) {
    	         for(j=0; j<7; j++) {
    			   calDateText[i*7+j].innerHTML = myMon[i*7+j];
                 }
    		  }	 
    }                            //End fUpdateCal ***
    
    function fInit(){
      frmCalendar.tbSelMonth.options[curMonth].selected=true;
      frmCalendar.tbSelYear.options[curYear-2003].selected=true;
    }
    clrArray();
    setmonth(-1,-1);
    fillmonth();
    
    //  End of JavaScript and HTML comment hiding it from browser   -->
    </Script>
    </head>
    
    <body onload="fInit()">
    
    <FORM name="frmCalendar" id="frmCalendar" method="post" action="">
    <INPUT type="hidden" name="calSelectDate" value="">
      <TABLE>
        <TR>
          <TD style="border-style: none;">
    	  <SPAN Class="wrapright">
             <SELECT name="tbSelMonth" style="font-size: 12pt;"
    		  onchange="fUpdateCal(frmCalendar.tbSelMonth.value,frmCalendar.tbSelYear.value)"
    		 >
    	     <OPTION VALUE="0">January</OPTION>
    	     <OPTION VALUE="1">Feburary</OPTION>
    	     <OPTION VALUE="2">March</OPTION>
    	     <OPTION VALUE="3">April</OPTION>
    	     <OPTION VALUE="4">May</OPTION>
    	     <OPTION VALUE="5">June</OPTION>
    	     <OPTION VALUE="6">July</OPTION>
    	     <OPTION VALUE="7">August</OPTION>
    	     <OPTION VALUE="8">September</OPTION>
    	     <OPTION VALUE="9">October</OPTION>
    	     <OPTION VALUE="10">November</OPTION>
    	     <OPTION VALUE="11">December</OPTION>
    	     </SELECT>
             <SELECT name="tbSelYear" style="font-size: 12pt;"
    		  onchange="fUpdateCal(frmCalendar.tbSelMonth.value,frmCalendar.tbSelYear.value)"
    		 >
    	     <OPTION VALUE="2003">2003</OPTION>
    	     <OPTION VALUE="2004">2004</OPTION>
    	     <OPTION VALUE="2005">2005</OPTION>
    	     <OPTION VALUE="2006">2006</OPTION>
    	     </SELECT>
    	  </SPAN>
    	  <SPAN Class="wrapleft">
         <a href="index.html"><img border=0 width=128 height=25
                               src="images/homebtn.gif" alt=Home></a>
    	  </SPAN>	 
          </TD>
        </TR>
        <TR>
          <TD style="border-style: none;">
              <Script type="text/javascript">fDrawCal();</Script>
          </TD>
        </TR>	   
      </Table>
    </FORM>
    	
    </body>
    </html>
    
    ----------------------   multiYrCalData.js ---------------------------
    // Edit this file to add events to a given month.
    // The subscript in the events array = the day of the month, i.e. events[15]
    // is the 15th of the month. You can also use special items like firstMonday,
    // secondMonday, thirdMonday, and fourthMonday, and thirdThursday [Thanksgiving]
    // NOTE: the Month numbers are one less and are commented for clarity!
    /******************************************************************************
     *****       MAKE SURE YOU PUT THE EVENT IN THE PROPER YEAR!!!!!          *****
     ******************************************************************************/
    // Editing Notes:
    // Use  <BR> to start the following text on a new line.
    //      <HR> to draw a line under the preceding text and start the following
    //           under the line.
    <!--
    function fillmonth() {
      
      if(curYear == 2003) {   //*********  2003  ***************************
    
        if(curMonth == 0){             //January
          events[1] = "New Year's<HR>" ;
        }
    	
       if(curMonth == 1){             //Febuary
          events[14] = "Valentine's Day<HR>";
    	  events[thirdMonday] = "Washington's BDay<HR>" + events[thirdMonday]
       }
    
       if(curMonth == 2){              //March
         events[1] = "";
       }
    
       if(curMonth == 3){              //April
          events[1] = "";
       }
       
       if(curMonth == 4){               //May
          events[1] = "";
    	  events[MemorialDay] = "Memorial Day<HR>";
       }
    
       if(curMonth == 5){               //June
          events[1] = "";
    }
       
       if(curMonth == 6){               //July
          events[4] = "Independence Day<HR>" + events[4];
       }
       
       if(curMonth == 7){               //August
          events[1] = "CLOSED";
    }
       
       if(curMonth == 8){               //September
          events[1] = "";
    	  events[firstMonday] = "Labor Day<HR>" + events[firstMonday];
       }
       
       if(curMonth == 9){               //October
          events[1] = "";
    	  events[secondMonday] = "Columbus Day<HR>" + events[secondMonday];
       }
       
       if(curMonth == 10){              //November
          events[1] = "";
    	  events[11] = "Veteran's Day<BR><img src='images/veteransdaysm.gif' height='72' width='103' alt='V-Day'>"
    	  events[13] = "Planning Mtg. F.E. DuBose Center 5pm"
    	  events[fourthThursday] = "Thanksgiving<HR>";
       }
    
       if(curMonth == 11){              //December
          events[1] = "";
    	  events[25] = "Christmas<HR>";
       }
     }  // End 2003 Data ***  
    
      if(curYear == 2004) {   // *************  2004  *************************
    
        if(curMonth == 0){             //January
          events[1] = "New Year's<HR>" ;
    	  events[21]="5:30pm Planning Mtg.<BR>F.E.DuBose Cntr.<BR>Rm 197";
        }
    	
       if(curMonth == 1){             //Febuary
          events[14] = "Valentine's Day<HR>";
    	  events[thirdMonday] = "Washington's BDay<HR>" + events[thirdMonday]
       }
    
       if(curMonth == 2){              //March
         events[1] = "";
       }
    
       if(curMonth == 3){              //April
          events[1] = "";
       }
       
       if(curMonth == 4){               //May
          events[1] = "";
    	  events[MemorialDay] = "Memorial Day<HR>";
       }
    
       if(curMonth == 5){               //June
          events[1] = "";
    }
       
       if(curMonth == 6){               //July
          events[4] = "Independence Day<HR>" + events[4];
       }
       
       if(curMonth == 7){               //August
          events[1] = "";
    }
       
       if(curMonth == 8){               //September
          events[1] = "";
    	  events[firstMonday] = "Labor Day<HR>" + events[firstMonday];
       }
       
       if(curMonth == 9){               //October
          events[1] = "";
    	  events[16] = "<A href='http://web.ftc-i.net/~gcsummers/victoryfortwatson.html' " +
    	               "target='_blank'>3<sup>rd</sup> Victory at Fort Watson</A>";
    	  events[secondMonday] = "Columbus Day<HR>" + events[secondMonday];
       }
       
       if(curMonth == 10){              //November
          events[1] = "";
    	  events[11] = "Veteran's Day<BR><img src='images/veteransdaysm.gif' height='72' width='103' alt='V-Day'>"
    	  events[fourthThursday] = "Thanksgiving<HR>";
       }
    
       if(curMonth == 11){              //December
          events[1] = "";
    	  events[25] = "Christmas<HR>";
       }
     }  // End 2004 Data ***  
    
      if(curYear == 2005) {  // *************  2005  *************************
    
        if(curMonth == 0){             //January
          events[1] = "New Year's<HR>" ;
    	  events[23] = "3:00PM Opening celebration in Paxville"
        }
    	
       if(curMonth == 1){             //Febuary
          events[14] = "Valentine's Day<HR>";
    	  events[thirdMonday] = "Washington's BDay<HR>" + events[thirdMonday]
       }
    
       if(curMonth == 2){              //March
         events[1] = "";
    	 events[11] = "<A href='http://www.francismarionsymposium.com'>Francis Marion/Swamp<BR>Fox Symposium III</A>";
    	 events[12] = "<A href='http://www.francismarionsymposium.com'>Francis Marion/Swamp<BR>Fox Symposium III</A>";
       }
    
       if(curMonth == 3){              //April
          events[1] = "";
       }
       
       if(curMonth == 4){               //May
          events[1] = "";
    	  events[MemorialDay] = "Memorial Day<HR>";
       }
    
       if(curMonth == 5){               //June
          events[1] = "";
    }
       
       if(curMonth == 6){               //July
          events[4] = "Independence Day<HR>" + events[4];
       }
       
       if(curMonth == 7){               //August
          events[1] = "";
    }
       
       if(curMonth == 8){               //September
          events[1] = "";
    	  events[firstMonday] = "Labor Day<HR>" + events[firstMonday];
       }
       
       if(curMonth == 9){               //October
          events[1] = "";
    	  events[15] = "<A href='http://web.ftc-i.net/~gcsummers/victoryfortwatson.html' " +
    	               "target='_blank'>4<sup>th</sup> Victory at Fort Watson</A>";
    	  events[16] = "<A href='http://web.ftc-i.net/~gcsummers/victoryfortwatson.html' " +
    	               "target='_blank'>4<sup>th</sup> Victory at Fort Watson</A>";
    	  events[secondMonday] = "Columbus Day<HR>" + events[secondMonday];
       }
       
       if(curMonth == 10){              //November
          events[1] = "";
    	  events[11] = "Veteran's Day<BR><img src='images/veteransdaysm.gif' height='72' width='103' alt='V-Day'>"
          events[12] = "10:00am Paxville Parade"
    	  events[fourthThursday] = "Thanksgiving<HR>";
       }
    
       if(curMonth == 11){              //December
          events[1] = "";
    	  events[25] = "Christmas<HR>";
       }
     }  // End 2005 Data ***  
    
      if(curYear == 2006) {  // *************  2006  *************************
    
        if(curMonth == 0){             //January
          events[1] = "New Year's<HR>" ;
        }
    	
       if(curMonth == 1){             //Febuary
          events[14] = "Valentine's Day<HR>";
    	  events[thirdMonday] = "Washington's BDay<HR>" + events[thirdMonday]
       }
    
       if(curMonth == 2){              //March
         events[1] = "";
       }
    
       if(curMonth == 3){              //April
          events[1] = "";
       }
       
       if(curMonth == 4){               //May
          events[1] = "";
    	  events[MemorialDay] = "Memorial Day<HR>";
       }
    
       if(curMonth == 5){               //June
          events[1] = "";
    }
       
       if(curMonth == 6){               //July
          events[4] = "Independence Day<HR>" + events[4];
       }
       
       if(curMonth == 7){               //August
          events[1] = "";
    }
       
       if(curMonth == 8){               //September
          events[1] = "";
    	  events[firstMonday] = "Labor Day<HR>" + events[firstMonday];
       }
       
       if(curMonth == 9){               //October
          events[1] = "";
    	  events[secondMonday] = "Columbus Day<HR>" + events[secondMonday];
       }
       
       if(curMonth == 10){              //November
          events[1] = "";
    	  events[11] = "Veteran's Day<BR><img src='images/veteransdaysm.gif' height='72' width='103' alt='V-Day'>"
    	  events[fourthThursday] = "Thanksgiving<HR>";
       }
    
       if(curMonth == 11){              //December
          events[1] = "";
    	  events[25] = "Christmas<HR>";
       }
     }  // End 2006 Data *** 
      
     /*
        Load the myMon array with items from the current months events array
    	indexing them by adding the ofsFD value to place them in the proper
    	place in the 42 position calendar array myMon
     */  
       for(var i=0; i < cntmyMonth; i++)
       {
         if(i < ofsFD || i > (maxdays[curMonth] + ofsFD -1)) {
    	     myMon[i] = "&nbsp;"
    	 }	
    	 else {
    	   if( events[i-ofsFD+1] != "") {
    	     myMon[i] = "<B>"+ (i - ofsFD + 1) + "</B><BR>" + events[i-ofsFD+1] 
    	   }
    	   else{
    	         myMon[i] = (i - ofsFD + 1) + "<BR><BR><BR><BR>"
    	   }     // End of  if( events[i-ofsFD+1] != "")
    	 }    // End of     if(i < ofsFD || i > (maxdays[curMonth] + ofsFD -1))
       }   // End of        for(var i = 0; i < cntmyMonth; i++)
       
    } // End of function FillMonth -------------------------------------------------------------
    -->
    Last edited by RetiredGeek; 08-19-2004 at 04:19 AM.
    Bruce
    Still Learning after all these years!

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Required files: CalendarData.js
    <Script type="text/javascript" src="multiYrCalData.js"></Script><Script type="text/javascript">fDrawCal();</Script>???
    A these would be where?


    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #3
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    monNames = new Array
    should be
    Code:
    var monNames = new Array
    and for goodness sake, learn how to use the forums, and use code tags.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You're directly accessing the id like monName.innerHTML. You need to reference it properly by using

    document.getElementById('monName')

    and the form too

    document.getElementById('frmCalendar')

    or

    document.forms['frmCalendar']


    IE allows you to call it directly because all element names and ids are automatically treated as global variables.
    Last edited by glenngv; 08-19-2004 at 05:33 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    New to the CF scene
    Join Date
    Aug 2004
    Location
    South Carolina
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Problem Solved! - Thanks

    A big thank you to jamescover, hemebond, and glenngv for your helpful and enlightening input. I have posted the corrected code below which now works just fine in both IE & Firefox .092. I would like to point out to other new and casual javascript coders, like me, glenngv's comment about how IE treats Name & Id as globals. This explained a lot especially a piece of the code that I never did understand why it worked, given my background in other languages.

    To view the code in action goto www.clarendonhistory.com and click on the calendar icon.

    Thanks again gentlemen.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
    <!-- Modified 19 Aug 2004 by: BEK -->
    <!--
       Multi Year Calendar: This calendar will initialize with the current month/year.
       The user can then select a month and/or year from the dropdown lists and the
       events for the selected month/year combination will be shown.
       
       Required files: multiYrCalData.js
                       This file contains the fillmonth() function which contains
    				   the listing of years & months where you insert your events.
    -->
    <META http-equiv="pragma" content="no-cache">
    <META http-equiv="Content-Type" content="text/html; charset=us-ascii"> 
    <TITLE>Clarendon County, SC - Sesquicentennial Calendar</TITLE>
    <LINK REL=stylesheet Type="text/css" HREF="clarendonhistory.css">
    <STYLE type="text/css">
     <!--
       TABLE {width: 100%; border-style: none;}
       TD {width: 14%; text-align: center; vertical-align: top;
           border-width: 1px; border-style: solid; border-color: black;}
       .DayHdr {vertical-align: Middle; Font-weight: bold; background: #0044FF;
                color: white;}
       .Month {Font-Size: 36; text-align: center; border-style: none;}  
     -->
    </STYLE>
    <Script type="text/javascript" src="multiYrCalData.js"></Script>
    <Script type="text/javascript">
    <!-- Hide from old browsers
    // Declaration of Variables 
    var myMon = new Array
    var events = new Array
    /**** Note the monNames & maxdays arrays are 0 based 
          due to the values used by getMonth & setMonth   */
    var monNames = new Array ("January","February","March","April","May","June","July",
                              "August","September","October","November","December")
    var maxdays = new Array (31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)
     
    var cntmyMonth = 42  //Max array positions
    var ofsFD            //Offset to first day of month
    var maxDay = 30      //Last day of the month
    var curDay           //Current date
    var curMonth         //Current Month zero based adjust by 1 
    var curYear          //Current 4 digit year
    var firstMonday      //Calendar locations of Monday for placing of Monday Holidays
    var secondMonday     
    var thirdMonday      
    var fourthMonday
    var ofsFirstThurs     // Where does the 1st thursday fall will be -1 to 5
    var fourthThursday    //For Thanksgiving
    var leapYear
    
                                 // End of Variable Declarations ***
    
    function clrArray() {
    
       for(var n=0; n < 32; n++) {
           events[n] = "" ;
    	 }
    }                            // End of function clrArray ***
    
    function setmonth(iMonth, iYear) {
    
       now = new Date;
       curMonth = now.getMonth();
       curYear = now.getFullYear();
       
       if(arguments.length == 1) iYear = "2003";
        
       if(iMonth >= 0) {
         curMonth = iMonth;
       }
    
       if(iYear >= 0) {
          curYear = iYear;
       }	  
    
       now.setYear(curYear);
       now.setMonth(curMonth);
    
        
       maxdays[1] = 28 ; // Default days for Feb - reset below for leap years 
       
       if((curYear % 4 == 0) && (curYear % 100 != 0 || curYear % 400 == 0)){
         maxdays[1] = 29 ;
       } 
          
       now.setDate(1);               //Set date to 1st of the month
       ofsFD = now.getDay();         //Find the day of the week the month starts on
    
       firstMonday = 7 - ofsFD + 2;  //Compute the 1st, 2nd, & 3rd Monday of the month
       if(firstMonday == 9) {
          firstMonday = 2;
       }
       if(firstMonday == 8) {
          firstMonday = 1;
       }
       secondMonday = firstMonday + 7 ;
       thirdMonday = firstMonday + 14 ;
       fourthMonday = firstMonday + 21;
       
       ofsFirstThurs = 5-ofsFD; // > 0 if 1st day of month is before Thurs.
       if (ofsFirstThurs > 0)
         fourthThursday = 21 + ofsFirstThurs;
       else
         fourthThursday = 28 + ofsFirstThurs;	 
    
      if(firstMonday<4) {                 // Compute last friday of Month
        MemorialDay=fourthMonday + 7;
    	}
      else {
        MemorialDay = fourthMonday;
      }
     
    }                            // End of function SetMonth ***
    
    function fDrawCal(){
      document.write('<TABLE style="border-collapse: collapse;"><TR>');
      document.write('<TD colspan="7" class="Month" name="monName" id="monName">');
      document.write(monNames[curMonth]+"&nbsp;"+curYear);
      document.write('</TD>');
      document.write('</TR>');
      document.write('<TR>');
      document.write('<TD class="DayHdr">SUN</TD>');
      document.write('<TD class="DayHdr">MON</TD>');
      document.write('<TD class="DayHdr">TUE</TD>');
      document.write('<TD class="DayHdr">WED</TD>');
      document.write('<TD class="DayHdr">THU</TD>');
      document.write('<TD class="DayHdr">FRI</TD>');
      document.write('<TD class="DayHdr">SAT</TD>');
      document.write('</TR>');
    
              for(i=0; i<6; i++) {
                 document.write('<TR>');
    	         for(j=0; j<7; j++) {
    	            document.write('<TD id=calDateText' + i*7+j +'>');
    	        	document.write(myMon[i*7+j]);
    		        document.write('</TD>');
    				
    	         }
    	         document.write('</TR>');
              }
      document.write('</TABLE>');		  
    }                            //End fDrawCal ***
    
    function fUpdateCal(iMonth,iYear){
      var CellName
      clrArray();
      setmonth(iMonth,iYear);
      fillmonth();
      document.getElementById('monName').innerHTML = monNames[curMonth]+"&nbsp;"+curYear ;
         for(i=0; i<6; i++) {
    	     for(j=0; j<7; j++) {
    	         cellName = "calDateText" + i*7+j
    		     document.getElementById(cellName).innerHTML = myMon[i*7+j];
             }  //End for j
    	 }	    //End for i 
    }                            //End fUpdateCal ***
    
    function fInit(){
      document.getElementById('frmCalendar').tbSelMonth.options[curMonth].selected=true;
      document.getElementById('frmCalendar').tbSelYear.options[curYear-2003].selected=true;
    }
    clrArray();
    setmonth(-1,-1);
    fillmonth();
    
    //  End of JavaScript and HTML comment hiding it from browser  
    -->
    </Script>
    </head>
    
    <body onload="fInit()">
    
    <FORM name="frmCalendar" id="frmCalendar" method="post" action="">
    <INPUT type="hidden" name="calSelectDate" value="">
      <TABLE>
        <TR>
          <TD style="border-style: none;">
    	  <SPAN Class="wrapright">
             <SELECT name="tbSelMonth" style="font-size: 12pt;"
    		  onchange="fUpdateCal(frmCalendar.tbSelMonth.value,frmCalendar.tbSelYear.value)"
    		 >
    	     <OPTION VALUE="0">January</OPTION>
    	     <OPTION VALUE="1">Feburary</OPTION>
    	     <OPTION VALUE="2">March</OPTION>
    	     <OPTION VALUE="3">April</OPTION>
    	     <OPTION VALUE="4">May</OPTION>
    	     <OPTION VALUE="5">June</OPTION>
    	     <OPTION VALUE="6">July</OPTION>
    	     <OPTION VALUE="7">August</OPTION>
    	     <OPTION VALUE="8">September</OPTION>
    	     <OPTION VALUE="9">October</OPTION>
    	     <OPTION VALUE="10">November</OPTION>
    	     <OPTION VALUE="11">December</OPTION>
    	     </SELECT>
             <SELECT name="tbSelYear" style="font-size: 12pt;"
    		  onchange="fUpdateCal(frmCalendar.tbSelMonth.value,frmCalendar.tbSelYear.value)"
    		 >
    	     <OPTION VALUE="2003">2003</OPTION>
    	     <OPTION VALUE="2004">2004</OPTION>
    	     <OPTION VALUE="2005">2005</OPTION>
    	     <OPTION VALUE="2006">2006</OPTION>
    	     </SELECT>
    	  </SPAN>
    	  <SPAN Class="wrapleft">
         <a href="index.html"><img border=0 width=128 height=25
                               src="images/homebtn.gif" alt=Home></a>
    	  </SPAN>	 
          </TD>
        </TR>
        <TR>
          <TD style="border-style: none;">
              <Script type="text/javascript">fDrawCal();</Script>
          </TD>
        </TR>	   
      </Table>
    </FORM>
    	
    </body>
    </html>
    Bruce
    Still Learning after all these years!

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Glad to be of help.

    Just additional info.
    This line:

    <SELECT name="tbSelMonth" style="font-size: 12pt;"
    onchange="fUpdateCal(frmCalendar.tbSelMonth.value,frmCalendar.tbSelYear.value)"
    >

    can be optimized to:

    <SELECT name="tbSelMonth" style="font-size: 12pt;"
    onchange="fUpdateCal(this.value, this.form.tbSelYear.value)"
    >

    Notice that it doesn't rely on the name of the form to refer to the form by using the this keyword and the form property. The this keyword refers to the current element which is the select control. Every HTML control has form property that refers to the form the control belongs to. So this.form refers to the form the select control belongs to, which is the same form the other select control in the function arguments also belongs to.

    Note: Other browsers don't accept select.value. The proper way is:

    select.options[select.selectedIndex].value

    But IE and Gecko-based browsers accept the shortcut version. The only browser I know that doesn't like the shortcut is Netscape4.x. Not sure on other browsers like Opera and Safari. But definitely, if you want to get the text property of the selected option, you need to use the longer code.

    select.options[select.selectedIndex].text

    So my suggestion is to always use the longer code for getting select values.

    <SELECT name="tbSelMonth" style="font-size: 12pt;"
    onchange="fUpdateCal(this.options[this.selectedIndex].value, this.form.tbSelYear.options[this.form.tbSelYear.selectedIndex].value)"
    >
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •