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