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

Layer Manipulation

The Layer object is the cornerstone of Dynamic HTML in Netscape Navigator. It has many properties and methods, which we are not going to list here for practical reasons. We have three layers in our scrolling box: firstPage, secondPage, and canvas. We cover the first two in this page. The canvas layer is covered later in this column.

The generation of the firstPage layer is very similar to the generation of the secondPage layer. Here is the code for generating the first:

function makeFirstPage() {
  firstPage = new Layer(Gwidth,canvas);
  firstPage.src = Gsrc;
  upperPage = firstPage;
  firstPage.onload = makeSecondPage;
  firstPage.onMouseOver = stopScrolling;
  firstPage.onMouseOut = scrollPages;      
}

The first line, firstPage = new Layer(Gwidth,canvas);, creates the layer with a width of Gwidth and as a child of the canvas layer. We cover later in this column what is the meaning of having one page belonging to another page. By default, the page is positioned at the left top corner of the container canvas layer. The next statement assigns the external HTML page to the the layer's src property (firstPage.src = Gsrc;). This page determines the content of the scrolling window. The next statement assigns the newly-created page to upperPage (see the diagram on the second page). The statement:

firstPage.onload = makeSecondPage;

is the trickiest of them all. Its sole purpose is to generate the secondPage layer. One would think that replacing the delayed invocation:

firstPage.onload = makeSecondPage;

with the immediate one:

makeSecondPage();

would be just as good, but surprise, surprise, Netscape Navigator seems to have a bug in this area and it is not working! In fact, any function call made inside the makeFirstPage() function would break the scroller, even a simple document.write("kuku") statement. In conclusion, when you create a layer, DO NOT call any function! Netscape Navigator seems to be building the layer and is interrupted if attention is called elsewhere. Continue your program with the usage of the onload property. Of course, as we show on the next page, this is not always true, and on some occasions, Netscape Navigator allows a function call after a layer generation.

The last two statements define the event handlers, onMouseOver and onMouseOut. The first one stops the scrolling while the other one resumes it:

firstPage.onMouseOver = stopScrolling;
firstPage.onMouseOut = scrollPages;

The event handling functions, stopScrolling and scrollPages, are covered later in this column.

The secondPage layer is defined in a similar way:

function makeSecondPage() {
  secondPage = new Layer(Gwidth,canvas);
  secondPage.src=Gsrc;
  secondPage.onMouseOver = stopScrolling;
  secondPage.onMouseOut = scrollPages;
  lowerPage = secondPage;
  secondPage.onload = launchScroller;
}

Like the firstPage layer, we first create the layer as a child of the canvas container layer. Its left and top position with respect to the container layer are set to 0 by default. We then assign the Gsrc HTML feed to the src property, and the event handlers are defined as above. The last statement calls the launchScroller() function to actually start the scrolling. Here again a trick is employed. One would think that just calling the immediate launchScroller() function should do it. The fact is that a delayed function is needed:

secondPage.onload = launchScroller;

See above for a more extensive discussion of the problem.

Produced by Yehuda Shiran and Tomer Shiran

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

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