Popup Calendar 1.1 - DHTML Lab | 3 | WebReference

Popup Calendar 1.1 - DHTML Lab | 3


Logo

Pop-up Calendar 1.1
The non-persistence-of-navbar_style problem



Note

This page uses DHTML Lab Popup Calendar 1.0 (the previous version) in order to demonstrate the problem discussed.

The Problem

Click the image below to display a calendar. The HTML code for this calendar instance is:

<dlcalendar click_element_id="img_0"
            nav_images="dlcalendar_prevyear_black.gif,dlcalendar_prevmonth_black.gif,dlcalendar_nextmonth_black.gif,dlcalendar_nextyear_black.gif"
            navbar_style="background-color: yellow; color:black;"></dlcalendar>

Try it: calendar

The behavior is as expected. The CSS style properties defined in the navbar_style attribute are kicking in.

Now, pop up a calendar from the next image, below. The HTML code for this calendar instance is the same as for the previous one:

<dlcalendar click_element_id="img_0"
            nav_images="dlcalendar_prevyear_black.gif,dlcalendar_prevmonth_black.gif,dlcalendar_nextmonth_black.gif,dlcalendar_nextyear_black.gif"
            navbar_style="background-color: yellow; color:black;"></dlcalendar>

Try it: calendar

In this case, navbar_style properties seem to be overlooked. Why?

The Reason

The values of the following attributes:

navbar_style,
daybar_style,
selecteddate_style,
weekenddate_style,
regulardate_style and
othermonthdate_style

are applied as inline CSS style rules, overriding any other styles set for the element they are applied to.

daybar_style, selecteddate_style, weekenddate_style, regulardate_style and othermonthdate_style are applied to individual table cells and are successful in overriding any other style declarations for those cells.

navbar_style is applied to the complete table that forms the calendar's navigation row. If the page the calendar resides in has an overhead style rule that specifically affects table cells, then navbar_style will not override it.

The above may seem confusing, but it is easily illustrated by looking at these hypothetical code snippets:

<style>
    td { color: green }
</style>
<table>
    <tr><td style="color: blue">Some Text in BLUE</td></tr>
</table>

The above code has a CSS style applied to all table cells. Any inline style= declaration in a cell will override any global cell styling.

<style>
    td { color: green }
</style>
<table>
    <tr style="color: blue"><td>Some Text in GREEN</td></tr>
</table>

The above code has a CSS style applied to all table cells. Any inline style= declaration in a row will not override any global cell styling.

<style>
    td { color: green }
</style>
<table style="color: blue">
    <tr><td>Some Text in GREEN</td></tr>
</table>

The above code has a CSS style applied to all table cells. Any inline style= declaration in a table will not override any global cell styling. This is how the calendar script applied navbar_style.

The Fix

The fix is, of course, to ensure that navbar_style is applied to every cell in the calendar navigation row.

Again, for those familar with the script, the changes made are:

1. Statement removal in the dlcalendar_createHeader() function.

2. Statement addition in the dlcalendar_createHeaderRow() function.

3. Statement addition in the dlcalendar_buildNavigationCell() function.


On the next page, we introduce a new feature.



Send a comment or suggestion to Peter Belesis

Created: September 07, 2004
Revised: September 07, 2004

URL: http://webreference.com/dhtml/column69/3.html

Justtechjobs.comFind a programming school near you






Online Campus Both