Scroll Object
Note: I happen to miss one small bug - the duplicate DynLayer in the Scroll object was pointing to the DynLayerWipeInit() function which I had removed. This was fixed 12-04-98 14:20 EST.
The Scroll Object allows you to make a layer that has a JavaScript generated scrollbar by which the user can scroll the content of the layer up and down. Though IE 4 has the IFRAME tag which can be used to scroll content there are limitations to it - it can't be transparent, and other layers cannot be positioned over it. Netscape does not have any built-in ability to scroll a layer, so there's no choice but to go with an all JavaScript solution. That's why I built the Scroll Object - it's solves these problems.
First off, take a look at what you can create using this object: demo-frames.html. It is a page with 2 scroll windows where one loads pages into the other to mimic frames.
This code has been thoroughly tested on all versions of Netscape 4 for Windows 95/98/NT, Netscape 4.05 for Linux, IE 4 and 5 for Windows 95/98/NT, and Netscape 4.01 for Mac - and it seems to work pretty well on all of them so you should have no troubles using this code. I have not tested IE for Windows 3.1, Unix or Mac, but I doubt it will work on those. I would like to recieve feedback on how it works on other platforms. If you happen to run into something that doesn't work, please notify me about it.
I have reworked the Scroll Object quite a bit. Here is a list of the new or updated functionality:
- Most notably the scroll object now uses layer-based events rather than document-based. The advantages of this method are:
- even easier to set up - it can't get any easier than it is now
- can now be positioned relatively
- if the scroll is to be nested it does not require any additions methods to be called
- when the scroll window is moved/slid around the page, it will still work without updating any of the properties
- for IE there are 2 different ways to set up the scroll
- buffered (default) - uses an IFRAME as buffer for the content
- non-buffered - uses the IFRAME directly to show the content. This is how I originally wrote this scrollbar code. There are advantages and disadvantages to both ways which will be described later on.
- There is no longer a need to have it's own hide() or show() methods, you can just use the .lyr (dynlayer) methods
- When a content page is shorter than the scroll, it only hides the scroll box rather than the whole scrollbar
- The scrollbar itself has been "unglued" from the edge of the content box. You can now assign a different location for it by sending an x and y value in the setDimensions() method. This also results in a change to the physical structure of scroll. The border is now applied to the window which contains the contents - the border does not enclose the scrollbar as in previous versions. If you want the border around the scrollbar itself you will have to do that in the scroll images or position the scroll on top of some other graphic.
Disadvantages of this new code:
The switch to layer-based events results in the following problems:
- Because the events are layer-based, you have to keep the mouse on top of the scroll bar when sliding it up and down. This means you have to be more accurate with the mouse when scrolling.
- this new code does not work at all when used with regular Frames (in Netscape). I had many questions about using the scroll along with frames. With the old code it was possible by changing just one line, but now for some reason it doesn't work at all. I will investigate to see if there is a workaround.
- The scroll object is no longer compatible with any document-based mouse event code such as the Drag Object. In practice though, document-based events are rarely needed. I will be reworking parts of this tutorial to show ways around it by using layer-based events instead.
Even with these disadvantages, I believe the new scroll is far superior to previous versions and can be more easily used for building even more complex java-like widgets. However, if you want to investigate using the old scroll code you can look at demo-oldscroll.html.
Possible Future Enhancements:
- The next version of the scroll will allow for horizontal scrolling as well. This will greatly increase the amount of code needed, so perhaps I will make 2 versions.
- I plan to incorporate a system by which you can have multiple inline layers that can be swapped in and out of the scroll - an alternative to using external files for your content.
- I may attempt to create more widgets based on the scroll like a tree-menu/foler explorer
There's a lot stuff to explain so I've separated this column into the following sections: