Properties

Name Type Default
animationDuration Number 30

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');
Try it: animationDuration is set to 3000
bounceEnabled Boolean true

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');
Try it: bounceEnabled is set to false
buttonsOffset Array [0, 0]

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');
Try it: buttonsOffset is set to [0,0]
currentPage Number 0

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');
Try it: currentPage is set to 1
disabled Boolean false

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');
Try it: disabled is set to true
height String 320

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');
Try it: height is set to 250
moveThreshold Number 0.5

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');
Try it: moveThreshold is set to 1
showButtons Boolean true

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');
Try it: showButtons is set to false
slideShow Boolean true

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');
Try it: slideShow is set to false
slideDuration Number 3000

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');
Try it: slideDuration is set to 300
theme String ''

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.
Try it: theme is set to 'energyblue'
width String 320

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');
Try it: width is set to 300

Events

pageChanged Event

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;
});
                        
Try it: Bind to the pageChanged event by type: jqxScrollView.

Methods

back Method

Navigates to the previous page.

Parameter Type Description
None
Return Value
None

Code example

Invoke the back method.

$("#jqxScrollView").jqxScrollView('back'); 
Try it: invoke the back method of the jqxScrollView.
changePage Method

Navigates to a page.

Parameter Type Description
index Number
Return Value
None

Code example

Invoke the changePage method.

$("#jqxScrollView").jqxScrollView('changePage', 0); 
Try it: change the page in the jqxScrollView.
forward Method

Navigates to the next page.

Parameter Type Description
None
Return Value
None

Code example

Invoke the forward method.

$("#jqxScrollView").jqxScrollView('forward'); 
Try it: invoke the forward method of the jqxScrollView.
refresh Method

Refreshes the widget.

Parameter Type Description
None
Return Value
None

Code example

Invoke the refresh method.

$("#jqxScrollView").jqxScrollView('refresh'); 
Try it: refresh the jqxScrollView.

jQWidgets
  • Facebook
  • Twitter
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2025. All Rights Reserved.