Inside Technique : Auto-Scrolling Viewports : The Code

To handle the cross-browser issues, we wrote our script using our cross-browser DHTMLLib. This library exposes a compatible subset of Internet Explorer's object model in Netscape. For this reason, you will notice the script contains no browser detection.

<SCRIPT SRC="dhtmllib2.js"></SCRIPT>
<SCRIPT>
var sRepeat=null
function doMarquee(dir, src, amount) {
 if (window.document.readyState=="loading") 
   alert("Please wait until the page is finished loading.")
 // Amount is optional - default to 10 if not specified
 if (amount==null) amount=10
 // For each direction, increment and check if to start over
 switch (dir) {
  case "up":
    document.all[src].style.pixelTop-=amount
    if (-document.all[src].style.pixelTop>=document.all[src].offsetHeight)
     document.all[src].style.pixelTop=document.all[src].offsetParent.offsetHeight
    break;
  case "down":
    document.all[src].style.pixelTop+=amount
    if (document.all[src].style.pixelTop>document.all[src].offsetParent.offsetHeight)
     document.all[src].style.pixelTop = -document.all[src].offsetHeight
    break;
  case "left":
    document.all[src].style.pixelLeft-=amount
    if (-document.all[src].style.pixelLeft>=document.all[src].offsetWidth)
     document.all[src].style.pixelLeft=document.all[src].offsetParent.offsetWidth
    break;
  case "right":
    document.all[src].style.pixelLeft+=amount
    if (document.all[src].style.pixelLeft>document.all[src].offsetParent.offsetWidth)
      document.all[src].style.pixelLeft = -document.all[src].offsetWidth
    break;
 }
}
</SCRIPT>

To start an auto-scrolling viewport, you create a repeating timer that calls the doMarquee function. To run cross-browser, this cannot be called until after the page is loaded:

function doLoad() {
  setup() // Initialize DHTMLLib
  // Start scrolling viewport
  sRepeat = setInterval("doMarquee('right','s1')",100)
}

window.onload = doLoad

The doMarquee function has 3 arguments (third is optional). The first argument is the direction, left, right, up, or down, the second argument is the string ID of the DIV to scroll, and the last optional argument is how many pixels to scroll on each tick. You can control the speed and smoothness of the animation by modifying the amount and the interval of the timer (the 100 in the doMarquee call above). The interval is specified in milliseconds.

To stop the marquee, you just call clearInterval on the return value of the setInterval call:

  // Stop scrolling the marquee
  clearInterval(sRepeat)

If you want to switch directions of the marquee, we recommend first stopping the marquee and then starting it again in the new direction. When starting the marquee in a new direction, it will continue from the existing offsets. You can also reset the either the top or left offset simply by setting the top or left of the scrolling contents:

  // Reset both top and left position of DIV "s1"
  document.all.s1.style.pixelLeft = document.all.s1.style.pixelTop = 0

Multiple Scrolling Viewports

This script is designed to allow multiple simultaneously scrolling viewports. While this is syntactically very simple, we have had problems with Netscape when multiple positioned DIV's are placed on the page. Therefore, be sure to test your pages when defining multiple scrolling regions.

Multiple auto-scrolling viewports are created by defining muultiple viepworts. Each of the viewport content DIV must have a unique ID. Next, you just create a timer calling the doMarquee function for each DIV. You should assign each return value to the timer to a unique variable if you wish to later stop the scrolling.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.