Scrolling HTML Basics, Part III: The scroller.js Code- www.docjavascript.com

The scroller.js Code

// Beginning of Global Variables
var IE4 = (document.all) ? true : false;
var NS4 = (document.layers) ? true : false;
var styleString = (NS4) ? "" : ".style";
var holdingImage = document.images["holdspace"];
if (IE4) {holdingImage.getRealLeft = getRealLeft;
          holdingImage.getRealTop = getRealTop;
}
var canvasLeft = (NS4) ? holdingImage.x : holdingImage.getRealLeft();
var canvasTop = (NS4) ? holdingImage.y : holdingImage.getRealTop();
var canvasWidth = holdingImage.width;
var canvasHeight = holdingImage.height;
function getRealLeft() {
	xPos = this.offsetLeft;
	tempEl = this.offsetParent;
  	while (tempEl != null) {
  		xPos += tempEl.offsetLeft;
  		tempEl = tempEl.offsetParent;
  	}
	return xPos;
}
function getRealTop() {
	yPos = this.offsetTop;
	tempEl = this.offsetParent;
	while (tempEl != null) {
  		yPos += tempEl.offsetTop;
  		tempEl = tempEl.offsetParent;
  	}
	return yPos;
}
var Gtimer = "";
var upperPage = "";
var lowerPage = "";
if (IE4) {
  var arBody = new Array();
}
//End of global variables
function moveUp() {
  if (NS4) {
    firstPage.moveBy(0,-Gincrement);
    secondPage.moveBy(0,-Gincrement);
    if (lowerPage.top <= 0){
      upperPage.moveBy(0,upperPage.clip.height*2);
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
           rotateThePages();
         }
  }
  else {
    upperPage.style.pixelTop -= Gincrement;
    lowerPage.style.pixelTop -= Gincrement;
    if (lowerPage.style.pixelTop <= 0) {
      upperPage.style.pixelTop += upperPage.clientHeight*2;
      rotateThePages();
    }
  }
}
function rotateThePages() {
  if (upperPage == firstPage) {
    upperPage = secondPage;
    lowerPage = firstPage;
    return true;
  }
  upperPage = firstPage;
  lowerPage = secondPage;
  return true;
}
function scrollPages() {
  Gtimer = setInterval("moveUp()", Ginterval);
}
function stopScrolling() {
  clearInterval(Gtimer);
}
function launchScroller() {
  if (NS4) {secondPage.top = secondPage.clip.height;}
  else {secondPage.style.pixelTop = secondPage.clientHeight;};
  scrollPages();
}
function fillSecondPage() {
  secondPage = new Layer(canvasWidth - GleftPadding,canvas);
  secondPage.clip.width = canvasWidth - GleftPadding;
  secondPage.src = Gsrc;
}
function makeSecondPage() {
  if (NS4) fillSecondPage();
  if (NS4) {
    secondPage.left = GleftPadding;
  }
  else {
    secondPage.style.pixelLeft = GleftPadding;
  }
  secondPage.onmouseover = stopScrolling;
  secondPage.onmouseout = scrollPages;
  lowerPage = secondPage;
  eval("secondPage" + styleString).visibility = (NS4) ? 
    "show" : "visible";
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
  if (NS4) {secondPage.onLoad = launchScroller;}
  else {launchScroller();}
}
function fillFirstPage() {
  firstPage = new Layer(canvasWidth - GleftPadding, canvas);
  firstPage.clip.width = canvasWidth - GleftPadding;
  firstPage.src = Gsrc;
}
function showAndScroll() {
  if (NS4) fillFirstPage();
  if (NS4) {
    firstPage.left = GleftPadding;
    firstPage.top = 0;
  }
  else {
    firstPage.style.pixelLeft = GleftPadding;
    firstPage.style.pixelTop = 0;
  }
  eval("firstPage" + styleString).visibility = (NS4) ? 
    "show" : "visible";
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
  upperPage = firstPage;
  firstPage.onmouseover = stopScrolling;
  firstPage.onmouseout = scrollPages;
  if (NS4) {firstPage.onload = makeSecondPage;}
  else {makeSecondPage();};
}
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);
}
function makeCanvas() {
  if (IE4) {fillAllPages();}
  else {canvas = new Layer(canvasWidth);}
  if (IE4){
       canvas.style.clip = "rect(0 " + canvasWidth + " "
         + canvasHeight + " 0)";
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
  }
  else {
    canvas.clip.width = canvasWidth;
    canvas.clip.height= canvasHeight;
  }
  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";
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
}
function fillCanvas() {
  if (IE4) {arBody =
    document.frames("scroll").document.all.tags("BODY");};
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
  makeCanvas();
  setTimeout("showAndScroll()", Gdelay);
}
function redo() { location.reload(); }
function startCanvas() {
  if (NS4) {fillCanvas();}
  else {document.all.tags("IFRAME").item("scroll").src = Gsrc;}
  setTimeout("window.onresize = redo", 1000);
}
window.onload = startCanvas;