Scrolling HTML Basics, Part II: The Code

The Code

Adobe's Flash 10.1 Goes Mobile (Minus iPhone)

<HTML>
<HEAD>
<TITLE>A Scrolling JavaScript Canvas - www.docjavascript.com</TITLE>
<STYLE TYPE="text/css">
A.newslink {
text-decoration:none;
text-align:left;
color:blue;
font-size:14pt;
font-weight:bold;
font-style:normal;
font-family:serif;
line-height:14pt;
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
/* Copyright (c) 2000 internet.com Corp.  To receive the right
* to license this code to use on your site the original code must
* be copied from Webreference.com. License is granted if and only
* if this entire copyright notice is included, and you link from
* the page on which the code is used to Webreference at
* http://www.webreference.com/js/column31/ for the latest version.
*/
//
interval = 50;
  // The number of milliseconds between each vertical movement.
increment = 1; // The distance (in pixels) of each movement.
canvasColor = "#FFCC33";
  // background color of scroller, named or hex
//-->
</SCRIPT>
</HEAD>
<BODY>
<P>This is the beginning of the document.</P>
<P><IMG SRC="blank.gif"
        NAME="holdspace" ID="holdspace"
        WIDTH="350" HEIGHT="90"
        STYLE="visibility:hidden; position:relative;"></P>
<P>This is the end of the document.</P>
<IFRAME STYLE="display:none"></IFRAME>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--


var IE4 = (document.all) ? true : false;
var NS4 = (document.layers) ? true : false;

var Gtimer;

var upperPage;
var lowerPage;

var holdingImage = document.images["holdspace"];

var canvasLeft = holdingImage.offsetLeft;
var canvasTop = holdingImage.offsetTop;

var canvasWidth = holdingImage.width;
var canvasHeight = holdingImage.height;

var pageHeight = 0;

var arBody = new Array();

onload = startCanvas;

function showMessage() {
  upperPage = firstPage;
  lowerPage = secondPage;
  upperPage.style.pixelTop = 0;
  pageHeight = firstPage.clientHeight;
  secondPage.style.pixelTop = pageHeight;
  firstPage.onmouseover = stopScrolling;
  firstPage.onmouseout = scrollPages;
  secondPage.onmouseover = stopScrolling;
  secondPage.onmouseout = scrollPages;
}

function moveUp() {
  upperPage.style.pixelTop -= increment;
  lowerPage.style.pixelTop -= increment;
  if (lowerPage.style.pixelTop <= 0) rotateThePages();
}

function rotateThePages() {
  if (upperPage == firstPage) {
    upperPage = secondPage;
    lowerPage = firstPage;
  }
  else {
    upperPage = firstPage;
    lowerPage = secondPage;
  }
  lowerPage.style.pixelTop = pageHeight;
}

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;
}

function startCanvas() {
  if (NS4) return;
  document.all.tags("IFRAME").item(0).src = 'jscolumns3ie.html';
}

function fillCanvas() {
  arBody = document.frames(0).document.all.tags("BODY");
  makeCanvas();
  showMessage();
  scrollPages();
}

function scrollPages() {
  Gtimer = setInterval("moveUp()", interval)
}

function stopScrolling() {
  clearInterval(Gtimer);
}

//-->
</SCRIPT>
</BODY>
</HTML>