Inside Technique : DHTMLLib Floating Content
By Scott Isaacs

Introduction
DHTMLLib is a compatibility layer designed to simplify cross-browser DHTML scripting. In this article, we tackled the task of creating a simple floating content window that stays on the screen. With DHTMLLib we are able to create this floating window with a few lines of script. After reading this article, we recommend visiting the DHTMLLib 2.0 page to download and learn more about DHTMLLib.

Creating a floating window is a seemingly simple task. The goal is to reposition the floating content every time the user scrolls the page. Without DHTMLLib, this simple task is actually quite complicated if you want your script to run in both browsers. First, you need to detect what browser the visitor is using. If it is Netscape, you need to manipulate the element using the Layers collection, simulate an onscroll event using a timer (Netscape does not have this event), and calculate the elements position using Netscape specific properties. Internet Explorer, on the otherhand, uses the onscroll event to determine when the user scrolls, the all collection to access the element, and different properties to determine the position.

DHTMLLib takes the approach of emulating a subset of Internet Explorer's object model in Netscape Navigator. With DHTMLLib acting as your intermediary, you can ignore all the cross-browser differences and just write the script once.

Floating Windows
We created three versions of this article. You are reading the first one. This one uses standard HTML and is viewable by all browsers. The next two versions of this article demonstrate each of the floating window techniques outlined below. These two versions are demonstrations and are for viewing with version 4.0 or later of Netscape Navigator or Internet Explorer.

Scripting Floating Windows
See Demonstration
Getting back to our task at hand, let's create the floating content using DHTMLLib. We are going to create two different versions - one that keeps the floating window at a constant position and another that scrolls the floating window to the new position. We like the latter approach because it produces a more pleasing effect with less flicker.

First, let's examing keeping the content at a constant position. By using DHTMLLib we are able to accomplish this with one line of script (we will use a few more to make things simpler to follow).

<script SRC="dhtmllib2.js"></script>
<SCRIPT>
<!--
// How many pixels from the top to display the content
var topOffset = 80

function keepAlive() {
  // Move the content into view
  document.all.navBar.style.pixelTop = document.body.scrollTop + topOffset
}

function doLoad() {
  // Initialize DHTMLLib
  setup()
  // When the page scrolls, move the content
  window.onscroll = keepAlive;
  // Initialize the position
  keepAlive()
}
window.onload = doLoad;
// -->
</script>

This script keeps the DIV element with the ID "navBar" on the screen. For this to work, you must absolutely position the navBar DIV. We accomplish this with a global stylesheet that we place in the document's HEAD section:

<STYLE>
  #navBar {position: absolute;
    top: 150px; left: 8px; width: 170px}
</STYLE>

Next we define the contents to float inside of the navBar DIV. We define the contents using a table because we want to change the background color of the content's title:

<DIV ID=navBar>
<TABLE BGCOLOR=lightgrey WIDTH=170 cellspacing=0 cellpadding=0 border=0>
  <TR BGCOLOR=black>
    <TD NOWRAP WIDTH=170 BGCOLOR=black>
      &nbsp;<B><FONT COLOR=white SIZE=-2 FACE='geneva,arial,sans-serif'>
        Main Menu
      </FONT></B>
    </TD>
  </TR>
  <TR>
    <TD VALIGN=TOP BGCOLOR=#EEEEEE WIDTH=170 NOWRAP>
      ...Contents...
    </TD></TR>
  </TABLE>
</DIV>

This content can be embedded at the beginning or end of your page. The only caveat is to make sure you do not place this content inside of a table or other positioned element. This causes the element to be offset from a different position in the document - something our simple script is not designed to handle.

While this causes the content to stay on-screen, the frequency the onscroll event fires causes the content to be repositioned many times. This can lead to a lot of flickering. An alternative is to avoid directly positioning the content using the onscroll event and instead use a timer to animate the content onto the screen. Next we adapt our script to more cleanly scroll the element.

Animating the Content
See Demonstration

Animating the content only requires us to modify the script. We will position the same navBar element using the same stylesheet. Since we are going to use a timer to track the document's position we no longer need the onscroll event. The timer is going to continually poll the document to determine if the content needs to be moved. Each time we need to move the element, we will move it 10% of the distance until the content reaches the destination. By using a percentage of the total distance, the content moves quickly for long distances and then slows as it nears the correct position.

<script SRC="dhtmllib2.js"></script>

<script>
<!--
var topOffset = 80

function smoothMove() {
  var Dif = 
    parseInt((document.body.scrollTop+topOffset-document.all.navBar.offsetTop)*.1)
  // Work-around wierd Netscape NaN bug when Dif is 0
  if (isNaN(Dif)) Dif=0
  document.all.navBar.style.pixelTop+=Dif
}

function doLoad() {
  setup()
  window.setInterval("smoothMove()",20)
}
window.onload = doLoad;
// -->
</script>

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.