I've included 4 methods by which you can customize the scroll object. They work quite nicely and are easy to get a hold of. All of these methods are optional, if you don't set them they'll default to particular values that I've chosen.
Important: When using these methods you must call them before you build the scroll:
objectName = new Scroll('objectName',x,y,width,height)
objectName.method()
objectName.build()
setMargins() Method:
Determines the left, right, top, bottom margins for the contents of the scroll object
Usage:
objectName.setMargins(left,right,top,bottom)
setDimensions() Method:
Determines the dimensions of the scrollbar and the thickness of the border. The following diagram should help explain it:
Usage:
objectName.setDimensions(bar,arrow,box,border)
setColors() Method:
Determines the colors of various parts of the scroll.
Usage:
objectName.setColors(background,border,bar,arrow,box)
The colors must be set as a string (in quotes). To make the color transparent use null.
Example:
myscroll.setColors(null,'black','blue',null,'#FF0000') // makes background and bar transparent
setImages() Method:
The setImages() method is the one you'll likely always want to use. Instead of having just plain old squares for the parts of the scrollbar, you can define your own images. I've also allowed you to define the images that represent a "clicked" state so you can mimic 3D buttons or just make your page seem alive.
You can set the images for the scroll box (the part that scrolls), the up arrow, down arrow, and the background vertical bar. For first 3 there are 2 states - 0 when not clicked, 1 when clicked. The bar doesn't have a clicked state. For the bar I've allowed you to define the height of the image (barHeight) - this is so you can have either on tall image, or have a small image that you stretch out along the length of the scroll.
Usage:
objectName.setImages(box0,box1,arrowUp0,arrowUp1,arrowDn0,arrowDn1,bar,barHeight)
Example:
myscroll.setImages('box0.gif','box1.gif','arrowUp0.gif','arrowUp1.gif','arrowDn0.gif','arrowDn1.gif','bar.gif',350)
If you don't want to have an image for some of them, just use null as its value (without quotes).
View scroll-3images.html for a custom images scroll example. View Source Code.
| Home | Next Lesson: Creating and Destroying Layers |