Now, let's find out to add scroll bars to a window.
Adding Scroll Bars
A scroll bar is typically used so that a user can move around in a large document. You can also use it when you need to ask for a value that falls within a certain range. Scroll bars can be created in a number of ways. In XUL, one can be created using the scrollbar tag. Some elements, such as text boxes, will also add scroll bars as necessary when the content inside is too large.
In this section, we'll discuss creating a stand-alone scroll bar. The user will set the value by adjusting the scroll bar. You probably won't use this too often. A scroll bar is made up of several parts, the slider, which is the main part of the scroll bar with the adjustable box, and the two arrow buttons on the end. A scroll bar creates all of these elements automatically.
The syntax of a scroll bar is as follows:
<scrollbar id="identifier" orient="horizontal" curpos="20" maxpos="100" increment="1" pageincrement="10"/>
The attributes are as follows:
- idThe unique identifer of the scroll bar
- orientThis specifies the direction of the scroll bar. The default is horizontal, which creates a scroll bar that extends from left to right. You can also specify vertical which creates a scroll bar that extends from top to bottom.
- curposThis indicates the current position of the scroll bar thumb (the box that you can slide back and forth.) The value ranges from 0 to the value of maxpos. This value does not need a unit. The default value is 0.
- maxposThis indicates the maximum position of the scroll bar thumb. The is a numeric value and does not have a unit. The default value is 100.
- incrementThe value here specifies how much the value of curpos changes by when the user clicks on one of the scroll bar arrows. The default value is 1.
- pageincrementThe value here specifies how much the value of curpos changes by when the user clicks pages through the scroll bar, which can be done by clicking on the tray between the box and the arrows. The default value is 10.
The example given in the syntax above will create a scroll bar that can range from a value of 0 to 100. The value 100 might be the number of lines in a list, but it could be anything you want. The initial value in this example is 20. When clicking on one of the scroll bar arrows, the value would change by 1 either up or down. By paging through the scroll bar, the value will change by 10.
When the user clicks the scroll bar arrows, the thumb will move by the amount specified by the value increment. Increasing the value of this attribute will cause the scroll bar to move farther with each click. The leftmost or topmost position of the scroll bar has the value 0 and the rightmost or bottommost position of the scroll bar has the value given by maxpos.
By adjusting the values of the scroll bar, you can have the thumb positioned just as you want it and the change when the user clicks the arrows just as you want it.
(Next) Next, we'll find out how to create toolbars.
I have come across a problem using "style overflow: auto;".
If I have a window that contains a box that doesn't overflow there aren't any scrollbars, as expected.
I then use a drop down menu to select an option that changes the contents of the box so that the content now overflows. I use window.sizeToContent() and everything displays fine. The box now has scrollbars.
However, when I now select the original option, that shouldn't overflow, the scrollbars are still present. This becomes ugly because you have a tiny bit of scrolling in each direction to see the full content of the box.
I assume that this is not how overflow "auto" should work.
To get round this I found that this worked:
document.getElementById("Abox").style.overflow = "hidden";
document.getElementById("Abox").style.overflow = "auto";
i.e. force scrollbars off and redraw window, then reset to auto and redraw window.