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:
- Can maintain one or several scrollers on a page.
- Scroll up or down by any amount, or to any position.
- Customisable smooth accelerating/decelerating scrolling speed
- 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.
- Mousewheel scrolling support in IE6+.
- Optional 'Sticky' drag mode, in which the page chases the scrollbar position.
- 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.
- No ONLOAD required in external file!
- 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...
Conditions of Use:
- 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.
- You may not redistribute this in any form, either intact or modified, without my consent.
- 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...
- 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:
- v3.5:
- Added scroller history tracking, so you can navigate back and forward.
- Added acceleration/deceleration setScroll() function, replacing 'loop' mechanism, so
smooth transitions occur when you press the scroller arrows.
- Altered CGI query loading routine to remove check for .HTML or .HTM files and put in
unescape() so "?" and "&" can be escaped and passed to loaded files are parameters.
- Changed cross-browser code for strict DOCTYPE compliance.
- Tweaked events code to make Mozilla/NS6 use DOM rather than NS4 event properties.
- v3.4:
- Added 'onlayout' event, and used it to hide the scrollbar thumb when not needed.
- Fixed minor JS error in NS4.03 when it complained about functions not always returning
values, thanks to JJ Elenbaas for pointing this out.
- Added 'sticky' floating scroll mode, which is kind of neat in a useless way :).
- Added ability to disable scroller bounds-checking if you want to scroll to weird
positions outside the normal scrolling range. For intro slide-in animations etc.
- Tweaked event capture code and NS4 resize bug handler code.
- A few more random tweaks to some example functions and comments.
- v3.3:
- Added mousewheel support in Internet Explorer 6+.
- Tweaked loading code, fixed small error that occasionally popped up when 'Stop'
button was pressed before file download even began.
- Changed 'divs[n] = new Array(...)' to 'divs[n] = new ScrDiv(...)' as objects make
more sense, and now you can pass an optional parent parameter to nest scroller divs
within other divs.
- Moved event routing etc. to the global event capturing functions, this should make
it theoretically posssible ;) to combine this with other scripts like Tipster.
- Included my new page object cross-browser code to detect window dimensions,
which replaces the old variables 'winWidth' and 'winHeight'.
- v3.2:
- Tweaked Layer API code (again!). Should now be easier to combine with my
other scripts.
- Moved some global event capturing functions in scroller functions outside
to the editing section, again for combining with other scripts.
- Linked to my new site ;).
- v3.21 Maintenance Release: Made winWidth/winHeight global variables so vertical
positioning formulae don't cause errors on scroll.
- v3.1:
- Incorporated altered cross-frame Layer API code, for future usage perhaps.
- Implemented a few extra safeguards, and adjusted NS4 event routing.
- Fixed one Incredibly Stupid Bug (tm): replacing existing content in the div when no
external file has been passed to the setup function.
- 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.