Scrolling HTML Basics, Part III: Setting Up the Viewing Area - www.docjavascript.com

Setting Up the Viewing Area

The scroll box is set up inside the makeCanvas() function. In Internet Explorer, it starts with extracting the HTML code from the external file into firstPage and secondPage

function fillAllPages() {
  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);
}

Notice the hierarchical structure of these dynamic HTML elements. The canvas element contains the firstPage and secondPage elements.

In Netscape Navigator, the canvas element is created via a layer constructor:

canvas = new Layer(canvasWidth);

The clipping area of the canvas is generated next. While in Netscape Navigator the creation of a clipping area is as simple as property assignment, you need to use the rect() constructor in Internet Explorer:

if (IE4){
  canvas.style.clip = "rect(0 " + canvasWidth + " " + canvasHeight + " 0)";
}
else {
  canvas.clip.width = canvasWidth;
  canvas.clip.height= canvasHeight;
}

The remainder of the makeCanvas() function sets the width, height, top, left, background color, and visibility properties of the scrolling box:

eval("canvas" + styleString).width = canvasWidth;
eval("canvas" + styleString).height = canvasHeight;
if (NS4) {
  canvas.left = canvasLeft;
  canvas.top = canvasTop;
  canvas.bgColor = GcanvasColor;
}
else {
  canvas.style.pixelLeft = canvasLeft;
  canvas.style.pixelTop = canvasTop;
  canvas.style.backgroundColor = GcanvasColor;
}
eval("canvas" + styleString).visibility = (NS4) ? "show" : "visible";

Produced by Yehuda Shiran and Tomer Shiran

Created: December 21, 1998
Revised: December 21, 1998

URL: https://www.webreference.com/js/column32/canvas.html