Skip to content
This repository
Newer
Older
100644 197 lines (187 sloc) 9.044 kb
614e9b49 »
2010-08-06 Initial work on adding optional animation to the scrollTo/ scrollBy m…
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5
6 <title>jScrollPane scrollTo/ scrollBy with animation demo page</title>
7
8 <!-- styles specific to demo site -->
9 <link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
10 <!-- styles needed by jScrollPane - include in your own sites -->
11 <link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
12
13 <style type="text/css" id="page-css">
14 /* Styles specific to this particular page */
15 .scroll-pane
16 {
3388090c »
2010-08-17 IE6 needs a specified width on the element jScrollPane is being appli…
17 width: 100%;
614e9b49 »
2010-08-06 Initial work on adding optional animation to the scrollTo/ scrollBy m…
18 height: 200px;
19 overflow: auto;
20 }
21
22 div#forms
23 {
24 overflow: hidden;
25
26 }
27
28 form
29 {
30 float: left;
31 width: 50%;
32 padding: 0 0 1em;
33 }
34 </style>
35
36 <!-- latest jQuery direct from google's CDN -->
fc92cf55 »
2012-09-27 Updated jQuery version on all demos…
37 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
614e9b49 »
2010-08-06 Initial work on adding optional animation to the scrollTo/ scrollBy m…
38 <!-- the mousewheel plugin -->
39 <script type="text/javascript" src="script/jquery.mousewheel.js"></script>
40 <!-- the jScrollPane script -->
ac4a6fb5 »
2010-08-06 Reworking the animation to animate the drags rather than the content …
41 <script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
614e9b49 »
2010-08-06 Initial work on adding optional animation to the scrollTo/ scrollBy m…
42 <!-- scripts specific to this demo site -->
43 <script type="text/javascript" src="script/demo.js"></script>
44
45 <script type="text/javascript" id="sourcecode">
46 $(function()
47 {
48 var pane = $('.scroll-pane');
49 pane.jScrollPane(
50 {
51 showArrows: true,
52 animateScroll: true
53 }
54 );
55 var api = pane.data('jsp');
56
57 $('#but-scroll-to').bind(
58 'click',
59 function()
60 {
61 // Note, there is also scrollToX and scrollToY methods if you only
62 // want to scroll in one dimension
63 api.scrollTo(parseInt($('#toX').val()), parseInt($('#toY').val()));
64 return false;
65 }
66 );
67
68 $('#but-scroll-by').bind(
69 'click',
70 function()
71 {
72 // Note, there is also scrollByX and scrollByY methods if you only
73 // want to scroll in one dimension
74 api.scrollBy(parseInt($('#byX').val()), parseInt($('#byY').val()));
75 return false;
76 }
77 );
78 });
79 </script>
80 </head>
81 <body>
c339c56e »
2010-08-11 Added navigation and logo to top of all pages...
82 <div id="top-nav">
83 <img src="image/logo.png" width="196" height="69" alt="jScrollPane">
84 <ul>
85 <li><a href="index.html">Home</a></li>
86 <li><a href="index.html#examples">Examples</a></li>
87 <li><a href="index.html#themes">Themes</a></li>
88 <li><a href="index.html#usage">How to use</a></li>
89 <li><a href="faqs.html">FAQs</a></li>
90 <li><a href="known_issues.html">Known issues</a></li>
91 <li><a href="index.html#support">Support</a></li>
92 <li><a href="index.html#download">Download</a></li>
93 </ul>
94 </div>
614e9b49 »
2010-08-06 Initial work on adding optional animation to the scrollTo/ scrollBy m…
95 <div id="container">
96 <h1>jScrollPane - scrollTo/ scrollBy with animation page</h1>
97 <p>
98 This example extends the basic <a href="scroll_to.html">scrollTo/ scrollBy</a> demo and passes
ed40602c »
2010-08-17 Added extra documentation and examples to the site...
99 <strong><a href="settings.html#animateScroll">animateScroll</a>: true</strong> in the settings.
100 This means that when you call <a href="api.html#scrollTo">scrollTo</a> or <a href="api.html#scrollBy">
101 scrollBy</a> the transition to the new state is animated.
614e9b49 »
2010-08-06 Initial work on adding optional animation to the scrollTo/ scrollBy m…
102 </p>
103 <p>
ed40602c »
2010-08-17 Added extra documentation and examples to the site...
104 Note that the <a href="api.html#animate">animate</a> function which is called is a property on the
105 jScrollPane API method. This means that you are free to overwrite it if you want to implement custom
106 animation settings for your paricular use case. If you just want to tweak the speed and easing of the
107 default animation then you can use the <a href="settings.html#animateDuration">animateDuration</a> and
108 <a href="settings.html#animateEase">animateEase</a> settings properties.
614e9b49 »
2010-08-06 Initial work on adding optional animation to the scrollTo/ scrollBy m…
109 </p>
110 <div id="forms">
111 <form>
112 <fieldset>
113 <legend>scrollTo functionality</legend>
114 <label for="toX">To x:</label>
115 <input type="text" id="toX" name="toX" value="0" />
116 <label for="toY">To y:</label>
117 <input type="text" id="toY" name="toY" value="0" />
118 <input type="submit" id="but-scroll-to" value="Scroll to" />
119 </fieldset>
120 </form>
121 <form>
122 <fieldset>
123 <legend>scrollBy functionality</legend>
124 <label for="byX">By x:</label>
125 <input type="text" id="byX" name="byX" value="0" />
126 <label for="byY">By y:</label>
127 <input type="text" id="byY" name="byY" value="0" />
128 <input type="submit" id="but-scroll-by" value="Scroll by" />
129 </fieldset>
130 </form>
131 </div>
132 <div class="scroll-pane">
133 <p>
134 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
135 eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
136 mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
137 consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
138 bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
139 semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
140 mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
141 quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
142 eu lacus semper viverra.
143 </p>
144 <p style="width: 900px;">
145 Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
146 lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
147 faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
148 Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
149 tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
150 Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
151 est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
152 volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
153 libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
154 sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
155 pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
156 habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
157 </p>
158 <p>
159 Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
160 eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
161 dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
162 amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
163 est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
164 dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
165 varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
166 feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
167 congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
168 id mollis nisi. Donec fermentum vehicula porta.
169 </p>
170 <p>
171 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
172 Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
173 sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
174 Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
175 commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
176 ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
177 Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
178 eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
179 luctus, metus
180 </p>
181 <p>
182 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
183 Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
184 amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
185 </p>
186 </div>
187 <h2>Page javascript</h2>
188 <div id="sourcecode-display">
189 <p>The contents of this div will be replaced by the javascript added to this page</p>
190 </div>
191 <h2>Page CSS</h2>
192 <div id="css-display">
193 <p>The contents of this div will be replaced by the CSS added to this page</p>
194 </div>
195 </div>
196 </body>
197 </html>
Something went wrong with that request. Please try again.