Previous on DHTML: DHTML I: Intro and Positioning Text
A common UI problem is wanting to display a small amount of information (like a date) that takes a big UI control to generate (like a calendar). The standard solution to this is to make some sort of sub-window where the user has as much real-estate as needed to get that information. Two ways to implement this are (1) a new browser popup window, (2) hidden divs.
Each has their own pros & cons. Popup windows are pretty standard and relatively cross-browser dependable. Recall that you can open a popup like so:
Popup windows have several disadvantages:
- It's hard to get data to and from them (you can pass data to them through the querystring, and from them with the window.opener property, but this is messy).
- They open up a whole separate application (i.e. a new browser)
A whole different solution is to use a hidden div, and perhaps enclosing an iFrame to present a whole new page. This gives you the benefits of a popup (more temporary real-estate), without the drawbacks.
We can implement this using CSS's visibility style, along with the positioning attributes. Here's a sample how:
This technique is another great benefit of DHTML. It's very useful when writing your own custom control (such as a dropdown or calendar) or making appropriate popups.