Scrolling HTML Basics, Part III: Stopping the Pages - www.docjavascript.com

Stopping the Pages

The event handlers are consistent between the two browsers. 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 which has been discussed on the previous page. 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);
}

Produced by Yehuda Shiran and Tomer Shiran

Created: December 21, 1998
Revised: December 21, 1998

URL: https://www.webreference.com/js/column32/stop.html