DHTML Scroller Engine v2.0

By Angus Turnbull.
Updated: 19 April 2001

Description:

Loads external content into a div, and then can scroll the content in a div vertically within a page using clipping. See my site for compatibility info and updates.

Features built-in:

Scrolling:
Loading External Content:

Limitations:

In IE/NS6, external files are loaded via the innerHTML of the body, meaning that only HTML within the <body> tags is loaded. Basically, it skips the page header, which is no great problem. As a general rule, it is best to keep external files simple - loading framesets etc. is not very practical. Be sure to test out all files loaded in both NS and IE.

NS6, at time of writing, doesn't support the onLoad event for Iframes -- phrases like 'should never have been released' spring to mind. So I've implemented a kludge to give NS6 five seconds to load a document, before transferring whatever it's got to the scroller. Does anyone know of an alternative check that can be repeatedly made to test if a document has loaded like readyState in IE? Basically, your NS6 users should see something. Hopefully :). You can avert this by placing an onLoad into the loaded file itself, there's an example commented in this file (dsreadme.html). It's your call.

The only other major limitation is in Netscape 4 - this browser cannot resize the page horizontally without going haywire. Instead, the script refreshes the page when the window is resized horizontally - and uses the CGI query mechanism to stay in the same document. So basically, it's the same as a 'back to top' click.

There is still a weird bug in NS4 in which the variables become undefined halfway through a scrolling function when dragging the scrollbar. I suspect this is caused by one onMouseMove event starting before another finishes... any ideas? I've implemented a workaround to allow scrolling to continue.

Usage:

When developing a website using this script, you'll definitely want to replace my 'text arrows' on the scrollbar with some real ones. I've kept this demo pretty simple with regards to presentation, so it's easily portable. Also, you'll want to trim comments out of the HTML code to speed loading times. Feel free to use and modify this, but please leave a link to my site somewhere.

You can load external files, or use content already inside the main div. If you decide to do this, pass an empty string to the setup() function on document loading, and you must hard-code the width into the style property of the main content div, otherwise NS4 doesn't know where to clip it. This bars you from resizing the div with the window, but you can still reposition it.

Version History:

Cheers, and good luck - Gus.