Adding+Scrollbars

Adding Scrollbars with CSS
Adding a scrollbar to a div helps to contain large amounts of text, or even multiple pictures, from expanding the size of your Run BASIC web page. Use [|CSSID] to design the div and then include CSS scrollbar attributes to that div.

Auto Scrollbar
The css attribute will add a vertical scrollbar to your Run BASIC application. Design a DIV with
 * a defined width
 * a defined height
 * overflow set to auto

Although not necessary, it may be desirable to set
 * background color

for a better visual effect.

code format="vbnet" txt$ = "RUN BASIC Message - Since the web was invented " txt$ = txt$ +"people have been creating applications " txt$ = txt$ + "that run on it. This has always been really " txt$ = txt$ + "hard... UNTIL NOW!"

cssID #ASB, "{   width: 200px;    height: 100px;    overflow: auto;    background-color: #C99;    }"

Div ASB Print txt$;" ";txt$ End Div code

Vertical Scrollbar
The vertical scrollbar can be designed using the attribute. The code is similar. The div includes


 * a defined width
 * a defined height
 * overflow-y set to scroll

Optional attributes are


 * background color
 * padding

code format="vbnet" txt$ = "RUN BASIC Message - Since the web was invented " txt$ = txt$ +"people have been creating applications " txt$ = txt$ + "that run on it. This has always been really " txt$ = txt$ + "hard... UNTIL NOW!"

cssID #VSB, "{   width: 200px;    height: 100px;    overflow-y: scroll;    background-color: #9C9;    padding: 20px 20px 20px 20px;    }"

Div VSB Print txt$;" ";txt$ End Div code

Horizontal Scrollbar
The cannot be used to include a horizontal scrollbar. Instead, use. The css attribute, must also be included. Since the text is designed not to be wrapped, the height need not be defined, but padding may be warranted. The required elements are


 * a defined width
 * overflow-x set to scroll
 * white-space set to nowrap

Optional settings are


 * background color
 * padding

code format="vbnet" txt$ = "RUN BASIC Message - Since the web was invented " txt$ = txt$ +"people have been creating applications " txt$ = txt$ + "that run on it. This has always been really " txt$ = txt$ + "hard... UNTIL NOW!"

cssID #HSB, "{   width: 200px;    overflow-x: scroll;    white-space: nowrap;    background-color: #99C;    padding: 20px 20px 20px 20px;    }"

Div HSB Print txt$;" ";txt$ End Div code

Browser Compatibilities
These codes have been successfully tested in
 * IE7
 * FireFox 2
 * FireFox 3
 * Opera 9.6

//Please add your browser to this list if tested.//