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.

Focus on WebFX

How was this made?

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.

How to include it?

First you need to import the javascript file like this:

<script type="text/javascript" src="scrollzoom.js"></script>

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.

Changing the slider through scripting

I've also created a function that sets the zoomValue and scrollValue of the slider so that you can have full control. This is called when the button above is pressed.

setValue(object, zoomValue, scrollValue)