Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Listing 27.2 cbdhtml.js (excerpt)—Function Used to Create Layer

function createLayer(name, left, top, width, height, visible, content) {
   var z = layerList.length;
   var layer;
;
   layerList[z] = name;
;
   if (document.layers) {
      document.writeln(‘<layer name=“’ + name + ‘” left=’ + left +
                       ‘ top=’ + top + ‘ width=’ + width + ‘ height=’ + height +
                       ‘ visibility=’ + (visible ? ‘“show”’ : ‘“hide”’) +
                       ‘ z-index=’ + z + ‘>’);
      document.writeln(content);
      document.writeln(‘</layer>’);
      layer = getLayer(name);
      layer.width = width;
      layer.height = height;
   }
   if (document.all) {
      document.writeln(‘<div id=“’ + name +
                       ‘“ style=“position:absolute;overflow:none;left:’ + left +
                       ‘px; top:’ + top + ‘px; width:’ + width +
                       ‘px; height:’ + height + ‘px;’ +
                       ‘ visibility:’ + (visible ? ‘visible;’ : ‘hidden;’) +
                       ‘ z-index:’ + z + ‘“>’);
      document.writeln(content);
      document.writeln(‘</div>’);
   }
   clipLayer(name, 0, 0, width, height);
}

As you can see from Listing 27.2, and as mentioned at the beginning of this section, this function tests for the existence of the document.layers or document.all object to determine whether Netscape Navigator or Microsoft Internet Explorer is being used. One of the advantages of this approach is that older versions of these browsers will not generate an error because of this function; because neither object exists, this function will do nothing in those browsers.

•  hideLayer—Uses the visibility property to hide a given layer.

•  showLayer—Uses the visibility property to show a given layer.

•  isVisible—Returns the current status of the visibility property for a given layer.

•  moveLayer—Moves a given layer to an absolute (x,y) position within the Web page.

•  slideLayer, goSlide, slideStep—These three functions are used to set up and implement the slide of a layer from one position to another within a Web page. A slide is like a move, except that the layer is shown moving in steps from the initial to the final position.

•  clipLayer—This function is used to set the clipping parameters of a given layer.

•  swipeLayer, goSwipe, swipeStep—These three functions are used to set up and implement the swipe of a layer from one set of clipping values to another. This is called a swipe because, by using these functions to change the clipping from full display to nothing or vice-versa, you can create the effect of the layer being slowly uncovered from one side to the other.

•  scrollLayer—This function is used to scroll the content through the layer; it only does something noticeable if the content exceeds the size of the layer.

•  setBgColor, setBgImage—These functions can be used to set the background color and or background image of a layer.

•  replaceContent—Replaces the contents of a given layer with new content. One of the advantages of Microsoft’s Dynamic HTML is that it enables you to dynamically change the content of a Web page, but with Netscape’s you cannot. This function cleverly gets around this limitation by, in Netscape Navigator, causing the page to be reloaded and redrawn. In Microsoft Internet Explorer, it will be dynamically reformatted and redrawn (see Listing 27.3).

Listing 27.3 cbdhtml.js (excerpt)—Replace the Content of a Layer

function replaceContent(name, content) {
if (document.layers) {
    var layer = getLayer(name);
    layer.document.open();
    layer.document.writeln(content);
    layer.document.close();
  }
  else if (document.all) {
    var str = “document.all.” + name + “.innerHTML = ‘” + content + “‘”;
    eval(str);
  }
}

•  getLeft, getTop, getRight, getBottom, getWidth, getHeight, getClipLeft, getClipTop, getClipRight, getClipBottom, getClipWidth, getClipHeight, getWinWidth, getWinHeight, getzIndex—These 15 functions can be used to return the current values of the appropriate parameter of a given layer.

•  setzIndex, bringToFront, sendToBack, sortzIndex—These four functions can be used to change the relative vertical positioning of layers within a Web page.

•  getImgSrc, setImgSrc—These functions are used to get and/or set the source URL for a given image within a Web page.

•  getClipValues—This function determines and returns the clipping values of Internet Explorer layers.

•  getLayer—This function returns the handle for a given layer.

•  makeArray—This function is used to create a new array.

Cross-Browser Dynamic HTML Library Examples

A number of examples are on the Web site at which you can download the Cross-Browser Dynamic HTML library, all of which work with both Netscape Navigator and Microsoft Internet Explorer. Figure 27.7 shows an example of the animation that is possible using style sheet positioning. When you click the Start button, the colored balls begin orbiting the current mouse position. As you move the mouse pointer around, the balls follow.

FIGURE 27.7  Cross-Browser Dynamic HTML can be used to show equivalent animations and respond to the same Web browser events.

The next example shows how you can create content that automatically scrolls through a region of your Web browser window. In Figure 27.8, the mouse pointer is over the Up hypertext link, the Web page has scrolled all the way up to the top. When the mouse pointer is moved over the Down hypertext link, as shown in Figure 27.9, the text containing the U.S. Constitution begins to scroll downward.

These examples and many others, along with their full source code, can be found through Mike Hall’s Cross-Browser Dynamic HTML library Web page at http://members.aol.com/MHall75819/dhtml/cbdhtml.html.