Home > Element Reference : Splitter

Contents

### Splitter

An element which should appear before or after an element inside a container. When the splitter is dragged, the sibling elements of the splitter are resized. If a grippy in placed inside the splitter, one sibling element of the splitter is collapsed when the grippy is clicked.

More information about splitter

Attributes:

collapse | resizeafter | resizebefore | state

Style Classes:

tree-splitter

#### Attributes:

Inherited from XUL Element:

align
allowevents
allownegativeassertions
class
coalesceduplicatearcs
collapsed
container
containment
context
contextmenu
datasources
dir
empty
equalsize
flags
flex
height
hidden
id
insertafter
insertbefore
left
maxheight
maxwidth
menu
minheight
minwidth
mousethrough
observes
ordinal
orient
pack
persist
popup
position
preference-editable
ref
removeelement
sortDirection
sortResource
sortResource2
statustext
style
template
tooltip
tooltiptext
top
uri
wait-cursor
width

##### collapse

Type: one of the values below

Determines which side of the splitter is collapsed when its grippy is clicked. If this attribute is not specified, the splitter will not cause a collapse. You should put a grippy element inside the splitter when it is used for collapsing.

- none: No collpasing occurs.
- before: When the grippy is clicked, the element immediately before the splitter in the same parent is collapsed so that its width or height is 0.
- after: When the grippy is clicked, the element immediately after the splitter in the same parent is collapsed so that its width or height is 0.

##### resizeafter

Type: one of the values below

This attribute indicates which element to the right or below the splitter should be resized when the splitter is repositioned.

- closest: The element immediately to the right or below the splitter resizes.
- farthest: The element that is the farthest away from the splitter to the right or below the splitter resizes.
- grow: The elements to the right or below the splitter do not change size (unless they are flexible) when the splitter is dragged, but instead the entire container changes size.

##### resizebefore

Type: one of the values below

This attribute indicates which element to the left or above the splitter should be resized when the splitter is repositioned.

- closest: The element immediately to the left or above the splitter resizes.
- farthest: The element that is the farthest away from the splitter to the left or above the splitter resizes.

##### state

Type: one of the values below

Indicates whether the splitter has collapsed content or not. This attribute will be updated automatically as the splitter is moved, and is generally used in a stylesheet to apply a different appearance for each state.

- open: The content either before or after the splitter, depending on the value of the collapsed attribute, is currently displayed.
- collapsed: The content either before or after the splitter is collapsed and is not visible.
- dragging: The user is current adjusting the position of the splitter, typically by dragging it with the mouse.

#### Style Classes:

The following classes may be used to style the element. These classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.

##### tree-splitter

This splitter is intended to be used in tree columns (in-between treecol elements). The splitter will be drawn with no width so that it isn't visible, however, the columns may still be resized.

#### Properties and Methods:

Inherited from XUL Element:

align | allowEvents | blur | boxObject | boxObject.element
boxObject.getLookAndFeelMetric | boxObject.height | boxObject.screenX | boxObject.screenY | boxObject.width
boxObject.x | boxObject.y | builder | className | click
collapsed | contextMenu | controllers | database | datasources
dir | doCommand | flex | focus | getElementsByAttribute
height | hidden | id | left | maxHeight
maxWidth | menu | minHeight | minWidth | observes
ordinal | orient | pack | persist | ref
resource | statusText | style | tooltip | tooltipText
top | width

Inherited from Element:

addEventListener | appendChild | attributes | childNodes | cloneNode
dispatchEvent | firstChild | getAttribute | getAttributeNS | getAttributeNode
getAttributeNodeNS | getElementsByTagName | getElementsByTagNameNS | hasAttribute | hasAttributeNS
hasAttributes | hasChildNodes | insertBefore | isSupported | lastChild
localName | namespaceURI | nextSibling | nodeName | nodeType
nodeValue | normalize | ownerDocument | parentNode | prefix
previousSibling | removeAttribute | removeAttributeNS | removeAttributeNode | removeChild
removeEventListener | replaceChild | setAttribute | setAttributeNS | setAttributeNode
setAttributeNodeNS | tagName

Copyright (C) 1999 - 2004 XulPlanet.com