Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
122 lines (101 sloc) 3.11 KB
<%-- :mode=jsp: --%>
<link rel="stylesheet" type="text/css" href="${cdn}${jqt}/css/scrollable-horizontal.css" />
<link rel="stylesheet" type="text/css" href="${cdn}${jqt}/css/scrollable-buttons.css" />
<h1 style="background-image:url(../img/hero/scrollable.jpg)">
jQuery Tools / Scrollable - New Wave UI design
</h1>
<h2 class="first">Autoscroll plugin</h2>
<p>
The Autoscroll plugin provides an automatic scrolling capability. It advances to the next items in pre-configured intervals. Here is the autoscroll plugin in action:
</p>
<div style="margin:20px -15px">
<%@ include file="../demos/scrollable/plugins/autoscroll.htm" %>
</div>
<p>
You can configure the number of items being scrolled and the interval of the scrolls. When navigational elements are mouseovered the automatic scrolling is paused.
</p>
<a name="autoscroll_usage"></a>
<h3>Usage</h3>
<p>
Here is the JavaScript setup for the example above:
</p>
<pii:code>
$("#scroller").scrollable({circular: true}).autoscroll({ autoplay: false });
</pii:code>
<a name="autoscroll_configuration"></a>
<h3>Configuration</h3>
<p>
Here is a full list of available configuration options:
</p>
<table class="listing">
<thead>
<tr>
<th>property</th>
<th>default</th>
<th>description</th>
</tr>
</thead>
<tr>
<td class="code">steps</td>
<td><code>1</code></td>
<td>
The number of pages being scrolled within a single autoscroll.
</td>
</tr>
<tr>
<td class="code">interval</td>
<td><code>1000</code></td>
<td>
The time (in milliseconds) between autoscrolls. If this is the only configuration variable for this plugin you can specify the interval value directly for the plugin. For example: <samp>$("#scroller").scrollable().autoscroll(2000);</samp>
</td>
</tr>
<tr>
<td class="code">autoplay</td>
<td><code>true</code></td>
<td>
When enabled the scrolling starts automatically upon page load. If this is set to <samp>false</samp>, the autoscroll can be started by using the <samp>play()</samp> method (see below).
</td>
</tr>
<tr>
<td class="code">autopause</td>
<td><code>true</code></td>
<td>
If this property is set to <samp>true</samp> then, when any navigational buttons are mouseovered, the autoscrolling will pause.
</td>
</tr>
</table>
<a name="autoscroll_api"></a>
<h3>JavaScript API</h3>
<p>
The following methods are <strong>added</strong> to the main <a href="index.html#api">JavaScript API</a> of the scrollable and they are ready to be used after the plugin has been installed.
</p>
<table class="listing">
<thead>
<tr>
<th>method</th>
<th nowrap>return value</th>
<th>description/example</th>
</tr>
</thead>
<tr>
<td class="code">play</td>
<td><code>API</code></td>
<td>
Begins a playable autoscroll.
</td>
</tr>
<tr>
<td class="code">pause</td>
<td><code>API</code></td>
<td>
Pauses the autoscroll and it will resume when the mouse has moved away from the navigational buttons.
</td>
</tr>
<tr>
<td class="code">stop</td>
<td><code>API</code></td>
<td>
Stops the autoscroll. Autoscroll can only be resumed by calling the <samp>play()</samp> method.
</td>
</tr>
</table>
Something went wrong with that request. Please try again.