Introduction

The TableCell holding each example has it's background colour (bgColor) set to 'threedface' which is the HTML equivalent to Visual Basic's 'vbButtonFace' constant.  You can stop the cursor appearing as an I-beam by using the style attribute 'cursor' set to 'default'.

Note: As this is aimed at VB programmers, vbScript has been used for familiarity.

Netscape: The examples use Internet Explorer's system color codes.  In Netscape, 'threedface' appears as green - so this page will look quite strange.  The scroll-bar example will not be displayed.

Toolbar and Flat Buttons
Description	Demonstrates a typical 'flat button' where the border appears only when the mouse is moved over it.
Toolbar Example:
Button Example:
Details	The border style of the button is changed when the 'onmouseenter' and 'onmouseleave' events are triggered.  The 'className' property of the button is changed to the appropriate style to either show or hide the border. The 'blur' method is used when the 'onfocus' event is fired to ensure that the focus rectange and the default button border are not activated. The 'title' property of each button is used to display tooltips.
Further reading:	There is an excellent article by George Young at Microsoft: Building a Dynamic HTML CoolBar which uses table cells as buttons.
Textbox
Description	Demostrates a single width border text box.  When active the border style changes.  Numbers cannot be entered into the textbox.
Textbox Example:
Details	Unlike the flat button example, we change the '.style.borderStyle' property directly.  When the textbox receives focus ['onfocus'] the 'borderStyle' is changed to 'inset'.  When focus is lost ['onblur'] the 'borderStyle' is changed to 'solid'.
Sectioned Listbox and colour ComboBox
Description	Demonstrates using style properties in the ListBox and ComboBox.
Listbox Example:	North America   Canada   United States   Mexico Europe   Austria   Belgium   Denmark   France   Germany   Greece   Hungary   Italy   Netherlands   Poland   Portugal   Spain   Sweden   Switzerland   United Kingdom South America   Argentina   Brazil Africa   South Africa Asia   India   Malaysia   Russia Australia   Australia   New Zealand
Details	The 'background-color' and 'color' styles are set for each option.  In the 'onclick' event the script checks to see if the selected item has a 'heading' class and if so moves to the next item.
ComboBox Example	Select Colour ...
Details	Each <OPTION> has the 'background-color' set to a chosen colour.  When the 'onChange' event fires the focus is sent to the list above - otherwise the focus on the combobox would be the 'highlight' colour.
Checklist
Description	Demonstrates using tables to create an advanced checklist.
Checklist Example:	1 Include images 2 Allow multiple line entries Like this. 3 Use Multiple columns - this example has 3 columns. 4 Use different fonts, colours and styles 5 Item five 6 Item six 7 Item seven
Details	The checklist is a DIV element with a 3 column Table.  The DIV element's height property is fixed.  The vertical scrollbar appears automatically because the table is larger than the area of the DIV.
Edit specific Text
Description	Demonstrates editing items within a larger non-editable piece of text.  Click on the [Name] area of the example text and edit the contents.  Press Tab to move to the [Age] area.
Edit Text Example	My name is [Name] and I am [Age] years old.
Details	The [Name] and [Age] items in the line of text are held within SPAN elements.  These have their 'contenteditable' attributes set.  The 'onfocus' event for each element changes the 'borderStyle' property of the SPAN to inset and the 'backgroundColor' to white to imitate a textbox.  Although the 'Enter' key is not trapped, the 'overflow' style of the SPAN element has been set to 'hidden'.
Cool Scrollbars
Description	Demonstrates effects you can use on the scrollbar of the webbrowser control or scrollable elements on the page.  To change the scrollbar for the webbrowser, set the style properties for the 'BODY' element.
Scrollbar Example
Select style
Details	The 'Single' and 'Flat' example change the 'scrollbar-highlight-color' and the 'scrollbar-shadow-color' to 'threedface' to give the impression that there is a single width border around the elements.  The 'Color' example changes the 'scrollbar-base-color' and this adjusts the highlight and shadow colours to hues of the base-color.
Scrollable Viewports
Description	Demonstrates displaying a large piece of information or interface within a smaller scrollable area.
Edit Text Example	Information: The scrollbar on the right allows you to access further interface elements in this area. Name: House name/number: Street Town/City This is the bottom of the scrollable area.
Details	The DIV element in the example has it's 'height' style property set to 100 pixels.  The 'overflow' style property has been set to 'auto'.