Home arrow HTML arrow Browser Compatibility Modifications for a Web Page Calendar
HTML

Browser Compatibility Modifications for a Web Page Calendar


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.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
June 01, 2009
TABLE OF CONTENTS:
  1. · Browser Compatibility Modifications for a Web Page Calendar
  2. · Special Modification of the showMonth() Function
  3. · The Container for the Yearly Calendar
  4. · Conclusion

print this article
SEARCH DEVARTICLES

Browser Compatibility Modifications for a Web Page Calendar
(Page 1 of 4 )

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.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials