Scrolling HTML Basics, Part I: Container Layer Manipulation - Doc JavaScript

Container Layer Manipulation

We have mentioned previously that the Layer object is the cornerstone of Dynamic HTML in Netscape Navigator. The ability to contain one layer within another layer is probably the second most important capability for creating dynamic effects with HTML. A layer should never placed alone without a container on the page. You should make clear design choices which layer should go within which layer. In our scroller box example (see the diagram on the second page), the canvas layer is the container for the other two layers, firstPage and secondPage. The canvas layer is static and its purpose is to define the scrolling window frame. The layers firstPage and secondPage are scrolling up underneath the canvas window.

A contained layer inherits most of the properties from its containing layer. The child layer's top and left properties are measured with respect to the ancestor's top left corner, and both default to zero. Here is the definition of the container layer in our scrolling box example:

function scrollBox(left, top, width, height, src, speed) {
  Gwidth = width;
  Gsrc = src;
  Gwidth = width;
  Gspeed = speed;
  canvas = new Layer(width);
  canvas.left = left;
  canvas.top = top;
  canvas.clip.width = width;
  canvas.clip.height= height;
  canvas.visibility = "show";
  makeFirstPage();
  canvas.document.parent = canvas;
}

This function is the window of the scrolling box to the external world. We assemble an API-like interface around this function. You can control the scrolling box's left, top, width, height, src (HTML feed), and speed of scrolling. The first few statements copy the API-like parameters to global variables, so they will continue to be accessible from other functions:

Gwidth = width;
Gsrc = src;
Gwidth = width;
Gspeed = speed;

The rest of the statements deal with the creation and setup of the canvas layer. We first create the layer:

canvas = new Layer(width);

Notice that, as opposed to the other two layers, we call the Layer object creation with a single width parameters. This is of course because the canvas layer is not contained in any other layers. After creating the layer, we set its top and left positions to the desired values with respect to the original page. The clip's properties, (width and height) are assigned as well. The clip area is the only area of the layer that is going to be displayed. You must assign the Layer Object's visibility property to "show", or else you won't get any scroller box. We end the scrollBox() function with a call to makeFirstPage(). Notice that here, as opposed to the previous two layers, a function call is possible. We suspect it is because we do not load any HTML feed so the loading time of the canvas layer is instantaneous and can be interrupted with an immediate function call.

Produced by Yehuda Shiran and Tomer Shiran

Created: November 23, 1998
Revised: November 23, 1998

URL: https://www.webreference.com/js/column30/container