Sets or gets height of the scroll bar.

Code examples

Set the height property.

$('#jqxScrollBar').jqxScrollBar({ height: '25px', }); 

Get the height property.

var height = $('#jqxScrollBar').jqxScrollBar('height');

Sets or gets width of the scroll bar.

Code examples

Set the width property.

$('#jqxScrollBar').jqxScrollBar({ width: '250px' }); 

Get the width property.

var width = $('#jqxScrollBar').jqxScrollBar('width');

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#jqxScrollBar').jqxScrollBar({rtl : true}); 

Get the rtl property.

var rtl = $('#jqxScrollBar').jqxScrollBar('rtl'); 

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
  
  

• Set the widget's theme property to 'energyblue' when you initialize it.

Sets or gets the scrollbar's orientation.

Code examples

Set the vertical property.

$('#jqxScrollBar').jqxScrollBar({ vertical: true }); 

Get the vertical property.

var vertical = $('#jqxScrollBar').jqxScrollBar('vertical'); 

Sets or gets the scrollbar's minimum value.

Code examples

Set the min property.

$('#jqxScrollBar').jqxScrollBar({ min:7 }); 

Get the min property.

var min = $('#jqxScrollBar').jqxScrollBar('min'); 

Sets or gets the scrollbar's maximum value.

Code examples

Set the max property.

$('#jqxScrollBar').jqxScrollBar({ max:700 }); 

Get the max property.

var max = $('#jqxScrollBar').jqxScrollBar('max'); 

Sets or gets the scrollbar's value.

Code examples

Set the value property.

$('#jqxScrollBar').jqxScrollBar({ value:700 }); 

Get the value property.

var value = $('#jqxScrollBar').jqxScrollBar('value'); 

Sets or gets the scrollbar's step. The value is increased/decreased with this step when the user presses a scrollbar button.

Code examples

Set the step property.

$('#jqxScrollBar').jqxScrollBar({ step:7 }); 

Get the step property.

var step = $('#jqxScrollBar').jqxScrollBar('step'); 

Sets or gets the scrollbar's largestep. The value is increased/decreased with this largestep when the user presses the left mouse button in the area between a scrollbar button and thumb.

Code examples

Set the largestep property.

$('#jqxScrollBar').jqxScrollBar({ largestep:35 }); 

Get the largestep property.

var largestep = $('#jqxScrollBar').jqxScrollBar('largestep'); 

Specifies the scrollbar thumb's minimum size.

Code examples

Set the thumbMinSize property.

$('#jqxScrollBar').jqxScrollBar({ thumbMinSize:5 });

Get the thumbMinSize property.

var thumbMinSize = $('#jqxScrollBar').jqxScrollBar('thumbMinSize'); 

Sets or gets whether the scrollbar displays the increase and decrease arrow buttons.

Code examples

Set the showButtons property.

$('#jqxScrollBar').jqxScrollBar({ showButtons: true });

Get the showButtons property.

var showButtons = $('#jqxScrollBar').jqxScrollBar('showButtons'); 

Sets or gets whether the scrollbar is disabled.

Code examples

Set the disabled property.

$('#jqxScrollBar').jqxScrollBar({ disabled:true });

Get the disabled property.

var disabled = $('#jqxScrollBar').jqxScrollBar('disabled'); 

This event is triggered when the value is changed.

Code examples

Bind to the valuechanged event by type: jqxScrollBar.

$('#jqxScrollBar').on('valuechanged', function (event) 
{
    var currentValue = event.currentValue; 
    var previousValue = event.previousValue;
});

Sets the thumb's position

Code examples

Invoke the setPosition method.

//@param Number

$('#jqxScrollBar').jqxScrollBar('setPosition', 50); 

Returns true, if the user is scrolling. Otherwise, returns false.

Code examples

Invoke the isScrolling method.

var scrolling = $('#jqxScrollBar').jqxScrollBar('isScrolling'); 

Destroys the widget.

Code examples

Invoke the destroy method.

$('#jqxScrollBar').jqxScrollBar('destroy');