Browser Compatibility Modifications for a Web Page Calendar
(Page 1 of 4 )
Welcome to the conclusion of an eight-part series on building a web page calendar. The layout for each month that I gave you in the previous part of the series will work very well for Internet Explorer. In this part of the series, I show you an approach that should work for most, if not all, browsers.
Layout for most browsers
For each month we have to remove the table that holds the month. Our real problem now is that we need an HTML element to replace the table cell, whose value or content can be changed by Script program. An element that comes to mind is the SPAN element. The trouble with the SPAN element is that DOM does not give us a direct way to change its content. Another element that comes to mind is the Input Text Element. You can change the value of this element, easily, using Script.
We shall use the Input Text Element to replace the table cells. We shall give these elements small dimensions, since each of them will take only one or two digits, for the number of the day of the month. We shall make these elements read-only, so that the user can not change their contents. For simplicity, we shall remove their margins and borders; the user will not notice that they are Input Text elements. After a row of the Input Text elements, you have a <br /> element.
All of the Input Text elements that display numbers for the day of the month, except the numbers for Sunday, will be classified in a CSS class called "cell." All of the Input Text elements that hold the number for Sundays will be classified in a CSS class called "sun."
These are the CSS statements for the new Input Text elements:
input.cell {width:23px; background-color:LemonChiffon; margin:0px; border-width:0px}
input.sun {width:24px; background-color:LemonChiffon; margin:0px; border-width:0px; color:red}
This is the HTML code for the single month layout:
<div id="Cal" onclick="CalJustClicked = true;">
<input type="text" class="calHead" id="I01" readonly><input type="text" class="calHead" id="I02" readonly><br />
<input type="text" class="sun" value="S"><input type="text" class="cell" value="M"><input type="text" class="cell" value="T"><input type="text" class="cell" value="W"><input type="text" class="cell" value="T"><input type="text" class="cell" value="F"><input type="text" class="cell" value="S"><br />
<input type="text" class="sun" id="M000" value=""><input type="text" class="cell" id="M001" value=""><input type="text" class="cell" id="M002" value=""><input type="text" class="cell" id="M003" value=""><input type="text" class="cell" id="M004" value=""><input type="text" class="cell" id="M005" value=""><input type="text" class="cell" id="M006" value=""><br />
<input type="text" class="sun" id="M010" value=""><input type="text" class="cell" id="M011" value=""><input type="text" class="cell" id="M012" value=""><input type="text" class="cell" id="M013" value=""><input type="text" class="cell" id="M014" value=""><input type="text" class="cell" id="M015" value=""><input type="text" class="cell" id="M016" value=""><br />
<input type="text" class="sun" id="M020" value=""><input type="text" class="cell" id="M021" value=""><input type="text" class="cell" id="M022" value=""><input type="text" class="cell" id="M023" value=""><input type="text" class="cell" id="M024" value=""><input type="text" class="cell" id="M025" value=""><input type="text" class="cell" id="M026" value=""><br />
<input type="text" class="sun" id="M030" value=""><input type="text" class="cell" id="M031" value=""><input type="text" class="cell" id="M032" value=""><input type="text" class="cell" id="M033" value=""><input type="text" class="cell" id="M034" value=""><input type="text" class="cell" id="M035" value=""><input type="text" class="cell" id="M036" value=""><br />
<input type="text" class="sun" id="M040" value=""><input type="text" class="cell" id="M041" value=""><input type="text" class="cell" id="M042" value=""><input type="text" class="cell" id="M043" value=""><input type="text" class="cell" id="M044" value=""><input type="text" class="cell" id="M045" value=""><input type="text" class="cell" id="M046" value=""><br />
<input type="text" class="sun" id="M050" value=""><input type="text" class="cell" id="M051" value=""><input type="text" class="cell" id="M052" value=""><input type="text" class="cell" id="M053" value=""><input type="text" class="cell" id="M054" value=""><input type="text" class="cell" id="M055" value=""><input type="text" class="cell" id="M056" value="">
</div>
The cells for the numbers of the days of the month are no longer HTML TABLE cells. They are Input Text elements. So the following CSS line, which refers to the tables containing the table cells, is not needed.
table.Inl {display:inline}
The aim of this line was to make the table elements inline.
Next: Special Modification of the showMonth() Function >>
More HTML Articles
More By Chrysanthus Forcha
