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 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');

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 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 jqxScrollView's disabled property.

Code example

Set the disabled property.

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

Get the disabled property.

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

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 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 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');

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');

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 width.

Code example

Set the width property.

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

Get the width property.

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

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;
});
 

Navigates to the previous page.

Code example

Invoke the back method.

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

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'); 

Refreshes the widget.

Code example

Invoke the refresh method.

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