Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Simplifying Date Data Entry, Part III-3 : Page 3


advertisement
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:

<A HREF="javascript:showCalendar(1);"><IMG SRC="10Min200011cal.gif" WIDTH="39" HEIGHT="21" ALT="Click here to select date" BORDER="0"></A>

To:


<SPAN ID="spanPEBD" STYLE="positioning:absolute;cursor:hand"> <A HREF="javascript:DropCalendar(1);"><IMG SRC="10Min200011cal.gif" WIDTH="39" HEIGHT="21" ALT="Click here to select date" BORDER="0"></A> </SPAN>

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 variable var tbm; var theSpan var SpanBox, CalBox, CalFrame;





Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date