Scroll Object
Revised:
- I changed a few internal commands to allow the scroll to be an object off of another (ie myobject.myscroll), the way it was previously didn't quite work.
- Also, the build() method has one new parameter .build(write) if this is made false the object won't automatically write the CSS for the layers.
- I added a dir parameter in the setImages() method to set the directory where all the images are
- These changes are totally backward compatible so you can simply replace your existing scroll.js with this new one and it should work fine.
- One last thing, I stated before that the Scroll Object isn't compatible with the Drag Object. Actually this isn't true, all you do is add a routeEvent(e) call at the end of the mouse event handlers and all is fine.
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.
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: