Sets or gets the jqxScrollView's width.

Code example

Set the width property.

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

Get the width property.

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

Sets or gets the jqxScrollView's height.

Code example

Set the height property.

$("#jqxScrollView").jqxScrollView({ height: '250px' }); 

Get the height property.

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

Sets or gets the jqxScrollView's disabled property.

Code example

Set the disabled property.

$("#jqxScrollView").jqxScrollView({ disabled: true }); 

Get the disabled property.

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

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 jqxScrollView's buttonsOffset property. This property sets the offset from the default location of the navigation buttons.

Code example

Set the buttonsOffset property.

$("#jqxScrollView").jqxScrollView({ buttonsOffset: [30, 30] }); 

Get the buttonsOffset property.

var buttonsOffset = $('#jqxScrollView').jqxScrollView('buttonsOffset');

Sets or gets the jqxScrollView's moveThreshold property. The moveThreshold property specifies how much the user should drag the current element to navigate to next/previous element. Values should be set from 0.1 to 1. 0.5 means 50% of the element's width.

Code example

Set the moveThreshold property.

$("#jqxScrollView").jqxScrollView({ moveThreshold: 0.6 }); 

Get the moveThreshold property.

var moveThreshold = $('#jqxScrollView').jqxScrollView('moveThreshold');

Sets or gets the jqxScrollView's currentPage property. The currentPage specifies the displayed element.

Code example

Set the currentPage property.

$("#jqxScrollView").jqxScrollView({ currentPage: 1 }); 

Get the currentPage property.

var currentPage = $('#jqxScrollView').jqxScrollView('currentPage');

Sets or gets the animationDuration property. Specifies the duration of the animation which starts when the current page is changed.

Code example

Set the animationDuration property.

$("#jqxScrollView").jqxScrollView({ animationDuration: 500}); 

Get the animationDuration property.

var animationDuration = $('#jqxScrollView').jqxScrollView('animationDuration');

Sets or gets whether the navigation buttons are visible.

Code example

Set the showButtons property specified.

$("#jqxScrollView").jqxScrollView({ showButtons: false }); 

Get the showButtons property.

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

Sets or gets whether the bounce effect is enabled when pages are changed.

Code example

Set the bounceEnabled property.

$("#jqxScrollView").jqxScrollView({bounceEnabled: false});

Get the bounceEnabled property.

var bounceEnabled = $('#jqxScrollView').jqxScrollView('bounceEnabled');

Indicates whether the slideShow mode is enabled. In this mode, pages are changed automatically in a time interval.

Code example

Set the slideShow property.

$("#jqxScrollView").jqxScrollView({slideShow: true});

Get the slideShow property.

var slideShow = $('#jqxScrollView').jqxScrollView('slideShow');

Sets or gets the duration in milliseconds of a time interval. The current page is changed when the time interval is elapsed.

Code example

Set the slideDuration property.

$("#jqxScrollView").jqxScrollView({slideDuration: 4000});

Get the slideDuration property.

var slideDuration = $('#jqxScrollView').jqxScrollView('slideDuration');

This event is triggered when the current page is changed.

Code examples

Bind to the pageChanged event by type: jqxScrollView.

$('#jqxScrollView').bind('pageChanged', function (event) 
{
    var page = event.args.currentPage;
});
                        

Refreshes the widget.

Code example

Invoke the refresh method.

$("#jqxScrollView").jqxScrollView('refresh'); 

Navigates to a page.

Code example

Invoke the changePage method.

$("#jqxScrollView").jqxScrollView('changePage', 0); 

Navigates to the next page.

Code example

Invoke the forward method.

$("#jqxScrollView").jqxScrollView('forward'); 

Navigates to the previous page.

Code example

Invoke the back method.

$("#jqxScrollView").jqxScrollView('back');