DHTML Scroller Engine v3.0
By Angus Turnbull.
Updated: 26 June 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:
- Can maintain one or several scrollers on a page.
- Scroll up or down by any amount, or to any position.
- Go to top or bottom.
- A fully draggable scrollbar thumb...
- ...that represents the size of the scrolled content in its div.
- Minimum thumb sizes may be set.
- Clicking an empty spot on the scrollbar goes page up/down.
- Keypress scrolling -- example uses A, Z, S, X, T, B and in IE the up/down arrows,
Page Up/Down, and Home/End.
- Positioning engine makes the main div resizable, and can redimension and reposition
any div on the page.
- Events can fire on loading/scrolling for easy extensibility.
- Minimum div sizes can be set as well.
Loading External Content:
- Regular links to "javascript:" load file into div.
- Uses div innerHTML via iframe buffer in IE/NS6 and layer load() in NS.
- URL query to load file possible e.g.
'divscroll.html?mainDiv=file.html&anotherScroller=file2.html&...'
- Other divs/layers/images can float over and under this one...
- Can form complete navigational system on one page...
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 fire onload events for IFrames which have their content
dynamically rewritten. This is a 'known issue' and future versions will solve this problem.
However, at present the script gives NS6 five seconds to load a file then displays whatever
it's got. As NS6 evolves to a release-worthy state (veiled jab at AOL/NS management :),
hopefully it will support the proper loading routine employed in this script. It's also quite
slow at scrolling -- hopefully this too will improve one day.
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.
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 in the ZIP file to assist with this.
Please see my site for conditions of use, Frequently Asked Questions if you're stick,
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:
- v3.0:
- Incorporated my Layer API, so useful functions can be shared between this and my other
scripts like the Popup Menus -- plus making it easier to read inline.
- Changed the way files are loaded -- it uses nested Iframes now, instead of repetitive
checking of readyStates, which worked only in IE. This new approach is (potentially)
compatible with Netscape 6, and smaller.
- Added a 'scrollTo()' function to scroll to a designated document position.
- Added support for arrow keys, page up/down, and home/end keys in IE.
- Added 'padding' settings for the top and bottom of the scroller.
- Added events to the scroller, to improve extensibility.
- Recoded the URL Query load routine to support loading files into multiple scrollers.
- Rewrote the comments with much more information and examples.
- Axed a whole load of global variables, built them into the scroller object.
- Many minor tweaks, such as using my addProps() function to lower constructor size.
- v2.0:
- Recoded using extensive object orientation. Now, one set of functions can maintain
several scrollers on a page!
- W3C DOM methods added, for Netscape 6 support - still slow & buggy there though.
- Added built-in div moving/sizing engine that can handle arrays of data for each
scroller, resizing automatically with the window.
- Added 'loop' mechanism to scroll repeatedly rather than use setInterval.
- Loads of smaller tweaks, like a 'loading' message.
- And it's still a lean, mean, scrolling machine :).
- v1.1:
- Incorporated new browser-sensing code to match popup menus.
- Few minor fixes, such as misdetecting mouse position when the whole window is
scrolled in IE and dragging while loading files.
- v1.0:
Cheers, and good luck - Gus.