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.


Frequently Asked Questions:

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);

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.


Known Issues / Bugs:

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.


Version History: