Simplifying Date Data Entry, Part III

To define a DIV tag, use the following code:

some text

The ID attribute allows you to access the rectangle container by name in your script code. The DIV tag also corresponds to Netscape’s LAYER tag so you can use it to write cross-browser DHTML. The DIV Tag produces a rectangle on screen. The best way to learn about DHTML is to actually try out the code and see what happens. Since we will be doing some fancy positioning in our page, let’s test out with a dummy page before we place the code in our real page.

If you have a copy of the 10MinDateEntry.htm file from our last months’ article, open it and save it with a new name for our testing.

At the bottom of the page, add a DIV tag to hold our calendar. To make it visible as a distinct rectangle during our testing, use the STYLE attribute to make it yellow in color. Add the following code to the bottom of the page, just before the tag:

Some text here

You should be able to see the DIV tag as a long skinny rectangle that occupies one line of text at the bottom of the page. You can modify the size of the rectangle by adding values to the STYLE attribute. Since we will be positioning this DIV tag later on at different locations on the page, let us also set its position attribute:

Some text here

Now you get a rectangle that is about the size and shape of the calendar. Notice that we set the width and the height of the rectangle (DIV), but did not set its left or top property values.

The next task is to populate the inside of the DIV tag with the calendar, which is on a separate ASP page. This requires an inline frame that refers to an external file on your Web server. Fortunately, IE supports an inline frame HTML tag called IFRAME and makes it simple to use:

<%
%>

As you can see, we have an IFRAME tag pointing to the calendar page (last month article’s calpop.asp now renamed as calpopd.asp); within our DIV tag.

The last trick is to make the rectangle “disappear” and only “appear” when we click on the date drop down graphic. To make the calendar invisible, adjust the STYLE attribute of the DIV enclosing the calendar:

By adding the “display:one” attribute value renders the DIV tag, therefore the calendar invisible.

Making the Calendar Appear on Demand
Now let’s make the calendar magically appear on demand. We want this to happen when the user clicks on the graphic that represents the drop-down calendar. Before you can make the calendar appear, you need to position the calendar DIV rectangle just underneath the drop-down graphic. The first step is to encase the drop-down graphic within a small rectangle created by using SPAN tags. Make sure the SPAN tag has an absolute positioning by specifying it within its STYLE.

We therefore modify the code that reads:

To:

Notice the difference: We surrounded the hyperlink with a SPAN tag, set the positioning of the SPAN tag to absolute without specifying any other parameters, and gave the SPAN a name (reflecting the text box name it is next to) so that we can access it from our script code. Finally, change the JavaScript code called when the hyperlink is clicked from “showCalendar(1)” to “DropCalendar(1)” (which we will write later on). Specifying the positioning of the SPAN tag to absolute allows you to access its dimensions and locations to position the calendar DIV underneath it. To specify that the span is actually clickable, add the attribute “cursor:hand” to the STYLE for the SPAN. Repeat the process for all four drop-down calendar graphics with each SPAN ID reflecting the name of the text box next to it.

Note: Since the SPAN tags are positioned “absolutely”, you need to rework some of the HTML for the form to display all the controls properly.

The next step is to write the code for the DropCalendar routine. The DropCalendar routine has to perform the following actions:

• Move the calendar to the correct position on screen
• Populate it with the correct calendar (and “text box to modify” information)
• Make it visible

Use the following code for DropCalendar:

function DropCalendar(i) {	// declare variable	var tbm;	var theSpan	var SpanBox, CalBox, CalFrame;	// assign field name to variable 	// based on argument	if(i==1) {		tbm='frmEntry.pebd';		theSpan = 'spanPEBD';	}	if(i==2) {		tbm='frmEntry.peed';		theSpan = 'spanPEED';	}	if(i==3) {		tbm='frmEntry.pabd';		theSpan = 'spanPABD';	}	if(i==4) {		tbm='frmEntry.paed';		theSpan = 'spanPAED';	}		SpanBox = document.all[theSpan];		CalBox = document.all['popCal'];		CalFrame = document.all['CalFrame'];		// Position			CalBox.style.left = SpanBox.offsetLeft;		CalBox.style.top = SpanBox.offsetTop 		+ SpanBox.offsetHeight + 2;		// Update the Source within it		CalFrame.src = 'calpopd.asp?tbm='+tbm;		// Make it visible		CalBox.style.display='';}

As you can see, the first thing to do is to declare some variables:

// declare variablevar tbm;var theSpanvar SpanBox, CalBox, CalFrame;

Populating the Calendar
We now need to figure out the name of the modified text box (or tbm variable used by the calendar ASP page) as well as the name of the SPAN tag under which we need to position the calendar DIV tag. Because there are four separate drop-down calendar triggers on the page all using the same single drop-down calendar, we need a way to know which date text box invoked the calendar. We do this by passing an argument to the “DropCalendar” function when the appropriate graphic is clicked. Use this code to set some values to the variables based on the argument passed in:

// assign field name to variable // based on argumentif(i==1) {	tbm='frmEntry.pebd';	theSpan = 'spanPEBD';}if(i==2) {	tbm='frmEntry.peed';	theSpan = 'spanPEED';}if(i==3) {	tbm='frmEntry.pabd';	theSpan = 'spanPABD';}if(i==4) {	tbm='frmEntry.paed';	theSpan = 'spanPAED';}

Now assign values to some more variables to ease its use within the code:

SpanBox = document.all[theSpan];CalBox = document.all['popCal'];CalFrame = document.all['CalFrame'];

Finally, position the Calendar DIV tag (the object within the CalBox variable) so that it uses the same “left” position as the SPAN tag (the object within the SpanBox variable) positioned just below it:

// Position	CalBox.style.left = SpanBox.offsetLeft;CalBox.style.top = SpanBox.offsetTop + SpanBox.offsetHeight + 2;

Now populate the source for the calendar within the Calendar DIV tag. Remember, the calendar ASP page requires you to provide the correct text-box-to-modify argument as a Querystring value. Use this code:

// Update the Source within itCalFrame.src = 'calpopd.asp?tbm='+tbm;

And our pièce de résistance, making the calendar control visible:

// Make it visibleCalBox.style.display='';

The calendar control appears like magic when the user clicks on one of the drop-down calendar graphics.

I urge you to download the complete source code for this month’s article and experiment with it.