Inside Technique : HTML Tooltips : Techniques I

We handle the browser differences through a set of utility functions for:

• Retrieving a positioned element
• Hiding and showing positioned elements
• Updating the contents of a positioned element
• Setting the position of an element
• Setting up a browser-nuetral event object

Detecting Browsers

For detecting browser capabilities we use a technique called object capabilities detection. This works by checking for the existance of a property or method. If the member exists, it is used, otherwise alternative code is run.

To distinguish between IE4 and NS4, we cache whether or not the all collection exists. In IE4, the all collection contains a reference to every element in your document. Netscape does not have any equivalent support for accessing all elements. Instead, you can access a small set of elements through different collections. In this technique, we are working with positioned elements so we use the layers collection in Netscape. The check for all collection support is handled by comparing the all property to null:

  // If true, IE4
  var allSupport = document.all!=null

Later in our code, we check if the allSupport variable is true or false to distinguish between the browsers. See our inside techniques article, browser detection, for more information on this technique.

Retrieving a Positioned Element

This is our favorite function that is used in almost all of our cross-browser examples. It is a simple function that takes an ID and returns a reference to the corresponding positioned element. This function is used each time we need to reference the tooltip window.

  function getElement(elName) {
    // Get an element from its ID
    if (allSupport)
      return document.all[elName]
    else
      return document.layers[elName]
  }

Hiding and Showing Positioned Elements

Each time the mouse enters a link, we display the tooltip window underneath the element. When the mouse leaves the link, we hide the element. We created a setVisibility() function that takes the element to display (retrieved using the getElement function above), and a boolean value that represents hiding or showing the element:

  function setVisibility(el, bDisplay) {
    // Hide or show to tip
    if (bDisplay)
      if (allSupport)
        el.style.visibility = "visible" 
      else
        el.visibility = "show";
    else
      if (allSupport)
        el.style.visibility = "hidden"
      else
        el.visibility = "hidden"
  }

In Internet Explorer 4.0, every elements in-line style is exposed through a style object. Think of the style object as representing the HTML style attribute, and the properties representing the in-line style properties set on the element. Every CSS related property in IE4's Dynamic HTML share the same values as in the CSS specification.

Netscape Navigator 4.0 exposes only a very few style related properties. These properties are exposed on the element itself and they often do not correspond directly to their CSS counterparts. In this example, when hiding and showing, you need to recognize that scripts use the value "show", while authoring a style sheet would use the value "visible".

Now you have the basics for referencing and hiding and showing positioned elements. Next we continue with how to position and replace the contents of positioned elements.

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