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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

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.


People who read this tip also read these tips:

Look for similar tips by subject:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business