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-2 : Page 2


advertisement
Understanding the DHTML Foundation
HTML has two special tags that are normally not used for plain HTML: the <SPAN> and <DIV> Division tags. When Dynamic HTML was introduced, these two tags suddenly rose into prominence as useful "container" tags within which dynamic content could be manipulated. Both the SPAN and the DIV tags define a container area, the DIV tag defines a stand alone rectangle, while the SPAN tag defines a container that can be viewed as made up of many rectangles joined together to form a larger area.

To define a DIV tag, use the following code:

<DIV ID="popCal">some text</DIV>

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 </BODY> tag:

<DIV ID="popCal" STYLE="background-color:#FFFFCC;"> Some text here </DIV>

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:

<DIV ID="popCal" STYLE="position:absolute; width: 205; height:205; background-color:#FFFFCC;"> Some text here </DIV>

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:

<% <DIV ID="popCal" STYLE="position:absolute; width: 205; height:205; background-color:#FFFFCC;"> <IFRAME ID="CalFrame" SRC="calpopd.asp?tbm=blah" WIDTH="205" HEIGHT="205"></IFRAME> </DIV> %>

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:

<DIV ID="popCal" STYLE="position:absolute; width: 205; height:205; display:none">

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



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