DHTML Scroller Engine v3.5

By Angus Turnbull - http://www.twinhelix.com. Updated: 3 September 2002


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:

 

Conditions of Use:

  1. This script is provided as-is, without a warranty of any kind, as although I strive to make it as compatible as possible I cannot guarantee it will work in all target environments, so test thoroughly.
  2. You may not redistribute this in any form, either intact or modified, without my consent.
  3. On sites that use this script, you should place a visible link to the splash page of my site, with a short description, for example: "DHTML / JavaScript provided by TwinHelix Designs". (Please don't link to individual pages within this site as my splash page detects browser capabilities). Also leave the my 'script name' comment in the source. These stop interested users emailing the webmaster asking how to acquire the scripts. If linking me doesn't suit your project...
  4. COMMERCIAL USERS: This script is 'donation-ware'. If you want to support this script and/or you are using this script as part of a commercial project, please consider making a donation via my site. After all, I have probably saved you several months developing, debugging and documenting a comparable script. Donors may take an optional exemption from a 'visible link' on the site, if that does not fit your site design.

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. Be sure to test out all files loaded in NS4, NS6 and IE.

Since the load is accomplished via JavaScript, due to browser security restrictions you can only load pages from the same domain as this script. Sorry, but that's the way browsers are, if you really need to load a page from another site perhaps make a CGI script on your server that requests it and returns it to the scroller.

Old versions of NS6/Mozilla and IE4/Mac don't fire onload events for IFrames which have their content dynamically rewritten. I have found Moz 0.90 doesn't, but this bug was corrected by Moz 0.95. Anyway, the script gives old versions five seconds to load a file then displays whatever they've got. NS6 is also quite slow at dragging the scrollbar, hopefully this too will improve one day.

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

Usage Instructions:

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 -- there's a handy utility from my site to assist with this. Please see my site for conditions of use, Frequently Asked Questions if you're stuck, compatibility information and updates.

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.