April 25, 2000 - Stopping a Scroller | WebReference

April 25, 2000 - Stopping a Scroller

Yehuda Shiran April 25, 2000
Stopping a Scroller
Tips: April 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

One of the features of our scroll box is that it stops when the mouse is placed within its boundary. Our scroll box consists of two pages, firstPage and secondPage, placed inside a container, canvas. To pause the scroll while a user mouses over the scrolling box, we added two event handlers to the scrolling pages, onmouseover and onmouseout (all lower case!). These events are defined for both firstPage and secondPage, as either one of them may be exposed at the canvas container. The definitions for the first page are:

firstPage.onmouseover = stopScrolling;
firstPage.onmouseout = scrollPages;

and similarly for the second page:

secondPage.onmouseover = stopScrolling;
secondPage.onmouseout = scrollPages;

The onmouseover event occurs when the mouse is placed over the scroll box. The onmouseout event occurs when the mouse is removed from the scroll box area. The event handler for the onmouseover event is the scrollPages() function. It starts the pages going, just as the invocation of the program does in the first place:

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

The Gtimer variable stores a pointer to the setInterval() command, which invokes the moveUp() function every Ginterval milliseconds. The event handler of the onmouseout event is the stopScrolling() function which clears the Gtimer pointer and thus cancels the call to the moveUp() function, causing the pages to halt:

function stopScrolling() {
  clearInterval(Gtimer);
}

Learn more about our scroller in Column 32, Scrolling HTML Basics, Part III: The Cross-Browser Version.