Categories World Wide Web

Continued from Getting Dynamic

Setting style rules based on window size is only the beginning. You can apply the techniques you've learned in other ways as well. You could create a Web site that has completely different styles for spring, summer, fall, and winter, or one with different styles for holidays such as Halloween and Christmas.

To determine the time of the year, you'll use methods of the date object. getDay() tells you the day of the week; you can use it to create different versions of a Web site based on whether it is a weekday or the weekend. The values 0 to 6 correspond to the days Sunday to Saturday. getMonth() tells you the current month; you can use this method to determine the season or the approach of a holiday. The values 0 to 11 correspond to the months January through December.

Figure 3 shows how to set Christmas colors when the month value is November or December. One unfortunate drawback to using the date object in client-side scripts is that the time and date values are based on readings from users' computers, which may not always be accurate. Because of this, you may want to use a server-side script to determine the date.

In the example, style rules are applied to the entire body element by assigning a class name to the body tag. You could also assign the class name to individual elements within the document, such as paragraphs, table cells, or divisions. When you apply a background color to text elements, there are a few things you should note. IE fills in background colors for the entire element, meaning the color will extend to the right edge of the browser window. Navigator, on the other hand, displays background colors only behind an element's text, meaning the color will not extend to the right edge of the browser window.

To achieve the same background color effect in both browsers, you may need to rework your code. If you want the background color to fill to the right edge of the browser window (as it does by default in IE), use a table with width=100% and then assign a style to the table's header and data cells, like this:

<table width=100%>
<tr<>td class="season">
Edge to Edge</td></tr>
</table>

If you want the background color to appear only behind the element's text (as it does by default in Navigator), use a span element and then set the style for the span, as follows:

<p><span class="season">
Only Behind the Text</span></p>

This has been only a small sampling of what you can do with stylesheets and scripting. We hope these techniques will bring your Web pages closer to the cutting edge.

Next: Figure 1: Setting style rules for IE and Navigator.

Published as Internet Builder in the 5/4/99 issue of PC Magazine.

Related Links
• Server-Side JavaScript -- PC Tech
• DHTML That Works in Both IE and Navigator -- PC Tech
• JavaScript -- DevHead
• ScriptHead Archive -- DevHead
 
• JavaScript Programming Courses -- ZDU