The ScrollBar object is exactly what you think it is and more. It's a widget that looks and works like a Scrollbar - but really all it is is one layer nested inside another one, that can be dragged around. But I've also made it a 2 dimensional scrollbar, if you set the dimensions accordingly you can drag the nested layer (which I will refer to as the 'box') around anywhere within the boundary. This widget could be used by itself as a generic slider or even perhaps as a zooming widget (I'll show what I mean). The Scroll2 object uses 2 instances of the ScrollBar, one for the vertical bar, one for the horizontal bar and then synchronizes them with a ScrollWindow.
Constructor
ScrollBar(x,y,width,height,boxW,boxH)
The width and height refer to the width and height of the entire widget (the outter layer), boxW and boxH are the width and height of the box (the inner layer). Then you do the usual build-css-div-activate sequence.
I've found that this object works much better in Netscape if you have the following code in the mouseMove() function in particular:
if (is.ns && e.target!=document) routeEvent(e)
The routeEvent() function will pass on events down through Netscape's heirarchy. For some reason a side effect of this is that if you start dragging the layer, it will continue to recieve coordinates even if your mouse goes outsite of the boundaries of the layer - the mouseMove code in Scrollbar takes control and won't let go until you release the mouse. This is a good feature actually - it makes the scrollbar work the way you'd usually want. I recommend putting the routeEvent() call in each of your mouse functions like so:
function mouseDown(e) {
if (is.ns && e.target!=document) routeEvent(e)
// other mouseDown code
return true
}
function mouseMove(e) {
if (is.ns && e.target!=document) routeEvent(e)
// other mouseMove code
return true
}
function mouseUp(e) {
if (is.ns && e.target!=document) routeEvent(e)
// other mouseUp code
return true
}
Example: scrollbar-simple.html [source] - a simple example of the ScrollBar.
By setting the width of the scrollbar to the same as the box you get a vertical scrollbar, and conversly if the height is the same as the box you get a horizontal scrollbar.
Example: scrollbar-vh.html [source] - shows vertical and horizontal scrollbars
The ScrollBar allows you to define your own images that are used:
mybar.setImages(bg,box,shade,dir)
setImages() must be called before you build()
Example: scrollbar-images.html [source] - setting images
| Property Name | Description |
| name | holds the name used for all the layers |
| w | width of the scrollbar |
| h | height of the scrollbar |
| bgColor | background color of the bar, default is null (transparent) |
| boxColor | background color of the box, default is null (transparent) |
| inc | the pixel increment for when you click somewhere on the bar and the box slides quickly to that spot |
| speed | the speed delay (in ms) for the above |
| boxvis | initial visibility of the box layer ('hidden','visible','inherit') |
| dragActive | returns true if the the box is currently being dragged |
| Method Name | Description |
| build() | assembles the css and div properties to create the layers needed |
| activate() | assigns all DynLayers and gets relevant information to allow the object to function |
| getXfactor() | returns a value between 0 and 1 according to the x-position of the box. 0 means it's at the left boundary, 1 means it's at the right boundary |
| getYfactor() | returns a value between 0 and 1 according to the y-position of the box. 0 means it's at the top boundary, 1 means it's at the bottom boundary |
| DynLayer Name | Description |
| lyr | The top-most layer of the ScrollWindow |
| boxlyr | The layer for the box |
| lyrc | A layer that overlaps the entire scrollbar, a 'cover' layer as I call it. This is the layer that retrieves and handles all the mouse events, and prevents you from clicking on the images that comprose the scrollbar |
The onScroll Event
The onScroll event is trigged whenever the box is being dragged around, or when you click on the bar and the box slides quickly to that spot. You can assign a handler to the onScroll event and use it to "do stuff" while scrolling the box.
mybar.onScroll = MyBarHandler
function MyBarHandler() {
status = this.getXfactor()+' '+this.getYfactor()
}
Example: scrollbar-methods.html [source] - shows how to use the methods
The Zoom Demo
This is a pretty neat demo which mimics a common control in graphic applications where it shows a small thumbnail of an image and lets you scroll around a bigger version of the image. Take a look at the code in this example to see how I used the onScroll event to synchronize the position of the big image with the x and y factors of the scrollbar. It might not look like it at first, but the small image is in fact a scrollbar widget. I put a thumbnail image as the shade image, and a transparent red square as the box image in the setImages() call.
Example: scrollbar-zoom.html [source]
| Home | Next Lesson: Scroll2 Object |