Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

file 190 lines (187 sloc) 9.103 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>jScrollPane - API documentation</title>

<!-- styles specific to demo site -->
<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />

<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<!-- scripts specific to this demo site -->
<script type="text/javascript" src="script/demo.js"></script>
</head>
<body>
<div id="top-nav">
<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html#examples">Examples</a></li>
<li><a href="index.html#themes">Themes</a></li>
<li><a href="index.html#usage">How to use</a></li>
<li><a href="faqs.html">FAQs</a></li>
<li><a href="known_issues.html">Known issues</a></li>
<li><a href="index.html#support">Support</a></li>
<li><a href="index.html#download">Download</a></li>
</ul>
</div>
<div id="container">
<h1>jScrollPane - API documentation</h1>
<p>
This page shows how you can use the jScrollPane API (in addition to the <a href="settings.html">
settings object</a> and the <a href="events.html">events</a> which are dispatched) to update your
jScrollPane after it's has been initially created.
</p>
<p>
To get a reference to the API for a particular scrollpane you will need to access the 'jsp' variable in
the <em>data</em> of the element you applied jScrollPane to. e.g.
</p>
<pre>var element = $('#my-element').jScrollPane({/* ...settings... */});
var api = element.data('jsp');</pre>
<p>
Once you have a reference to the API you can call any of the following methods on it:
</p>
<h2 id="reinitialise">reinitialise(s)</h2>
<p>
Reinitialises the scroll pane (if it's internal dimensions have changed since the last time it
was initialised). The settings object which is passed in will override any settings from the
previous time it was initialised - if you don't pass any settings then the ones from the previous
initialisation will be used.
</p>
<h2 id="scrollToElement">scrollToElement(ele, stickToTop, animate)</h2>
<p>
Scrolls the specified element (a jQuery object, DOM node or jQuery selector string) into view so
that it can be seen within the viewport. If stickToTop is true then the element will appear at
the top of the viewport, if it is false then the viewport will scroll as little as possible to
show the element. You can also specify if you want animation to occur. If you don't provide this
argument then the animateScroll value from the settings object is used instead.
</p>
<h2 id="scrollTo">scrollTo(destX, destY, animate)</h2>
<p>
Scrolls the pane so that the specified co-ordinates within the content are at the top left
of the viewport. animate is optional and if not passed then the value of animateScroll from
the settings object this jScrollPane was initialised with is used.
</p>
<h2 id="scrollToX">scrollToX(destX, animate)</h2>
<p>
Scrolls the pane so that the specified co-ordinate within the content is at the left of the
viewport. animate is optional and if not passed then the value of animateScroll from the settings
object this jScrollPane was initialised with is used.
</p>
<h2 id="scrollToY">scrollToY(destY, animate)</h2>
<p>
Scrolls the pane so that the specified co-ordinate within the content is at the top of the
viewport. animate is optional and if not passed then the value of animateScroll from the settings
object this jScrollPane was initialised with is used.
</p>
<h2 id="scrollToPercentX">scrollToPercentX(destPercentX, animate)</h2>
<p>
Scrolls the pane to the specified percentage of its maximum horizontal scroll position. animate
is optional and if not passed then the value of animateScroll from the settings object this
jScrollPane was initialised with is used.
</p>
<h2 id="scrollToPercentY">scrollToPercentY(destPercentY, animate)</h2>
<p>
Scrolls the pane to the specified percentage of its maximum vertical scroll position. animate
is optional and if not passed then the value of animateScroll from the settings object this
jScrollPane was initialised with is used.
</p>
<h2 id="scrollBy">scrollBy(deltaX, deltaY, animate)</h2>
<p>
Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
the value of animateScroll from the settings object this jScrollPane was initialised with is used.
</p>
<h2 id="scrollByX">scrollByX(deltaX, animate)</h2>
<p>
Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
the value of animateScroll from the settings object this jScrollPane was initialised with is used.
</p>
<h2 id="scrollByY">scrollByY(deltaY, animate)</h2>
<p>
Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
the value of animateScroll from the settings object this jScrollPane was initialised with is used.
</p>
<h2 id="positionDragX">positionDragX(x, animate)</h2>
<p>
Positions the horizontal drag at the specified x position (and updates the viewport to reflect
this). animate is optional and if not passed then the value of animateScroll from the settings
object this jScrollPane was initialised with is used.
</p>
<h2 id="positionDragY">positionDragY(y, animate)</h2>
<p>
Positions the vertical drag at the specified y position (and updates the viewport to reflect
this). animate is optional and if not passed then the value of animateScroll from the settings
object this jScrollPane was initialised with is used.
</p>
<h2 id="animate">animate(ele, prop, value, stepCallback)</h2>
<p>
This method is called when jScrollPane is trying to animate to a new position. You can override
it if you want to provide advanced animation functionality. It is passed the following arguments:
</p>
<ul class="link-list">
<li><strong>ele</strong> - the element whose position is being animated</li>
<li><strong>prop</strong> - the property that is being animated</li>
<li><strong>value</strong> - the value it's being animated to</li>
<li><strong>stepCallback</strong> - a function that you must execute each time you update the value of the property</li>
</ul>
<p>
You can use the default implementation (see <a href="script/jquery.jscrollpane.js">sourcecode</a>) as a
starting point for your own implementation.
</p>
<h2 id="getContentPositionX">getContentPositionX()</h2>
<p>
Returns the current x position of the viewport with regards to the content pane.
</p>
<h2 id="getContentPositionY">getContentPositionY()</h2>
<p>
Returns the current y position of the viewport with regards to the content pane.
</p>
<h2 id="getContentWidth">getContentWidth()</h2>
<p>
Returns the width of the content within the scroll pane.
</p>
<h2 id="getContentHeight">getContentHeight()</h2>
<p>
Returns the height of the content within the scroll pane.
</p>
<h2 id="getIsScrollableH">getIsScrollableH()</h2>
<p>
Returns whether or not this scrollpane has a horizontal scrollbar.
</p>
<h2 id="getPercentScrolledX">getPercentScrolledX()</h2>
<p>
Returns the horizontal position of the viewport within the pane content.
</p>
<h2 id="getPercentScrolledY">getPercentScrolledY()</h2>
<p>
Returns the vertical position of the viewport within the pane content.
</p>
<h2 id="getIsScrollableV">getIsScrollableV()</h2>
<p>
Returns whether or not this scrollpane has a vertical scrollbar.
</p>
<h2 id="getContentPane">getContentPane()</h2>
<p>
Gets a reference to the content pane. It is important that you use this method if you want to
edit the content of your jScrollPane as if you access the element directly then you may have some
problems (as your original element has had additional elements for the scrollbars etc added into
it).
</p>
<h2 id="scrollToBottom">scrollToBottom(animate)</h2>
<p>
Scrolls this jScrollPane down as far as it can currently scroll. If animate isn't passed then the
animateScroll value from settings is used instead.
</p>
<h2 id="hijackInternalLinks">hijackInternalLinks()</h2>
<p>
Hijacks the links on the page which link to content inside the scrollpane. If you have changed
the content of your page (e.g. via AJAX) and want to make sure any new anchor links to the
contents of your scroll pane will work then call this function.
</p>
<h2 id="destroy">destroy()</h2>
<p>
Destroys the jScrollPane on the instance matching this API object and restores the browser's
default behaviour. <a href="destroy.html">Example</a>.
</p>
</div>
</body>
</html>
Something went wrong with that request. Please try again.