DHTML Scroller: Help!
If you're stuck, this is the place to start. There are several resources here:
If nothing helps, you can post or read questions in the system of
forums on my site.
How do I load files into the scroller?
The script provides 3 JavaScript methods to load files. You can call the load() JavaScript
function of a scroller object like so: content.load('file.html') which will load in a file into
the scroller without reloading the entire page.
Alternatively, if you want to link to the scroller document and pass it the name of files
to load, use the "URL Query" load mechanism. This is useful if you want to link to another page
that contains the scroller script, and give it a default file to load.
Finally the script includes code to capture clicks on loaded documents -- within loaded files
you can just use regular A HREF links, and A TARGET="scrollername" links work outside too.
I recommend constructing your URLs in the form of either just "file.html" or "/folder/file.html"
as relative folder links like "folder/file.html" don't work well across different browsers.
The files I load aren't behaving as I expect...
Remember, this is NOT a frameset. Files "loaded" are inserted into the content DIV in the
scroller page, and are merged with the current document. Hence, unless you really know what
you're doing, it's best to keep loaded files simple, and keep all your fancy effects like
scripts and forms in the scroller document itself.
Can I scroll horizontally?
Not without major modifications to the script. This is probably not best suited to
scrolling horizontally for the simple fact that in Netscape 4, you cannot change the width of
a div to accommodate its content -- it only flows downwards. Maybe in a future version...
How do I position/resize the scroller?
Find the section of code where you declare "content = new DHTMLScroller(...);".
Beneath this there are several lines of the form "divs[n] = new Array(...);" with expressions
inbetween. The array values are the ID of the element, followed by X an Y, then width and height.
For example, to have a scroller that was fixed in size and centred, you might write:
... = new scrDiv('...', 'page.winW()/2 - 200', 'page.winH()/2 - 200', '400', '400', 2);
This would centre the X and Y positions, and keep the width fixed. Be aware that you'll have
to tweak all the divs (arrows, scrollbar etc.) to get it to look right.
How do I combine this with the popup menus?
Keep this script in the HEAD and paste the Popup Menu JS/CSS files into the BODY and the HEAD
repsectively. You may wish to combine the cross-browser code in each core script perhaps, but
it's not compulsory. Then just use this syntax to load items from the menu into the scroller:
addItem('Click me', 'content.load("file.html")', 'js:');
How can I set up multiple scrollers on one page?
Simple.
Since the code is object orientated, just declare another scroller object.
The example script includes one scroller named 'content', just duplicate and rename all
occurances of 'content' to 'abcd' or whatever name makes sense.
Secondly, make copies of the IFrame, content, thumb, scrollbar and other divs in the page BODY.
Name them correctly, e.g. from 'contentBuf' to 'abcdBuf' or similar, just copy and paste the
whole lot.
How do I print the scroller content?
Normally, browsers print what they see on a page, which means you'll only get a small portion
of the scroller content. The easiest approach to printing is to insert this into the scroller
document itself and call it from a "Print-friendly page" link:
var printWin = window.open(content.loadedFile);
printWin.print();
This should open up the currently loaded scroller document in a new window and print it.
Alternatively you could specify a MEDIA="PRINT" stylesheet for your page that sets
"display: none" on the non-content areas of the page, and removes all clipping and positioning
values from the scroller div. In supporting browsers that would allow the user to just hit "print"
and the scroller contents would print out.
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.94. Anyway, the script gives old versions five seconds to load a file then displays whatever
they've got. NS6 is also very slow at dragging the scrollbar due to its poor DHTML support, later
Mozilla versions are much improved.
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.
- v4.0:
- Added bookmark-scrolling capability, to A NAME="" targets, via the load() routine.
- Added click-parsing to allow standard A HREF or A TARGET links to load files into
scroller area, with no ONCLICKs required.
- Nested the scroller content divs, improving overflow handling (body scrollbars).
- Rearranged script, now object class is at top and functions are added to it later.
- Rewrote events section, now it's in the core script and automatically activates all
scroller objects and backs up preceding events. There's no need to edit it at all now!
- Each div in your array now has a customisable visibility setting, to show it always,
never, or depending on scroller content size (much requested feature :).
- Added W3C XFRAME bookmarkable URI support, updating the older Query Load syntax.
- Fixed background-click detecting when the scroller divs were nested inside another
absolutely positioned div.
- Added 'maxThmHeight' configuration option, so you can have a constant size thumb.
- Put in a nice "sorry" message for older browsers in the content div initially, which will
show in Opera 6 (it can scroll, but can't load files).
- Patch for Opera 7.01+ which throw stupid security errors (7.00 was fine).
- Added "readyState" checking loop in addition to nested IFRAME loading routine, as Safari
doesn't like IFRAMEs much but supports readyState.
- Added a text-selecting fix for IE6 in XHTML documents that contain no body content other
than positioned DIVs.
- Changed the styles on divs a little, coloured a bit and set pointer cursor in Mozilla.
- 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: