timstall: DHTML II: Using Hidden Divs instead of Popup windows

Tuesday, November 29, 2005

DHTML II: Using Hidden Divs instead of Popup windows

[This was originally posted at http://timstall.dotnetdevelopersjournal.com/dhtml_ii_using_hidden_divs_instead_of_popup_windows.htm]

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:

window.open("Window.aspx","Name1",'toolbar=no,location=no ...');

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).
You can't control where the user drags them. They can hide them behind other windows, move them all over, max or min them, etc.. To some extent you can pile on the JavaScript to minimize what the user can do, but it gets tedious.
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:

<html>
<head>
    <title>SimplePopuptitle>
    <style>
      .divAbsPosition1
      {
        z-index: 1;
        left: 100px;
        position:absolute;
        top: 50px;
      }
    style>
head>
<body MS_POSITIONING="FlowLayout">

    <form id="Form1" method="post" runat="server">

    <div id="DivAbsPosition" class="divAbsPosition1" style="COLOR: black">
      <table border="1" bgcolor=#ffffcc>
        <tr>
          <td>Whatever content you want goes here.td>
        tr>
      table>
    div>
      <input type=button value="Show"
        onclick="document.getElementById('DivAbsPosition').style.visibility='visible'" />
      <input type=button value="Hide"
        onclick="document.getElementById('DivAbsPosition').style.visibility='hidden'" />
      <p>Some normal page content goes here.p>
      <p>Some normal page content goes here.p>
     form>
body>
html>

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.

timstall

Tuesday, November 29, 2005

DHTML II: Using Hidden Divs instead of Popup windows

No comments:

Post a Comment