This is a sample of a new type of scroll bar that you can resize. If you ask yourself what resizing a scroll bar might mean you would probably agree that the logic meaning is that you are zooming. If the scroll bars fill up the entire width the display area should as well. By dragging the bottom of the scroll bar up the display area should be zoomed but it should still be placed at the top of the window.
Below is an image that can be zoomed and scrolled using the scroll bars below and to the right of it.
First I started editing the standard slider by inserted code from the genericResize script. When this was done I got generic scroll zoom sliders that gave me two values, one that represented the position (0-1) and one that represented the zoom value (1-). By binding the onchange "event" to an image I chAnged the size and position accordingly. I also needed to clip the image because it gets kind of big with a lot of zooming.
Then you need to create the slider. This is just any container with the class set to
scrollZoomHandle. A good container could be a DIV or an image. If you wan't a vertical
slider make sure to include the custom attribute
type="y". If this is omitted the type
is set to x
<div class="scrollZoomHandle" type="x" style="width: 50; height: 20; background: red;" onchange="window.status = 'zoom: ' + this.zoomValue + ' scroll: ' + this.scrollValue"> </div>
This is displayed below. Notice that the the parent element is the element that sets the boundaries, in this case the BODY element. In the more complex sample above I've used a div to set the boundaries and I've also placed a table inside the slider to make the handles.
I've also created a function that sets the
scrollValue of the
slider so that you can have full control. This is called when the button above is pressed.
setValue(object, zoomValue, scrollValue)