Class: ScrollBar

ScrollBar(client, oOptsopt)

new ScrollBar(client, oOptsopt)

The ExScollBar/JS components provides scroll-bar/slider/track functionality for your application. A vertical or horizontal bar commonly located on the far right or bottom of a window that allows you to move the window viewing area up, down, left, or right. A slider or track bar is a graphical control element with which a user may set a value by moving an indicator. The ExScollBar/JS is a HTML standalone-component, written in JavaScript, that uses no third-party libraries.

Every option of the ScrollBar.Options type has associated a property of the control. For instance, the option:

cursors {string}, specifies the mouse cursor to be displayed when pointing over a part of the control
is associated with the property:
Cursors {string}, specifies the mouse cursor to be displayed when pointing over a part of the control
which means that the following statements are equivalent:
oScrollBar.Options = {cursors: "crosshair(lo,up,b),pointer(t)"}
oScrollBar.SetOptions({cursors: "crosshair(lo,up,b),pointer(t)"})
oScrollBar.Cursors = "crosshair(lo,up,b),pointer(t)"
oScrollBar.SetCursors("crosshair(lo,up,b),pointer(t)")
where oScrollBar is an object of ScrollBar type
Parameters:
Name Type Attributes Description
client any The client parameter indicates the control's client area as:
  • array of [x,y,width,height] type that specifies the control's client area
  • string, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
  • HTMLCanvasElement, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
oOpts object <optional>
 An object of ScrollBar.Options type that defines different options to display the control
Requires:
  • module:exontrol.commmon.min.js

Requires

  • module:exontrol.commmon.min.js

Classes

Options

Members

(static, readonly) ActionEnum :number

The ActionEnum type defines the actions the Scroll method can perform
Type:
  • number
Properties:
Name Type Description
exLineUp number Scrolls one line up
exLineLeft number Scrolls one line left
exLineDown number Scrolls one line down
exLineRight number Scrolls one line right
exPageUp number Scrolls one page up
exPageLeft number Scrolls one page left
exPageDown number Scrolls one page down
exPageRight number Scrolls one page right
exThumbPos number The user has dragged the scroll box (thumb) and released the mouse button
exThumbTrack number The user is dragging the scroll box
exScrollTop number Scrolls to the upper top
exScrollLeft number Scrolls to the upper left
exScrollHome number Scrolls to the min value
exScrollBottom number Scrolls to the lower bottom
exScrollRight number Scrolls to the lower right
exScrollEnd number Scrolls to the max value

(static, readonly) DisableNoScrollEnum :number

The ScrollBar.DisableNoScrollEnum type specifies whether the scroll bar is visible or hidden if no scroll is possible.
Type:
  • number
Properties:
Name Type Description
exHideNoScroll number Specifies that the scroll bar is hidden if no scroll is possible (while it is hosted by an exontrol.W)
exDisableNoScroll number Specifies that the scroll bar's buttons are disabled when no scroll is possible.
exShowNoScroll number Specifies that the scroll bar is visible even no scroll is possible (while it is hosted by an exontrol.W)

(static, readonly) ModeEnum :number

The ScrollBar.ModeEnum type defines the mode the scroll bar displays its parts
Type:
  • number
Properties:
Name Type Description
exAuto number The exAuto mode indicates that the size of the scroll bar determines what mode is displayed as: if the scroll bar's width is greater than its height, then a horizontal scroll is displayed, else a vertical scroll bar is shown
exVertical number The exVertical mode indicates that the control displays a vertical scroll bar.
exHorizontal number The exHorizontal mode indicates that the control displays a horizontal scroll bar.

(static, readonly) PartEnum :number

The ScrollBar.PartEnum type defines the parts of a scroll bar control.
Type:
  • number
Properties:
the
Name Type Description
exLeftB1Part number Identifies the first aditional scrollbar's (left or up) button
exLeftB2Part number Identifies the second aditional scrollbar's (left or up) button
exLeftB3Part number Identifies the third aditional scrollbar's (left or up) button
exLeftB4Part number Identifies the forth aditional scrollbar's (left or up) button
exLeftB5Part number Identifies the fifth aditional scrollbar's (left or up) button
exLeftBPart number Identifies the scrollbar's (left or up) button
exLowerBackPart number Identifies the part between the left/up button and the thumb part of the control
exThumbPart number Identifies the thumb part of the control
exUpperBackPart number Identifies the part between the the thumb and the right/down button of the control
exBackgroundPart number Specifies the lower (exLowerBackPart) and upper (exUpperBackPart) parts of the control
exRightBPart number Identifies the scrollbar's (right or down) button
exRightB1Part number Identifies the first aditional scrollbar's (right or down) button
exRightB2Part number Identifies the second aditional scrollbar's (right or down) button
exRightB3Part number Identifies the third aditional scrollbar's (right or down) button
exRightB4Part number Identifies the forth aditional scrollbar's (right or down) button
exRightB5Part number Identifies the fifth aditional scrollbar's (right or down) button
exRightB6Part number Identifies the sixth aditional scrollbar's (right or down) button
exPartNone number Identifies an unknown part of the control

(static) version :string

The version field defines the version of the control
Type:
  • string

Listeners :exontrol.Lts

The Listeners field defines the events of the control, as an object of exontrol.Lts type. The exontrol.Lts type supports forEach(callback, thisArg) method that helps you to enumerate the events the control supports. The Events section lists the events the component supports.
Type:
  • exontrol.Lts
Example
The following sample shows how you can get all events the component currently supports:

oScrollBar.Listeners.forEach(function(name)
{
 console.log(name);
});

The following sample displays scroll-bar's value as soon as it changes:

oScrollBar.Listeners.Add("onchange", function (oEvent)
{
 console.log(oEvent);
});

where oScrollBar is an object of ScrollBar type

Shortcuts :exontrol.Sts

The Shortcuts field defines the shortcuts of the control, as an object of exontrol.Sts type. In order to provide keyboard support for the component, the owner <canvas> element must include the tabIndex attribute, as <canvas ... tabIndex="0">. You can associated a function or a callback to any shortcut.
Type:
  • exontrol.Sts
Example
The following sample resets the scroll-bar's value once the user presses the Home key:

oScrollBar.Shortcuts.Add( "Home", function(oShortcut)
{
  oScrollBar.Scroll(exontrol.ScrollBar.ActionEnum.exScrollHome);
});

where oScrollBar is an object of ScrollBar type

Methods

BeginUpdate()

The BeginUpdate() method suspends the control's render until the EndUpdate() method is called. It maintains performance, while multiple changes occurs within the control. You can use the Update() method to perform multiple changes at once.

EndUpdate()

The EndUpdate() method resumes the control's render, after it is suspended by the BeginUpdate() method.

GetAdjustThumbPos() → {boolean}

The GetAdjustThumbPos() method specifies whether the thumb's position is automatically shown on the scroll bar's value, while user drags the control's thumb.
Returns:
Returns null or a boolean expression that specifies whether the thumb's position is automatically shown on the scroll bar's value, while user drags the control's thumb.
Type
boolean

GetAllowKeys() → {boolean}

The GetAllowKeys() method defines whether the control changes its value/position on keys.
Returns:
Returns null or a boolean expression that specifies whether the control changes its value/position on keys.
Type
boolean

GetAllowScrollDirect() → {number}

The GetAllowScrollDirect() method indicates the button the user can press so the control scrolls directly to the value from the cursor.
Returns:
Returns null or a number expression that specifies the button of the mouse to scroll directly to the value from the cursor. The allowScrollDirect property can be any of the following values:
  • 0, no button
  • 1, primary button (usually left)
  • 2, secondary button (usually right)
  • 4, auxilary button (usually middle or mouse wheel button)
  • 8, 4th button (typically the "Browser Back" button)
  • 16, 5th button (typically the "Browser Forward" button)
Type
number

GetButtonSize() → {number}

The GetButtonSize() method indicates the size of the buttons within a scroll bar
Returns:
Indicates the size of the buttons within a scroll bar.
Type
number

GetCanvas() → {HTMLCanvasElement}

The GetCanvas() method gets the canvas element, the control is running on.
Returns:
Returns the HTMLCanvasElement object the control is running on.
Type
HTMLCanvasElement

GetCaptionPart(bPart) → {string}

The GetCaptionPart() method gets the part's caption.
Parameters:
Name Type Description
bPart ScrollBar.PartEnum Specifies a part of the scroll-bar
Returns:
Returns undefined or the caption of the part
Type
string

GetClientRect() → {array}

The GetClientRect() method returns the control's client area.
Returns:
Returns an array of [x,y,width,height] type that specifies the control's client area
Type
array

GetCursors() → {string}

The GetCursors() method returns the mouse cursor to be displayed when pointing over a part of the control.
Returns:
Returns null or a list of parts separated by comma The format of cursors property is:
"cursor(part),cursor(part),..."
where:
  • "cursor", defines the CSS mouse cursor to display while cursor hovers the part
  • "part", defines the name of the part the cursor is applied on (as defined bellow)
The cursors property supports any of the following parts:
  • "l" (exLeftBPart, <) indicates the left or top button of the scroll bar
  • "l1" (exLeftB1Part) indicates the first additional button, in the left or top area
  • "l2" (exLeftB2Part) indicates the second additional button, in the left or top area
  • "l3" (exLeftB3Part) indicates the third additional button, in the left or top area
  • "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area
  • "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area
  • "t" (thumb), indicates the scroll's thumb
  • "r" (exRightBPart, >) indicates the right or down button
  • "r1" (exRightB1Part) indicates the first additional button in the right or down side
  • "r2" (exRightB2Part) indicates the second additional button in the right or down side
  • "r3" (exRightB3Part) indicates the third additional button in the right or down side
  • "r4" (exRightB4Part) indicates the forth additional button in the right or down side
  • "r5" (exRightB5Part) indicates the fifth additional button in the right or down side
  • "r6" (exRightB6Part) indicates sixth additional button in the right or down side
  • "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb)
  • "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button)
  • "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
Type
string

GetDisableNoScroll() → {ScrollBar.DisableNoScrollEnum}

The GetDisableNoScroll() method specifies whether the scroll bar's parts are enabled/shown or disabled/hidden, when no scroll is possible.
Returns:
Specifies whether the scroll bar's parts are enabled/shown or disabled/hidden, when no scroll is possible. The ScrollBar.DisableNoScrollEnum type supports the following values:
  • exHideNoScroll (0), specifies that the scroll bar is hidden if no scroll is possible (while it is hosted by an exontrol.W)
  • exDisableNoScroll (1), specifies that the scroll bar's buttons are disabled when no scroll is possible.
  • exShowNoScroll (2), specifies that the scroll bar is visible even no scroll is possible
Type
ScrollBar.DisableNoScrollEnum

GetEnableParts() → {string}

The GetEnableParts() method returns enabled parts of the scroll bar.
Returns:
Returns the list of parts being enabled separated by comma. The parts of the control are:
  • "l" (exLeftBPart, <) indicates the left or top button of the scroll bar
  • "l1" (exLeftB1Part) indicates the first additional button, in the left or top area
  • "l2" (exLeftB2Part) indicates the second additional button, in the left or top area
  • "l3" (exLeftB3Part) indicates the third additional button, in the left or top area
  • "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area
  • "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area
  • "t" (thumb), indicates the scroll's thumb
  • "r" (exRightBPart, >) indicates the right or down button
  • "r1" (exRightB1Part) indicates the first additional button in the right or down side
  • "r2" (exRightB2Part) indicates the second additional button in the right or down side
  • "r3" (exRightB3Part) indicates the third additional button in the right or down side
  • "r4" (exRightB4Part) indicates the forth additional button in the right or down side
  • "r5" (exRightB5Part) indicates the fifth additional button in the right or down side
  • "r6" (exRightB6Part) indicates sixth additional button in the right or down side
There are three additional parts (automatically computed) as:
  • "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb)
  • "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button)
  • "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
Any other literal between commas is ignored. If duplicate literals are found, the second is ignored, and so on.
Type
string

GetIgnoreLargeChange() → {boolean}

The GetIgnoreLargeChange() method specifies whether the large change value is ignored when getting the maximum value.
Returns:
If true, the large change value is ignored when getting the maximum value.
Type
boolean

GetInfo() → {object}

The GetInfo() method returns the scroll bar's range, page and position as an object of {range,page,pos} type/
Returns:
Returns an object of {range,page,pos} type that inicates the scroll bar's range, page and position
Type
object

GetLargeChange() → {number}

The GetLargeChange() method specifies the amount by which the scroll box position changes when the user clicks in the scroll bar or presses the PAGE UP or PAGE DOWN keys.
Returns:
Specifies the amount by which the scroll box position changes when the user clicks in the scroll bar or presses the PAGE UP or PAGE DOWN keys.
Type
number

GetLocked() → {string}

The GetLocked() method specifies whether the control is locked(protected) or unlocked
Returns:
Returns true, if the control is locked(protected) or unlocked
Type
string

GetMaxRange() → {number}

The GetMaxRange() method indicates the range the value can navigate to.
Returns:
Returns the range the value can go to.
Type
number

GetMaxValue() → {number}

The GetMaxValue() method indicates the scroll bar's maximum value.
Returns:
Indicates the scroll bar's maximum value.
Type
number

GetMin() → {number}

The GetMin() method indicates the scroll bar's minimum value (equivalent method of GetMinValue method).
Returns:
Indicates the scroll bar's minimum value.
Type
number

GetMinValue() → {number}

The GetMinValue() method indicates the scroll bar's minimum value.
Returns:
Indicates the scroll bar's minimum value.
Type
number

GetMode() → {ScrollBar.ModeEnum}

The GetMode() method defines the mode the scroll bar displays its parts
Returns:
Returns the mode the scroll bar displays its parts. The ScrollBar.ModeEnum type supports the following values:
  • exAuto (-1), indicates that the size of the scroll bar determines what mode is displayed as: if the scroll bar's width is greater than its height, then a horizontal scroll is displayed, else a vertical scroll bar is shown
  • exVertical (0), indicates that the control displays a vertical scroll bar
  • exHorizontal (1), indicates that the control displays a horizontal scroll bar
Type
ScrollBar.ModeEnum

GetOptions() → {object}

The GetOptions() method returns the current options of the control.
Returns:
An object of ScrollBar.Options that indicates the options to display the control.
Type
object

GetOrderParts() → {string}

The GetOrderParts() method returns the parts of the scroll bar, in their order
Returns:
Returns the list of parts separated by comma, in their order. The parts of the control are:
  • "l" (exLeftBPart, <) indicates the left or top button of the scroll bar
  • "l1" (exLeftB1Part) indicates the first additional button, in the left or top area
  • "l2" (exLeftB2Part) indicates the second additional button, in the left or top area
  • "l3" (exLeftB3Part) indicates the third additional button, in the left or top area
  • "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area
  • "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area
  • "t" (thumb), indicates the scroll's thumb
  • "r" (exRightBPart, >) indicates the right or down button
  • "r1" (exRightB1Part) indicates the first additional button in the right or down side
  • "r2" (exRightB2Part) indicates the second additional button in the right or down side
  • "r3" (exRightB3Part) indicates the third additional button in the right or down side
  • "r4" (exRightB4Part) indicates the forth additional button in the right or down side
  • "r5" (exRightB5Part) indicates the fifth additional button in the right or down side
  • "r6" (exRightB6Part) indicates sixth additional button in the right or down side
There are three additional parts (automatically computed) as:
  • "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb)
  • "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button)
  • "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
Any other literal between commas is ignored. If duplicate literals are found, the second is ignored, and so on.
Type
string

GetPage() → {number}

The GetPage() method specifies the amount by which the scroll box position changes when the user clicks in the scroll bar or presses the PAGE UP or PAGE DOWN keys ( equivalent of GetLargeChange() method ).
Returns:
Specifies the amount by which the scroll box position changes when the user clicks in the scroll bar or presses the PAGE UP or PAGE DOWN keys.
Type
number

GetPos() → {number}

The GetPos() method indicates the scroll bar's position (0-based).
Returns:
Indicates the scroll bar's position.
Type
number

GetRange() → {number}

The GetRange() method returns the range of the scroll bar's position (0-based)
Returns:
Returns a positive number, that indicates the range of the scroll bar's position
Type
number

GetScrollOnThumbRelease() → {boolean}

The GetScrollOnThumbRelease() method indicates whether the scroll occurs as soon as user releases the thumb-box.
Returns:
Returns null or a boolean expression that indicates whether the scroll occurs as soon as user releases the thumb-box.
Type
boolean

GetScrollRange() → {number}

The GetScrollRange() method returns the maximum position the scroll bar can go to (0-based).
Returns:
Returns a positive number, that indicates the range of the scroll bar's position
Type
number

GetShapeParts(bHorizontal) → {string}

The GetShapeParts() method returns the shape for parts of the scroll bar (background and foreground, applies to any mode).
Parameters:
Name Type Description
bHorizontal boolean A boolean expression that specifies the control's mode/orientation.
Returns:
Returns null or a list of parts separated by comma
Type
string

GetSmallChange() → {number}

The GetSmallChange() method specifies the amount by which the scroll box position changes when the user clicks a scroll arrow or presses an arrow key.
Returns:
Specifies the amount by which the scroll box position changes when the user clicks a scroll arrow or presses an arrow key.
Type
number

GetTfi() → {string|object}

The GetTfi() method gets the font attributes to apply on captions of the control.
Returns:
Returns the font attributes as a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

The result as a {string} can include any of the following keywords separated by space characters:

  • bold, displays the text in bold (equivalent of <b> tag)
  • italic, displays the text in italics (equivalent of <i> tag)
  • underline, underlines the text (equivalent of <u> tag)
  • strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
  • <fontName name>, specifies the font's family (equivalent of <font name> tag)
  • <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
  • <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
  • <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
  • <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
  • <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the string result that's not recognized as a keyword is interpreted as:

  • name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
  • size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

The result as {object} can include any of the following fields:

  • bold {boolean}, displays the text in bold (equivalent of <b> tag)
  • italic {boolean}, displays the text in italics (equivalent of <i> tag)
  • underline {boolean}, underlines the text (equivalent of <u> tag)
  • strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
  • fontName {string}, specifies the font's family (equivalent of <font name> tag)
  • fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
  • fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
  • bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
  • shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
    • color {string}, defines the color of the text's shadow (CSScolor)
    • width {number}, defines the size of the text's shadow
    • offset {number}, defines the offset to show the text's shadow relative to the text
  • outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
    • color {string}, defines the gradient-color (CSScolor)
    • mode {number}, defines the gradient mode as a value between 0 and 4
    • blend {number}, defines the gradient blend as a value between 0 and 1

CSSColor or CSS legal color values can be specified by the following methods:

  • Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
  • Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
  • RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
  • RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
  • HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
  • HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
  • Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.
Type
string | object

GetThumbSize() → {number}

The GetThumbSize() method indicates the size of the thumb within a scroll bar
Returns:
Indicates the size of the thumb within a scroll bar.
Type
number

GetValue() → {number}

The GetValue() method gets the scroll bar's value.
Returns:
Indicates the scroll bar's value.
Type
number

GetVisiblePart(bPart) → {boolean}

The GetVisiblePart() method indicates whether the giving part is visible or hidden
Parameters:
Name Type Description
bPart ScrollBar.PartEnum Specifies a part of the scroll-bar
Returns:
Returns true, if the giving part is visible, else flase.
Type
boolean

GetVisibleParts() → {string}

The GetVisibleParts() method returns visible parts of the scroll bar.
Returns:
Returns the list of parts being visible separated by comma The parts of the control are:
  • "l" (exLeftBPart, <) indicates the left or top button of the scroll bar
  • "l1" (exLeftB1Part) indicates the first additional button, in the left or top area
  • "l2" (exLeftB2Part) indicates the second additional button, in the left or top area
  • "l3" (exLeftB3Part) indicates the third additional button, in the left or top area
  • "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area
  • "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area
  • "t" (thumb), indicates the scroll's thumb
  • "r" (exRightBPart, >) indicates the right or down button
  • "r1" (exRightB1Part) indicates the first additional button in the right or down side
  • "r2" (exRightB2Part) indicates the second additional button in the right or down side
  • "r3" (exRightB3Part) indicates the third additional button in the right or down side
  • "r4" (exRightB4Part) indicates the forth additional button in the right or down side
  • "r5" (exRightB5Part) indicates the fifth additional button in the right or down side
  • "r6" (exRightB6Part) indicates sixth additional button in the right or down side
There are three additional parts (automatically computed) as:
  • "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb)
  • "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button)
  • "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
Any other literal between commas is ignored. If duplicate literals are found, the second is ignored, and so on.
Type
string

GetWheelChange() → {number}

The GetWheelChange() method specifies the amount by which the scroll box position changes when the user rolls the mouse wheel.
Returns:
Specifies the amount by which the scroll box position changes when the user rolls the mouse wheel.
Type
number

onChanging(oldValue, newValue) → {number}

The onChanging() method notifies your application that the scroll bar's value is about be changed oEvent.old to oEvent.new
Parameters:
Name Type Description
oldValue number Specifies the scroll bar's old value
newValue number Specifies the scroll bar's new value
Returns:
Returns the scroll bar's new value
Type
number

ResetRange()

The Reset() method resets the scroll bar's range.

Scroll(nAction, value) → {boolean}

The Scroll() method programatically scrolls the control. The Scroll() method performs smooth scrolling for actions like page up/down, home/end or exThumbPos.
Parameters:
Name Type Description
nAction ScrollBar.ActionEnum A ScrollBar.ActionEnum expression, that specifies the type of action the control should perform
value number Indicates one of the following:
  • the value to scroll to for exThumbPos or exThumbTrack action
  • the number of lines to scroll for exLineUp, exLineLeft, exLineDown or exLineRight action
  • ignored for exScrollHome or exScrollEnd
Returns:
Returns true, if the scroll bar's value has been changed
Type
boolean
Example
Scroll(exScrollEnd), scrolls to the end
 Scroll(exLineDown, 2), scrolls down two lines
 Scroll(exThumbPos, 100), scrolls to the position 100

SetAdjustThumbPos(value)

The SetAdjustThumbPos() method specifies whether the thumb's position is automatically shown on the scroll bar's value, while user drags the control's thumb.
Parameters:
Name Type Description
value boolean A boolean expression that specifies whether the thumb's position is automatically shown on the scroll bar's value, while user drags the control's thumb. false {boolean}, no adjustment for the thumb's position is performed while user drags it. Once the drag ends, the thumb is positioned at scroll's newly value. true {boolean}, thumb's position is automatically adjusted at exactly scroll's value, while user drags it

SetAllowKeys(allowKeys)

The SetAllowKeys() method defines whether the control changes its value/position on keys.
Parameters:
Name Type Description
allowKeys boolean A boolean expression that specifies whether the control changes its value/position on keys.
Example
null {null}, indicates that exontrol.Def.ScrollBar.allowKeys field defines the allowKeys property. By default, the exontrol.Def.ScrollBar.allowKeys is false, which indicates that no keys support
 false {boolean}, no keys support for the scroll bar
 true {boolean}, the scroll's value can be changed using keys such as: "ArrowLeft"/"ArrowUp", "ArrowRight"/"ArrowDown", "PageUp", "PageDown", "Home" and "End". The owner canvas element must include the "tabindex" attribute, else the scroll bar receives no key events at all. The tabindex global attribute indicates if its element can be focused, and if/where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).

SetAllowScrollDirect(allowScrollDirect)

The SetAllowScrollDirect() method specifies whether the control scrolls directly to the value from the cursor, while user right-clicks the control.
Parameters:
Name Type Description
allowScrollDirect number A number expression that specifies the button of the mouse to scroll directly. The allowScrollDirect property can be any of the following values:
  • 0, no button
  • 1, primary button (usually left)
  • 2, secondary button (usually right)
  • 4, auxilary button (usually middle or mouse wheel button)
  • 8, 4th button (typically the "Browser Back" button)
  • 16, 5th button (typically the "Browser Forward" button)

SetButtonSize(size)

The SetButtonSize() method changes the size to display the scroll bar's buttons.
Parameters:
Name Type Description
size number A number expression that specifies the size to display the scroll bar's buttons.
Example
null {null}, indicates that exontrol.Def.ScrollBar.buttonSize field defines the buttonSize property. By default, the exontrol.Def.ScrollBar.buttonSize is 16.
 0 {number}, the scroll displays no buttons
 18 {number}, defines the scroll's buttons to 18-pixels

SetCanvas(canvas, localCanvas)

The SetCanvas() method changes the control's canvas where it runs.
Parameters:
Name Type Description
canvas any A string that indicates the indetifier of the element within the document, or a HTMLCanvasElement reference
localCanvas boolean Specifies whether the canvas is used localy without requesting the canvas to handle the control itself.

SetCaptionPart(bPart, sCaption)

The SetCaptionPart() method changes part's caption.
Parameters:
Name Type Description
bPart ScrollBar.PartEnum Specifies a part of the scroll-bar
sCaption string Specifies caption to be assigned to the part. If null/missing/undefined the part's caption is removed

SetClientRect(client)

The SetClientRect() method defines a client area for the control.
Parameters:
Name Type Description
client any The client parameter indicates the control's client area as:
  • array of [x,y,width,height] type that specifies the control's client area
  • string, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
  • HTMLCanvasElement, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area

SetCursors(szCursors)

The SetCursors() method changes the mouse cursor to be displayed when pointing over a part of the control.
Parameters:
Name Type Description
szCursors string A string expression that specifies the list of parts of the scroll bars The format of cursors property is:
"cursor(part),cursor(part),..."
where:
  • "cursor", defines the CSS mouse cursor to display while cursor hovers the part
  • "part", defines the name of the part the cursor is applied on (as defined bellow)
The cursors property supports any of the following parts:
  • "l" (exLeftBPart, <) indicates the left or top button of the scroll bar
  • "l1" (exLeftB1Part) indicates the first additional button, in the left or top area
  • "l2" (exLeftB2Part) indicates the second additional button, in the left or top area
  • "l3" (exLeftB3Part) indicates the third additional button, in the left or top area
  • "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area
  • "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area
  • "t" (thumb), indicates the scroll's thumb
  • "r" (exRightBPart, >) indicates the right or down button
  • "r1" (exRightB1Part) indicates the first additional button in the right or down side
  • "r2" (exRightB2Part) indicates the second additional button in the right or down side
  • "r3" (exRightB3Part) indicates the third additional button in the right or down side
  • "r4" (exRightB4Part) indicates the forth additional button in the right or down side
  • "r5" (exRightB5Part) indicates the fifth additional button in the right or down side
  • "r6" (exRightB6Part) indicates sixth additional button in the right or down side
  • "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb)
  • "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button)
  • "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
Example
null {null}, indicates that the exontrol.Def.ScrollBar.cursors field defines the cursors property. By default, the exontrol.Def.ScrollBar.cursors is "auto(l1,l2,l3,l4,l5,l,lo,t,up,r,r1,r2,r3,r4,r5,r6)", or the "auto" mouse cursor is displayed for any part of the control
  "crosshair(lo,up,b),pointer(t)" {string}, indicates that the "crosshair" mouse cursor is shown once the cursor hovers the control "upper", "lower" or "background" part, and "pointer" mouse cursor while cursor hovers the "thumb" part

SetDisableNoScroll(value)

The SetDisableNoScroll() method disables/hides or enables/shows the parts of the scroll bar, when no scroll is possible.
Parameters:
Name Type Description
value ScrollBar.DisableNoScrollEnum Specifies whether the scroll bar's parts are enabled/shown or disabled/hidden, when no scroll is possible. The ScrollBar.DisableNoScrollEnum type supports the following values:
  • exHideNoScroll (0), specifies that the scroll bar is hidden if no scroll is possible (while it is hosted by an exontrol.W)
  • exDisableNoScroll (1), specifies that the scroll bar's buttons are disabled when no scroll is possible.
  • exShowNoScroll (2), specifies that the scroll bar is visible even no scroll is possible
Example
null {null}, indicates that exontrol.Def.ScrollBar.disableNoScroll field defines the disableNoScroll property. By default, the exontrol.Def.ScrollBar.disableNoScroll is ScrollBar.DisableNoScrollEnum.exDisableNoScroll
 2 or ScrollBar.DisableNoScrollEnum.exShowNoScroll {number}, specifies that the scroll bar is visible even no scroll is possible

SetEnableParts(szParts)

The SetEnableParts() method enables or disables parts of the scroll bar.
Parameters:
Name Type Description
szParts string A string expression that specifies the list of parts of the scroll bars to be enabled. The parts of the control are:
  • "l" (exLeftBPart, <) indicates the left or top button of the scroll bar
  • "l1" (exLeftB1Part) indicates the first additional button, in the left or top area
  • "l2" (exLeftB2Part) indicates the second additional button, in the left or top area
  • "l3" (exLeftB3Part) indicates the third additional button, in the left or top area
  • "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area
  • "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area
  • "t" (thumb), indicates the scroll's thumb
  • "r" (exRightBPart, >) indicates the right or down button
  • "r1" (exRightB1Part) indicates the first additional button in the right or down side
  • "r2" (exRightB2Part) indicates the second additional button in the right or down side
  • "r3" (exRightB3Part) indicates the third additional button in the right or down side
  • "r4" (exRightB4Part) indicates the forth additional button in the right or down side
  • "r5" (exRightB5Part) indicates the fifth additional button in the right or down side
  • "r6" (exRightB6Part) indicates sixth additional button in the right or down side
There are three additional parts (automatically computed) as:
  • "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb)
  • "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button)
  • "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
Any other literal between commas is ignored. If duplicate literals are found, the second is ignored, and so on.
Example
null {null}, specifies that the exontrol.Def.ScrollBar.enableParts field defines the enableParts property. By default, the exontrol.Def.ScrollBar.enableParts is "l,t,r,b", which indicates that only "left-button", "thumb", "right-button" and "background" parts are enabled
 "l,t,r" {string}, indicates that only "left-button", "thumb" and "right-button" parts are enabled. In other words, the "background" part is disabled which indicates the no page up or page down is available once the user clicks the upper or lower-background of the scroll

SetHorizonalOverlayShapes(szOverlayShapes)

The SetHorizonalOverlayShapes() method changes the shape for parts of the scroll bar (overlay and control's mode is horizontal).
Parameters:
Name Type Description
szOverlayShapes string A string expression that specifies the list of parts of the scroll bars The format of horizonalOverlayShapes property is:
"shape(part),shape(part),..."
where:
  • "shape", defines the name of the property of exontrol.Shapes.ScrollBar.overlay object to be applied on the part
  • "part", defines the name of the part the shape is applied on (as defined bellow)
The horizonalOverlayShapes property supports any of the following parts:
  • "l" (exLeftBPart, <) indicates the left or top button of the scroll bar
  • "l1" (exLeftB1Part) indicates the first additional button, in the left or top area
  • "l2" (exLeftB2Part) indicates the second additional button, in the left or top area
  • "l3" (exLeftB3Part) indicates the third additional button, in the left or top area
  • "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area
  • "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area
  • "t" (thumb), indicates the scroll's thumb
  • "r" (exRightBPart, >) indicates the right or down button
  • "r1" (exRightB1Part) indicates the first additional button in the right or down side
  • "r2" (exRightB2Part) indicates the second additional button in the right or down side
  • "r3" (exRightB3Part) indicates the third additional button in the right or down side
  • "r4" (exRightB4Part) indicates the forth additional button in the right or down side
  • "r5" (exRightB5Part) indicates the fifth additional button in the right or down side
  • "r6" (exRightB6Part) indicates sixth additional button in the right or down side
  • "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb)
  • "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button)
  • "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
Example
null {null}, specifies that the exontrol.Def.ScrollBar.horizonalOverlayShapes field defines the horizonalOverlayShapes property. By default, the exontrol.Def.ScrollBar.horizonalOverlayShapes is "leftLite(l),rightLite(r)".
 "left(l)" {string}, indicates that "l" (left-button) applies the overlay shape defined by exontrol.Shapes.ScrollBar.overlay.left
 "left(l),right(r)" {string}, defines arrows for scroll-rectangular or scroll-circle

SetHorizonalShapes(szShapes)

The SetHorizonalShapes() method changes the shape for parts of the scroll bar (background and foreground, applies to any mode).
Parameters:
Name Type Description
szShapes string A string expression that specifies the list of parts of the scroll bars The format of horizonalShapes property is:
"shape(part),shape(part),..."
where:
  • "shape", defines the name of the property of exontrol.Shapes.ScrollBar.background/exontrol.Shapes.ScrollBar.foreground object to be applied on the part
  • "part", defines the name of the part the shape is applied on (as defined bellow)
The horizonalShapes property supports any of the following parts:
  • "l" (exLeftBPart, <) indicates the left or top button of the scroll bar
  • "l1" (exLeftB1Part) indicates the first additional button, in the left or top area
  • "l2" (exLeftB2Part) indicates the second additional button, in the left or top area
  • "l3" (exLeftB3Part) indicates the third additional button, in the left or top area
  • "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area
  • "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area
  • "t" (thumb), indicates the scroll's thumb
  • "r" (exRightBPart, >) indicates the right or down button
  • "r1" (exRightB1Part) indicates the first additional button in the right or down side
  • "r2" (exRightB2Part) indicates the second additional button in the right or down side
  • "r3" (exRightB3Part) indicates the third additional button in the right or down side
  • "r4" (exRightB4Part) indicates the forth additional button in the right or down side
  • "r5" (exRightB5Part) indicates the fifth additional button in the right or down side
  • "r6" (exRightB6Part) indicates sixth additional button in the right or down side
  • "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb)
  • "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button)
  • "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
Example
null {null}, specifies that the exontrol.Def.ScrollBar.horizonalShapes field defines the horizonalShapes property. By default, the exontrol.Def.ScrollBar.horizonalShapes is "hThumbLite(t)".
 "hThumbLite(t)" {string}, defines a lite-scroll, or shotly it applies the exontrol.Shapes.ScrollBar.background.hThumbLite and exontrol.Shapes.ScrollBar.foreground.hThumbLite on "thumb" part
 "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumb(t),back(lo,b,up)" {string}, defines a rectangular-scroll
 "buttonCircle(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumbCircle(t),hBackCircle(b)" {string}, defines a circular-scroll
 "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6)" {string} indicates that all l1-r6 applies the exontrol.Shapes.ScrollBar.background.button and exontrol.Shapes.ScrollBar.foreground.button shapes.

SetIgnoreLargeChange(newVal)

The SetIgnoreLargeChange() method specifies whether the large change value is ignored when getting the maximum value.
Parameters:
Name Type Description
newVal boolean A boolean expression that specifies whether the large change value is ignored when getting the maximum value.
Example
null {null}, indicates that exontrol.Def.ScrollBar.ignoreLargeChange field defines the ignoreLargeChange property. By default, the exontrol.Def.ScrollBar.ignoreLargeChange is false.
 false {boolean}, specifies that the scroll's value goes from min to max 
 true {boolean}, specifies that the scroll's value goes from min to (max - page)

SetInfo(oInfo)

The SetInfo() method changes the scroll bar's range, page and position.
Parameters:
Name Type Description
oInfo object Specifies an object of {range,page,pos} type, that holds new scroll bar's range, page and/or position

SetLargeChange(newVal)

The SetLargeChange() method specifies the amount by which the scroll box position changes when the user clicks in the scroll bar or presses the PAGE UP or PAGE DOWN keys.
Parameters:
Name Type Description
newVal number Specifies the amount by which the scroll box position changes when the user clicks in the scroll bar or presses the PAGE UP or PAGE DOWN keys.
Example
null {null}, specifies that the exontrol.Def.ScrollBar.largeChange field defines the largeChange property. By default, the exontrol.Def.ScrollBar.largeChange is 10.
 0 {number}, no change once the user clicks the scroll's background or presses the PAGE UP or PAGE DOWN keys.
 10 {number}, increases or decreases the scroll's value  by 10 when the user clicks the scroll's background or presses the PAGE UP or PAGE DOWN keys.

SetLocked(value)

The SetLocked() method locks or unlocks the control.
Parameters:
Name Type Description
value boolean A boolean value that indicates whether the control is locked(protected) or unlocked
Example
false {boolean}, unlocks the control
  true {boolean}, locks the control (the user can not click or drag any part of the control)

SetMax(newVal)

The SetMax() method indicates the scroll bar's maximum value (equivalent method of SetMaxValue method).
Parameters:
Name Type Description
newVal number A number expression that specifies scroll bar's maximum value.
Example
100 {number}, indicates that the scroll's value is always less than 100

SetMaxValue(newVal) → {boolean}

The SetMaxValue() method indicates the scroll bar's maximum value.
Parameters:
Name Type Description
newVal number A number expression that specifies scroll bar's maximum value.
Returns:
Returns true, in case the scroll bar's value has been changed.
Type
boolean

SetMin(newVal) → {boolean}

The SetMin() method indicates the scroll bar's minimum value (equivalent method of SetMinValue method).
Parameters:
Name Type Description
newVal number A number expression that specifies scroll bar's minimum value.
Returns:
Returns true, in case the scroll bar's value has been changed.
Type
boolean
Example
0 {number}, indicates that the scroll's value is always greater than 0

SetMinValue(newVal) → {boolean}

The SetMinValue() method indicates the scroll bar's minimum value.
Parameters:
Name Type Description
newVal number A number expression that specifies scroll bar's minimum value.
Returns:
Returns true, in case the scroll bar's value has been changed.
Type
boolean

SetMode(mode)

The SetMode() method defines the mode the scroll bar displays its parts
Parameters:
Name Type Description
mode ScrollBar.ModeEnum A ScrollBar.ModeEnum expression that defines the mode the scroll bar displays its parts The ScrollBar.ModeEnum type supports the following values:
  • exAuto (-1), indicates that the size of the scroll bar determines what mode is displayed as: if the scroll bar's width is greater than its height, then a horizontal scroll is displayed, else a vertical scroll bar is shown
  • exVertical (0), indicates that the control displays a vertical scroll bar
  • exHorizontal (1), indicates that the control displays a horizontal scroll bar
Example
-1 or ScrollBar.ModeEnum.exAuto {number}, specifies that the scroll bar shows as vertical or horizontal depending on its size
 0 or ScrollBar.ModeEnum.exVertical {number}, always displays a vertical scroll bar
 1 or ScrollBar.ModeEnum.exHorizontal {number}, always displays a horizontal scroll bar

SetOptions(nOptions, bIncludeAll) → {boolean}

The SetOptions() method applies new options to the ScrollBar element
Parameters:
Name Type Description
nOptions object Specifies an object of ScrollBar.Options type that indicates the new options to apply
bIncludeAll boolean Indicates whether all fields of nOptions are included in the element's oOpts object
Returns:
Returns true, if there were options applied to the element
Type
boolean

SetOrderParts(szParts)

The SetOrderParts() method changes the order to display the parts of the scroll bar
Parameters:
Name Type Description
szParts string A string expression that specifies the list of parts of the scroll bars The parts of the control are:
  • "l" (exLeftBPart, <) indicates the left or top button of the scroll bar
  • "l1" (exLeftB1Part) indicates the first additional button, in the left or top area
  • "l2" (exLeftB2Part) indicates the second additional button, in the left or top area
  • "l3" (exLeftB3Part) indicates the third additional button, in the left or top area
  • "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area
  • "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area
  • "t" (thumb), indicates the scroll's thumb
  • "r" (exRightBPart, >) indicates the right or down button
  • "r1" (exRightB1Part) indicates the first additional button in the right or down side
  • "r2" (exRightB2Part) indicates the second additional button in the right or down side
  • "r3" (exRightB3Part) indicates the third additional button in the right or down side
  • "r4" (exRightB4Part) indicates the forth additional button in the right or down side
  • "r5" (exRightB5Part) indicates the fifth additional button in the right or down side
  • "r6" (exRightB6Part) indicates sixth additional button in the right or down side
There are three additional parts (automatically computed) as:
  • "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb)
  • "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button)
  • "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
Any other literal between commas is ignored. If duplicate literals are found, the second is ignored, and so on.
Example
null {null}, specifies that the exontrol.Def.ScrollBar.orderParts field defines the orderParts property. By default, the exontrol.Def.ScrollBar.orderParts is "l1,l2,l3,l4,l5,l,t,r,r1,r2,r3,r4,r5,r6"
 "t,l,r" {string}, indicates that the left/top and right/bottom buttons are displayed right/bottom after the thumb part

SetPage(newVal)

The SetPage() method specifies the amount by which the scroll box position changes when the user clicks in the scroll bar or presses the PAGE UP or PAGE DOWN keys ( equivalent of SetLargeChange() method ).
Parameters:
Name Type Description
newVal number Specifies the amount by which the scroll box position changes when the user clicks in the scroll bar or presses the PAGE UP or PAGE DOWN keys.

SetPos(newVal) → {boolean}

The SetPos() method indicates the scroll bar's position (0-based).
Parameters:
Name Type Description
newVal number A number expression that specifies scroll bar's position.
Returns:
Returns true, if the scroll bar's position has been changed
Type
boolean

SetRange(newVal)

The SetRange() method changes the range of the scroll bar's position (0-based)
Parameters:
Name Type Description
newVal number Specifies the range of the scroll bar's position (0-based)

SetScrollOnThumbRelease(value)

The SetScrollOnThumbRelease() method specifies whether the scroll occurs as soon as user releases the thumb-box.
Parameters:
Name Type Description
value boolean A boolean expression that indicates whether the scroll occurs as soon as user releases the thumb-box.

SetShapeParts(bHorizontal, szShapes)

The SetShapeParts() method changes the shape for parts of the scroll bar (background and foreground, applies to any mode).
Parameters:
Name Type Description
bHorizontal boolean A boolean expression that specifies the control's mode/orientation.
szShapes string A string expression that specifies the list of parts of the scroll bars

SetSmallChange(newVal)

The SetSmallChange() method specifies the amount by which the scroll box position changes when the user clicks a scroll arrow or presses an arrow key.
Parameters:
Name Type Description
newVal number Specifies the amount by which the scroll box position changes when the user clicks a scroll arrow or presses an arrow key.
Example
null {null}, specifes that the exontrol.Def.ScrollBar.smallChange field defines the smallChange property. By default, the exontrol.Def.ScrollBar.smallChange is 1.
 0 {number}, no change once the user clicks the left/top or right/bottom buttons
 1 {number}, increases or decreases the scroll's value  by 1 when the user clicks a scroll arrow or presses an arrow key

SetTfi(value)

The SetTfi() method sets the font attributes to apply on captions of the control.
Parameters:
Name Type Description
value string | object Indicates a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

The value as {string} supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:

  • bold, displays the text in bold (equivalent of <b> tag)
  • italic, displays the text in italics (equivalent of <i> tag)
  • underline, underlines the text (equivalent of <u> tag)
  • strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
  • <fontName name>, specifies the font's family (equivalent of <font name> tag)
  • <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
  • <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
  • <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
  • <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
  • <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the string value that's not recognized as a keyword is interpreted as:

  • name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
  • size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

The value as {object} supports any of the following fields:

  • bold {boolean}, displays the text in bold (equivalent of <b> tag)
  • italic {boolean}, displays the text in italics (equivalent of <i> tag)
  • underline {boolean}, underlines the text (equivalent of <u> tag)
  • strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
  • fontName {string}, specifies the font's family (equivalent of <font name> tag)
  • fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
  • fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
  • bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
  • shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
    • color {string}, defines the color of the text's shadow (CSScolor)
    • width {number}, defines the size of the text's shadow
    • offset {number}, defines the offset to show the text's shadow relative to the text
  • outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
    • color {string}, defines the gradient-color (CSScolor)
    • mode {number}, defines the gradient mode as a value between 0 and 4
    • blend {number}, defines the gradient blend as a value between 0 and 1

CSSColor or CSS legal color values can be specified by the following methods:

  • Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
  • Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
  • RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
  • RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
  • HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
  • HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
  • Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.
Example
null {null}, the tfi field is ignored
  "bold monospace 16 &lt;fg blue>" {string}, defines Monospace font of 16px height, bold and blue
  {bold: true, fontName: "monospace", fontSize: 16, fgColor: "blue"} {object}, defines Monospace font of 16px height, bold and blue

SetThumbSize(size)

The SetThumbSize() method changes the size to display the scroll bar's thumb.
Parameters:
Name Type Description
size number A number expression that specifies the size to display the scroll bar's thumb.
Example
null {null}, indicates that exontrol.Def.ScrollBar.thumbSize field defines the thumbSize property. By default, the exontrol.Def.ScrollBar.thumbSize is -1 (thumb's size automatically is computed based on scroll's margins (min, max and page))
 -1 {number}, indicates that the thumb's size automatically is computed based on scroll's margins (min, max and page)
 0 {number}, the scroll displays no thumb
 128 {number}, defines the scroll's thumb to 128-pixels

SetValue(newVal) → {boolean}

The SetValue() method sets the scroll bar's value.
Parameters:
Name Type Description
newVal number A number expression that specifies scroll bar's value. The range of value is:
  • between min and max, if the ignoreLargeChange property is true
  • between min and max - largeChange, if the ignoreLargeChange property is false
The newly value is always adjusted so it fits its range.
Returns:
Returns true, if the scroll bar's value has been changed
Type
boolean
Example
25 {number}, changes the scroll's value to 25. The "onchange" event occurs, once the scroll's value is changed.

SetVerticalOverlayShapes(szOverlayShapes)

The SetVerticalOverlayShapes() method changes the shape for parts of the scroll bar (overlay and control's mode is horizontal).
Parameters:
Name Type Description
szOverlayShapes string A string expression that specifies the list of parts of the scroll bars The format of verticalOverlayShapes property is:
"shape(part),shape(part),..."
where:
  • "shape", defines the name of the property of exontrol.Shapes.ScrollBar.overlay object to be applied on the part
  • "part", defines the name of the part the shape is applied on (as defined bellow)
The horizonalOverlayShapes property supports any of the following parts:
  • "l" (exLeftBPart, <) indicates the left or top button of the scroll bar
  • "l1" (exLeftB1Part) indicates the first additional button, in the left or top area
  • "l2" (exLeftB2Part) indicates the second additional button, in the left or top area
  • "l3" (exLeftB3Part) indicates the third additional button, in the left or top area
  • "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area
  • "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area
  • "t" (thumb), indicates the scroll's thumb
  • "r" (exRightBPart, >) indicates the right or down button
  • "r1" (exRightB1Part) indicates the first additional button in the right or down side
  • "r2" (exRightB2Part) indicates the second additional button in the right or down side
  • "r3" (exRightB3Part) indicates the third additional button in the right or down side
  • "r4" (exRightB4Part) indicates the forth additional button in the right or down side
  • "r5" (exRightB5Part) indicates the fifth additional button in the right or down side
  • "r6" (exRightB6Part) indicates sixth additional button in the right or down side
  • "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb)
  • "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button)
  • "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
Example
null {null}, specifies that the exontrol.Def.ScrollBar.verticalOverlayShapes field defines the verticalOverlayShapes property. By default, the exontrol.Def.ScrollBar.verticalOverlayShapes is "upLite(l),downLite(r)".
 "up(l)" {string}, indicates that l applies the overlay shape defined by exontrol.Shapes.ScrollBar.overlay.up
 "up(l),down(r)" {string}, defines arrows for scroll-rectangular or scroll-circle

SetVerticalShapes(szShapes)

The SetVerticalShapes() method changes the shape for parts of the scroll bar (background and foreground, applies to any mode).
Parameters:
Name Type Description
szShapes string A string expression that specifies the list of parts of the scroll bars The format of verticalShapes property is:
"shape(part),shape(part),..."
where:
  • "shape", defines the name of the property of exontrol.Shapes.ScrollBar.background/exontrol.Shapes.ScrollBar.foreground object to be applied on the part
  • "part", defines the name of the part the shape is applied on (as defined bellow)
The horizonalShapes property supports any of the following parts:
  • "l" (exLeftBPart, <) indicates the left or top button of the scroll bar
  • "l1" (exLeftB1Part) indicates the first additional button, in the left or top area
  • "l2" (exLeftB2Part) indicates the second additional button, in the left or top area
  • "l3" (exLeftB3Part) indicates the third additional button, in the left or top area
  • "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area
  • "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area
  • "t" (thumb), indicates the scroll's thumb
  • "r" (exRightBPart, >) indicates the right or down button
  • "r1" (exRightB1Part) indicates the first additional button in the right or down side
  • "r2" (exRightB2Part) indicates the second additional button in the right or down side
  • "r3" (exRightB3Part) indicates the third additional button in the right or down side
  • "r4" (exRightB4Part) indicates the forth additional button in the right or down side
  • "r5" (exRightB5Part) indicates the fifth additional button in the right or down side
  • "r6" (exRightB6Part) indicates sixth additional button in the right or down side
  • "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb)
  • "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button)
  • "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
Example
null {null}, specifies that the exontrol.Def.ScrollBar.verticalShapes field defines the verticalShapes property. By default, the exontrol.Def.ScrollBar.verticalShapes is "vThumbLite(t)".
 "vThumbLite(t)" {string}, defines a lite-scroll, or shotly it applies the exontrol.Shapes.ScrollBar.background.vThumbLite and exontrol.Shapes.ScrollBar.foreground.vThumbLite on "thumb" part
 "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumb(t),back(lo,b,up)" {string}, defines a rectangular-scroll
 "buttonCircle(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumbCircle(t),vBackCircle(b)" {string}, defines a circular-scroll
 "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6)" {string} indicates that all l1-r6 applies the exontrol.Shapes.ScrollBar.background.button and exontrol.Shapes.ScrollBar.foreground.button shapes.

SetVisiblePart(bPart, bVisible)

The SetVisiblePart() method shows or hides the specified part of the scroll bar
Parameters:
Name Type Description
bPart ScrollBar.PartEnum Specifies a part of the scroll-bar
bVisible boolean Indicates a boolean value that specifies whether the part should be shown or hidden.

SetVisibleParts(szParts)

The SetVisibleParts() method shows or hides parts of the scroll bar.
Parameters:
Name Type Description
szParts string A string expression that specifies the list of parts of the scroll bars to be visible. The parts of the control are:
  • "l" (exLeftBPart, <) indicates the left or top button of the scroll bar
  • "l1" (exLeftB1Part) indicates the first additional button, in the left or top area
  • "l2" (exLeftB2Part) indicates the second additional button, in the left or top area
  • "l3" (exLeftB3Part) indicates the third additional button, in the left or top area
  • "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area
  • "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area
  • "t" (thumb), indicates the scroll's thumb
  • "r" (exRightBPart, >) indicates the right or down button
  • "r1" (exRightB1Part) indicates the first additional button in the right or down side
  • "r2" (exRightB2Part) indicates the second additional button in the right or down side
  • "r3" (exRightB3Part) indicates the third additional button in the right or down side
  • "r4" (exRightB4Part) indicates the forth additional button in the right or down side
  • "r5" (exRightB5Part) indicates the fifth additional button in the right or down side
  • "r6" (exRightB6Part) indicates sixth additional button in the right or down side
There are three additional parts (automatically computed) as:
  • "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb)
  • "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button)
  • "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
Any other literal between commas is ignored. If duplicate literals are found, the second is ignored, and so on.
Example
null {null}, specifies that the exontrol.Def.ScrollBar.visibleParts field defines the visibleParts property. By default, the exontrol.Def.ScrollBar.visibleParts is "l,t,r,b", which indicates that only "left-button", "thumb", "right-button" and "background" parts are visible
 "t,b" {string}, indicates that only "thumb", "background" parts are visible

SetWheelChange(newVal)

The SetWheelChange() method specifies the amount by which the scroll box position changes when the user rolls the mouse wheel.
Parameters:
Name Type Description
newVal number Specifies the amount by which the scroll box position changes when the user rolls the mouse wheel. If 0 or negative, the scroll won't change its value while rotating the mouse wheel.
Example
null {null}, specifes that the exontrol.Def.ScrollBar.wheelChange field defines the smallChange property. By default, the exontrol.Def.ScrollBar.wheelChange is 1.
 0 {number}, no change while the user rotates the mouse wheel.
 1 {number}, increases or decreases the scroll's value by 1 when the user rotates the mouse wheel

Update(callback, thisArgopt)

The Update() method locks the control's paint during the callback, and invalidates the control once the method ends.
Parameters:
Name Type Attributes Description
callback callback Indicates a callback to perform changes within the control
thisArg any <optional>
 Specifies the value of "this" keyword during the callback. If missing/empty/undefined the thisArg points to the control itself, as an object of ScrollBar type

Events

onchange

The onchange() method notifies your application that the scroll bar's value has been changed.
Parameters:
Name Type Description
oEvent number inidcates the current scroll bar's value
Example
The following samples display the control's current position, as soon as it changes:

oScrollBar.onchange = function (oEvent)
{
 console.log(oEvent);
}

or

oScrollBar.Listeners.add("onchange", function (oEvent)
{
 console.log(oEvent);
})

where oScrollBar is an object of ScrollBar type

onchanging

The onchanging() method notifies your application that the scroll bar's value is about be changed oEvent.old to oEvent.new
Parameters:
Name Type Description
oEvent object Specifies the scroll bar's old and new value as an object of {old, new} type
Properties
Name Type Description
old number Specifies the scroll bar's old value
new number Specifies the scroll bar's new value
Example
The following samples display the old and new value of the control, as soon as it changes:

oScrollBar.onchanging = function (oEvent)
{
 console.log(oEvent);
}

or

oScrollBar.Listeners.add("onchanging", function (oEvent)
{
 console.log(oEvent);
})

where oScrollBar is an object of ScrollBar type

onclickingpart

The onclickingpart() event is fired continuously while the user keeps clicking the part of the control.
Parameters:
Name Type Description
oEvent ScrollBar.PartEnum Specifies the part of the control being clicked
Returns:
Returns true, to cancel the default action.
Type
boolean
Example
The following samples display the part of the scroll bar being cliked:

oScrollBar.onclickingpart = function (oEvent)
{
 console.log(oEvent);
}

or

oScrollBar.Listeners.add("onclickingpart", function (oEvent)
{
 console.log(oEvent);
})

where oScrollBar is an object of ScrollBar type

onclickpart

The onclickpart() event notifies your application that the user clicks a part of the control.
Parameters:
Name Type Description
oEvent ScrollBar.PartEnum Specifies the part of the control being clicked
Example
The following samples display the part of the scroll bar being cliked:

oScrollBar.onclickpart = function (oEvent)
{
 console.log(oEvent);
}

or

oScrollBar.Listeners.add("onclickpart", function (oEvent)
{
 console.log(oEvent);
})

where oScrollBar is an object of ScrollBar type