DHTML Gems
Fine DHTML tricks that may save your day.

Coder Candy

Considered too light to write dedicated articles on, here are a few DHTML tricks that make together a page full of coder candy.

Lock Table Headings

We'll create the 'locked headings' effect by making the table body scrollable. In other words, by manipulating a scrollbar, we'll be able to slide the table rows under/from the table heading. Exactly what we want right?

Luckily, CSS2 allows to achieve this effect very easily, by the overflow property for block elements. The property allows us to tell what happens if the content overflows the block element's predefined dimensions.

Using 'overflow', we tell that the table body part should be scrolled if necessary.

Here's the code:

<table width="200px" border="1" title="Table Heading">
<tr><th>Heading</th></tr>
</table>
<div style="width: 220px; height: 100px; overflow: auto">
<table width="200px" border="1" title="Table Body">
  <tr><td>Item</td></tr>
  <tr><td>Item</td></tr>
  <tr><td>Item</td></tr>
  <tr><td>Item</td></tr>
  <tr><td>Item</td></tr>
  <tr><td>Item</td></tr>
  <tr><td>Item</td></tr>
  <tr><td>Item</td></tr>
</table>
</div>

The code wraps the table body in a div element with fixed dimensions, and sets its overflow property to auto. This will make the scrollbar appear only if necessary.

Also, we need to manually dimension the 'Table Heading' table exactly as wide as the 'Table Body' table.

Finally, notice that we made the div element wide enough to accommodate both the table body and the scrollbar. Know that some people change their scroll bar dimensions, so you'll want to leave sufficient space here.

The result shows as expected (only in browsers that implement this CSS2 spec., meaning MSIE4+, but no Netscape Navigator 4.7):

Have fun with locked headings!

Text Overlays

Often people want to put text on top of graphics.

One particular interesting application was the timeline; a line ticking seconds away, very similar to the well know progress bar.

The trick is based on positioning HTML elements; positioning is supported as of CSS2.

Here's the code:

<table id="myTextTable" cellspacing="0"
       style="position:absolute; display:none;
              width:300px; height:20px;">
   <tr>
      <td id="myText" class="clsYellowCenteredText"></td>
   </tr>
</table>

<table id="myIndicatorTable" cellspacing="0"
       style="position:static; background-color:black;
              width:300px; height:20px;">
   <tr>
      <td id="myIndicator"
          style="background-color:red; width:0;"></td>
      <td style="background-color:gray;"></td>
   </tr>
</table>

<script language="JavaScript">
function onSecond()
{
    var now = new Date();
    myText.innerText = now;
    myIndicator.style.pixelWidth = (now.getSeconds()+1)*5;
    // Max width will be 60*5 is 300 px: size tables that wide!
   
    window.setTimeout("onSecond()", 1000);
}

myTextTable.style.top = myIndicatorTable.style.top;
myTextTable.style.left = myIndicatorTable.style.left;
myTextTable.style.display = "inline";
window.setTimeout("onSecond()", 1000);
</script>

How the overlay is achieved is shown in bold:

1. one table is positioned absolute,
2. the other table is positioned static, and
3. with some inline script, the first table is moved exactly on top of the second one

Here's the working example:

[Embedded Script not rendered to your browser]

To make this work in earlier Navigators, look into the LAYER element; that's how Netscape tried to allow absolute positioning at the time.

Anyway, you can just as easily use the techniques to put dynamic text on top of graphs, images, whatever.

Enjoy.

Also at the Whirly Wiry Web:

DHTML Gems
Fine DHTML tricks that may save your day. (Script)

Fighting eZula
The Web author's war against contextual advertising. (Script)

Detecting TopText and Surf+
Detecting eZula TopText and Spedia Surf+ Enabled Browsers (Script)

The Revealing HTTP Headers
View HTTP server response headers and unprocessed HTTP content. (Tool)

Launch-in-IE
Web pages can start applications. Securely. (ActiveX)

Open Office from a Web Page
Override IE's default behaviour to open Office documents in the browser window. (Script)

ShellExe launches HTML files from AUTORUN.INF
A ShellExecute wrapper that delivers (Utility)

Stealth Browser-Server Conversations
Exchanging data with the server without a page refresh. (Script)

Whirly Wiry Web Today
News, mission, and more skinnies you might be interested in. (General)

Dockyard
Material in test. (-)

The Whirly Wiry Web is RockinFewl's test bed and showcase in one.
All content, code and graphics are entirely crafted at our own premises, but material can freely be reused if charming credit is given.

WhirlyWiryWeb.com, 2001-2006. Address comments to Rockin at WhirlyWiryWeb.com