Scrolling HTML Basics, Part III: Cross-Browser Version - www.docjavascript.com

Scrolling HTML Basics, Part III: The Cross-Browser Version

Scrolling HTML is an efficient way to display more information in less space than static HTML can, and can be used for many purposes including news, sports, and stock information. In this column we'll combine the Netscape and Explorer versions to create a cross-browser pausable scrolling HTML box.

Cross Browser Common Ground

In this column, we'll focus on the similarities and differences between Netscape Navigator and Internet Explorer that are relevant to our implementation of the scroller. We'll combine the Netscape and Explorer versions, and make the overall skeleton of the code consistent between browsers. We'll use different methods to handle inconsistencies between browsers which we described in a previous column, Introducing DOCJSLIB - A Cross-Browser JavaScript Library.

Scrolls Any External HTML File

This implementation is unique in that it uses an external file of bulleted links, without partitioning or parsing the content of this file. This capability enables you to decorate this external file with text and graphics and still be able to scroll it in the scrolling box. In fact, the file could consists of no links at all, and still be able to put through the scroller.

In this column you'll learn:

• How to devise a consistent scrolling algorithm.
• How to load an external HTML file into the scroller.
• How to set up the scrolling area.
• How to position the pages within the viewing area.
• How to scroll the box.
• How to stop the box and release it with the mouse.
• How to prepare the input file (feed).
• How to position the scroll box.
• How to modify the scroller's parameters.

At this point, you may also view the code for the Scroll Box and its control parameters, as well as download its zipped version.

Produced by Yehuda Shiran and Tomer Shiran

All Rights Reserved. Legal Notices.
Created: December 21, 1998
Revised: December 21, 1998

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