Scrolling HTML Basics, Part II: Container Element Manipulation - www.docjavascript.com

Container Element Manipulation

The DIV element is the cornerstone of Dynamic HTML in Internet Explorer. The ability to contain one DIV within another DIV is a very important capability for creating dynamic effects with HTML. The canvas DIV is the container for the other two DIVs, firstPage and secondPage. The canvas DIV is static and its purpose is to define the scrolling window frame. The DIVs firstPage and secondPage are scrolling up underneath the canvas window.

A contained DIV inherits most of the properties from its containing DIV. The child DIV'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 DIV in our scrolling box example:

function makeCanvas() {
  var text = '<DIV ID="canvas" STYLE="position:absolute">';
  text += '<DIV ID="firstPage" STYLE="position:absolute">'
   + arBody[0].innerHTML + '</DIV>';
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
  text += '<DIV ID="secondPage" STYLE="position:absolute">'
   + arBody[0].innerHTML + '</DIV>';
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
  text += '</DIV>';
  document.body.insertAdjacentHTML("BeforeEnd", text);
  with (canvas.style) {
	width = canvasWidth;
	height = canvasHeight;
	clip = "rect(0 " + canvasWidth + " " + canvasHeight + " 0)";
	backgroundColor = canvasColor;
  }
  canvas.style.pixelLeft = canvasLeft;
  canvas.style.pixelTop = canvasTop;
}

We first create the DIV hierarchy. The canvas DIV includes the DIVs for both firstPage and secondPage. We then insert the DIV elements into the current page, just "BeforeEnd." The function finishes with assignment of the canvas properties: its width, height, clip, background color, left position, and top position. The clip area is the only area of the DIV that is going to be displayed.