Home Explore Help
Sign In
bachir
/
performance-art.fr
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 072ea7de50
Branches Tags
performance-...
/
sites
/
all
/
themes
/
gui
/
perfarttimeline
/
js
/
libs
/
vitch-jScrollPane-b5be559
/
arrow_positions.html

arrow_positions.html 42 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    2. 

  2. 		"http://www.w3.org/TR/html4/loose.dtd">
    3. 

  3. <html>
    4. 

  4. 	<head>
    5. 

  5. 

  6. 		<title>jScrollPane arrow positioning example</title>
    7. 

  7. 

  8. 		<!-- styles specific to demo site -->
    9. 

  9. 		<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
    10. 

  10. 		<!-- styles needed by jScrollPane - include in your own sites -->
    11. 

  11. 		<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
    12. 

  12. 

  13. 		<style type="text/css" id="page-css">
    14. 

  14. 			/* Styles specific to this particular page */
    15. 

  15. 			.scroll-pane-before,
    16. 

  16. 			.scroll-pane-after,
    17. 

  17. 			.scroll-pane-split,
    18. 

  18. 			.scroll-pane-os
    19. 

  19. 			{
    20. 

  20. 				width: 100%;
    21. 

  21. 				height: 200px;
    22. 

  22. 				overflow: auto;
    23. 

  23. 			}
    24. 

  24. 			.horizontal-only
    25. 

  25. 			{
    26. 

  26. 				height: auto;
    27. 

  27. 				max-height: 200px;
    28. 

  28. 			}
    29. 

  29. 		</style>
    30. 

  30. 

  31. 		<!-- latest jQuery direct from google's CDN -->
    32. 

  32. 		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    33. 

  33. 		<!-- the mousewheel plugin -->
    34. 

  34. 		<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
    35. 

  35. 		<!-- the jScrollPane script -->
    36. 

  36. 		<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
    37. 

  37. 		<!-- scripts specific to this demo site -->
    38. 

  38. 		<script type="text/javascript" src="script/demo.js"></script>
    39. 

  39. 

  40. 		<script type="text/javascript" id="sourcecode">
    41. 

  41. 			$(function()
    42. 

  42. 			{
    43. 

  43. 				$('.scroll-pane-before').jScrollPane(
    44. 

  44. 					{
    45. 

  45. 						showArrows: true,
    46. 

  46. 						verticalArrowPositions: 'before',
    47. 

  47. 						horizontalArrowPositions: 'before'
    48. 

  48. 					}
    49. 

  49. 				);
    50. 

  50. 				$('.scroll-pane-after').jScrollPane(
    51. 

  51. 					{
    52. 

  52. 						showArrows: true,
    53. 

  53. 						verticalArrowPositions: 'after',
    54. 

  54. 						horizontalArrowPositions: 'after'
    55. 

  55. 					}
    56. 

  56. 				);
    57. 

  57. 				$('.scroll-pane-os').jScrollPane(
    58. 

  58. 					{
    59. 

  59. 						showArrows: true,
    60. 

  60. 						verticalArrowPositions: 'os',
    61. 

  61. 						horizontalArrowPositions: 'os'
    62. 

  62. 					}
    63. 

  63. 				);
    64. 

  64. 				$('.scroll-pane-split').jScrollPane(
    65. 

  65. 					{
    66. 

  66. 						showArrows: true,
    67. 

  67. 						verticalArrowPositions: 'split',
    68. 

  68. 						horizontalArrowPositions: 'split'
    69. 

  69. 					}
    70. 

  70. 				);
    71. 

  71. 			});
    72. 

  72. 		</script>
    73. 

  73. 	</head>
    74. 

  74. 	<body>
    75. 

  75. 		<div id="top-nav">
    76. 

  76. 			<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
    77. 

  77. 			<ul>
    78. 

  78. 				<li><a href="index.html">Home</a></li>
    79. 

  79. 				<li><a href="index.html#examples">Examples</a></li>
    80. 

  80. 				<li><a href="index.html#themes">Themes</a></li>
    81. 

  81. 				<li><a href="index.html#usage">How to use</a></li>
    82. 

  82. 				<li><a href="faqs.html">FAQs</a></li>
    83. 

  83. 				<li><a href="known_issues.html">Known issues</a></li>
    84. 

  84. 				<li><a href="index.html#support">Support</a></li>
    85. 

  85. 				<li><a href="index.html#download">Download</a></li>
    86. 

  86. 			</ul>
    87. 

  87. 		</div>
    88. 

  88. 		<div id="container">
    89. 

  89. 			<h1>jScrollPane - example showing options for arrow positioning</h1>
    90. 

  90. 			<p>
    91. 

  91. 				This demonstration builds on the <a href="arrows.html">basic arrows scrollpane example</a> and
    92. 

  92. 				demonstrates the different possible settings for <a href="settings.html#verticalArrowPositions">
    93. 

  93. 				verticalArrowPositions</a> and <a href="settings.html#horizontalArrowPositions">horizontalArrowPositions
    94. 

  94. 				</a>. These settings allow you to choose where the arrows appear relative to the tracks and each of the
    95. 

  95. 				settings has four valid values:
    96. 

  96. 			</p>
    97. 

  97. 			<ul class="link-list">
    98. 

  98. 				<li>
    99. 

  99. 					<strong>split</strong> - First arrow will appear before track, second arrow afterwards (the default)
    100. 

  100. 				</li>
    101. 

  101. 				<li>
    102. 

  102. 					<strong>before</strong> - Both arrows will appear before the track.
    103. 

  103. 				</li>
    104. 

  104. 				<li>
    105. 

  105. 					<strong>after</strong> - Both arrows will appear after the track (as is default on OSX).
    106. 

  106. 				</li>
    107. 

  107. 				<li>
    108. 

  108. 					<strong>os</strong> - The positioning of the arrows will be chosen dependant on the users operating
    109. 

  109. 					system (e.g. the value will be "after" for OSX and "split" or other operating systems).
    110. 

  110. 				</li>
    111. 

  111. 			</ul>
    112. 

  112. 			<p>
    113. 

  113. 				Note that in these examples the arrows are simple squares which can cause confusion when they are next
    114. 

  114. 				to each other. This won't be a problem with well designed graphical elements.
    115. 

  115. 			</p>
    116. 

  116. 

  117. 			<h2>Vertical only, "before"</h2>
    118. 

  118. 			<div class="scroll-pane-before">
    119. 

  119. 				<p>
    120. 

  120. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
    121. 

  121. 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
    122. 

  122. 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
    123. 

  123. 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
    124. 

  124. 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
    125. 

  125. 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    126. 

  126. 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
    127. 

  127. 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
    128. 

  128. 					eu lacus semper viverra.
    129. 

  129. 				</p>
    130. 

  130. 				<p>
    131. 

  131. 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
    132. 

  132. 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
    133. 

  133. 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
    134. 

  134. 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
    135. 

  135. 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
    136. 

  136. 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
    137. 

  137. 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
    138. 

  138. 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
    139. 

  139. 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
    140. 

  140. 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
    141. 

  141. 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
    142. 

  142. 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
    143. 

  143. 				</p>
    144. 

  144. 				<p>
    145. 

  145. 					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
    146. 

  146. 					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
    147. 

  147. 					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
    148. 

  148. 					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
    149. 

  149. 					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
    150. 

  150. 					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
    151. 

  151. 					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
    152. 

  152. 					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
    153. 

  153. 					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
    154. 

  154. 					id mollis nisi. Donec fermentum vehicula porta.
    155. 

  155. 				</p>
    156. 

  156. 				<p>
    157. 

  157. 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    158. 

  158. 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
    159. 

  159. 					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    160. 

  160. 					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
    161. 

  161. 					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
    162. 

  162. 					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
    163. 

  163. 					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
    164. 

  164. 					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
    165. 

  165. 					luctus, metus
    166. 

  166. 				</p>
    167. 

  167. 				<p>
    168. 

  168. 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    169. 

  169. 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
    170. 

  170. 					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    171. 

  171. 				</p>
    172. 

  172. 			</div>
    173. 

  173. 			<h2>Horizontal only, "before"</h2>
    174. 

  174. 			<div class="scroll-pane-before horizontal-only">
    175. 

  175. 				<p style="width: 1000px;">
    176. 

  176. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
    177. 

  177. 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
    178. 

  178. 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
    179. 

  179. 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
    180. 

  180. 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
    181. 

  181. 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    182. 

  182. 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
    183. 

  183. 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
    184. 

  184. 					eu lacus semper viverra.
    185. 

  185. 				</p>
    186. 

  186. 			</div>
    187. 

  187. 			<h2>Both, "before"</h2>
    188. 

  188. 			<div class="scroll-pane-before">
    189. 

  189. 				<p style="width: 1000px">
    190. 

  190. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
    191. 

  191. 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
    192. 

  192. 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
    193. 

  193. 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
    194. 

  194. 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
    195. 

  195. 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    196. 

  196. 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
    197. 

  197. 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
    198. 

  198. 					eu lacus semper viverra.
    199. 

  199. 				</p>
    200. 

  200. 				<p>
    201. 

  201. 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
    202. 

  202. 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
    203. 

  203. 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
    204. 

  204. 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
    205. 

  205. 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
    206. 

  206. 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
    207. 

  207. 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
    208. 

  208. 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
    209. 

  209. 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
    210. 

  210. 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
    211. 

  211. 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
    212. 

  212. 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
    213. 

  213. 				</p>
    214. 

  214. 				<p>
    215. 

  215. 					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
    216. 

  216. 					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
    217. 

  217. 					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
    218. 

  218. 					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
    219. 

  219. 					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
    220. 

  220. 					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
    221. 

  221. 					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
    222. 

  222. 					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
    223. 

  223. 					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
    224. 

  224. 					id mollis nisi. Donec fermentum vehicula porta.
    225. 

  225. 				</p>
    226. 

  226. 				<p>
    227. 

  227. 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    228. 

  228. 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
    229. 

  229. 					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    230. 

  230. 					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
    231. 

  231. 					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
    232. 

  232. 					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
    233. 

  233. 					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
    234. 

  234. 					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
    235. 

  235. 					luctus, metus
    236. 

  236. 				</p>
    237. 

  237. 				<p>
    238. 

  238. 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    239. 

  239. 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
    240. 

  240. 					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    241. 

  241. 				</p>
    242. 

  242. 			</div>
    243. 

  243. 

  244. 			<h2>Vertical only, "after"</h2>
    245. 

  245. 			<div class="scroll-pane-after">
    246. 

  246. 				<p>
    247. 

  247. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
    248. 

  248. 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
    249. 

  249. 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
    250. 

  250. 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
    251. 

  251. 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
    252. 

  252. 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    253. 

  253. 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
    254. 

  254. 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
    255. 

  255. 					eu lacus semper viverra.
    256. 

  256. 				</p>
    257. 

  257. 				<p>
    258. 

  258. 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
    259. 

  259. 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
    260. 

  260. 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
    261. 

  261. 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
    262. 

  262. 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
    263. 

  263. 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
    264. 

  264. 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
    265. 

  265. 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
    266. 

  266. 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
    267. 

  267. 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
    268. 

  268. 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
    269. 

  269. 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
    270. 

  270. 				</p>
    271. 

  271. 				<p>
    272. 

  272. 					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
    273. 

  273. 					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
    274. 

  274. 					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
    275. 

  275. 					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
    276. 

  276. 					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
    277. 

  277. 					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
    278. 

  278. 					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
    279. 

  279. 					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
    280. 

  280. 					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
    281. 

  281. 					id mollis nisi. Donec fermentum vehicula porta.
    282. 

  282. 				</p>
    283. 

  283. 				<p>
    284. 

  284. 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    285. 

  285. 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
    286. 

  286. 					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    287. 

  287. 					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
    288. 

  288. 					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
    289. 

  289. 					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
    290. 

  290. 					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
    291. 

  291. 					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
    292. 

  292. 					luctus, metus
    293. 

  293. 				</p>
    294. 

  294. 				<p>
    295. 

  295. 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    296. 

  296. 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
    297. 

  297. 					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    298. 

  298. 				</p>
    299. 

  299. 			</div>
    300. 

  300. 			<h2>Horizontal only, "after"</h2>
    301. 

  301. 			<div class="scroll-pane-after horizontal-only">
    302. 

  302. 				<p style="width: 1000px;">
    303. 

  303. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
    304. 

  304. 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
    305. 

  305. 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
    306. 

  306. 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
    307. 

  307. 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
    308. 

  308. 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    309. 

  309. 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
    310. 

  310. 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
    311. 

  311. 					eu lacus semper viverra.
    312. 

  312. 				</p>
    313. 

  313. 			</div>
    314. 

  314. 			<h2>Both, "after"</h2>
    315. 

  315. 			<div class="scroll-pane-after">
    316. 

  316. 				<p style="width: 1000px">
    317. 

  317. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
    318. 

  318. 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
    319. 

  319. 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
    320. 

  320. 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
    321. 

  321. 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
    322. 

  322. 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    323. 

  323. 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
    324. 

  324. 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
    325. 

  325. 					eu lacus semper viverra.
    326. 

  326. 				</p>
    327. 

  327. 				<p>
    328. 

  328. 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
    329. 

  329. 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
    330. 

  330. 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
    331. 

  331. 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
    332. 

  332. 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
    333. 

  333. 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
    334. 

  334. 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
    335. 

  335. 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
    336. 

  336. 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
    337. 

  337. 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
    338. 

  338. 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
    339. 

  339. 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
    340. 

  340. 				</p>
    341. 

  341. 				<p>
    342. 

  342. 					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
    343. 

  343. 					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
    344. 

  344. 					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
    345. 

  345. 					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
    346. 

  346. 					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
    347. 

  347. 					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
    348. 

  348. 					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
    349. 

  349. 					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
    350. 

  350. 					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
    351. 

  351. 					id mollis nisi. Donec fermentum vehicula porta.
    352. 

  352. 				</p>
    353. 

  353. 				<p>
    354. 

  354. 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    355. 

  355. 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
    356. 

  356. 					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    357. 

  357. 					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
    358. 

  358. 					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
    359. 

  359. 					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
    360. 

  360. 					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
    361. 

  361. 					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
    362. 

  362. 					luctus, metus
    363. 

  363. 				</p>
    364. 

  364. 				<p>
    365. 

  365. 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    366. 

  366. 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
    367. 

  367. 					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    368. 

  368. 				</p>
    369. 

  369. 			</div>
    370. 

  370. 

  371. 			<h2>Vertical only, "os"</h2>
    372. 

  372. 			<div class="scroll-pane-os">
    373. 

  373. 				<p>
    374. 

  374. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
    375. 

  375. 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
    376. 

  376. 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
    377. 

  377. 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
    378. 

  378. 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
    379. 

  379. 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    380. 

  380. 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
    381. 

  381. 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
    382. 

  382. 					eu lacus semper viverra.
    383. 

  383. 				</p>
    384. 

  384. 				<p>
    385. 

  385. 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
    386. 

  386. 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
    387. 

  387. 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
    388. 

  388. 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
    389. 

  389. 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
    390. 

  390. 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
    391. 

  391. 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
    392. 

  392. 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
    393. 

  393. 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
    394. 

  394. 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
    395. 

  395. 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
    396. 

  396. 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
    397. 

  397. 				</p>
    398. 

  398. 				<p>
    399. 

  399. 					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
    400. 

  400. 					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
    401. 

  401. 					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
    402. 

  402. 					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
    403. 

  403. 					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
    404. 

  404. 					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
    405. 

  405. 					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
    406. 

  406. 					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
    407. 

  407. 					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
    408. 

  408. 					id mollis nisi. Donec fermentum vehicula porta.
    409. 

  409. 				</p>
    410. 

  410. 				<p>
    411. 

  411. 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    412. 

  412. 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
    413. 

  413. 					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    414. 

  414. 					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
    415. 

  415. 					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
    416. 

  416. 					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
    417. 

  417. 					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
    418. 

  418. 					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
    419. 

  419. 					luctus, metus
    420. 

  420. 				</p>
    421. 

  421. 				<p>
    422. 

  422. 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    423. 

  423. 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
    424. 

  424. 					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    425. 

  425. 				</p>
    426. 

  426. 			</div>
    427. 

  427. 			<h2>Horizontal only, "os"</h2>
    428. 

  428. 			<div class="scroll-pane-os horizontal-only">
    429. 

  429. 				<p style="width: 1000px;">
    430. 

  430. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
    431. 

  431. 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
    432. 

  432. 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
    433. 

  433. 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
    434. 

  434. 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
    435. 

  435. 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    436. 

  436. 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
    437. 

  437. 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
    438. 

  438. 					eu lacus semper viverra.
    439. 

  439. 				</p>
    440. 

  440. 			</div>
    441. 

  441. 			<h2>Both, "os"</h2>
    442. 

  442. 			<div class="scroll-pane-os">
    443. 

  443. 				<p style="width: 1000px">
    444. 

  444. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
    445. 

  445. 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
    446. 

  446. 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
    447. 

  447. 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
    448. 

  448. 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
    449. 

  449. 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    450. 

  450. 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
    451. 

  451. 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
    452. 

  452. 					eu lacus semper viverra.
    453. 

  453. 				</p>
    454. 

  454. 				<p>
    455. 

  455. 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
    456. 

  456. 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
    457. 

  457. 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
    458. 

  458. 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
    459. 

  459. 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
    460. 

  460. 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
    461. 

  461. 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
    462. 

  462. 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
    463. 

  463. 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
    464. 

  464. 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
    465. 

  465. 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
    466. 

  466. 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
    467. 

  467. 				</p>
    468. 

  468. 				<p>
    469. 

  469. 					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
    470. 

  470. 					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
    471. 

  471. 					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
    472. 

  472. 					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
    473. 

  473. 					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
    474. 

  474. 					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
    475. 

  475. 					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
    476. 

  476. 					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
    477. 

  477. 					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
    478. 

  478. 					id mollis nisi. Donec fermentum vehicula porta.
    479. 

  479. 				</p>
    480. 

  480. 				<p>
    481. 

  481. 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    482. 

  482. 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
    483. 

  483. 					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    484. 

  484. 					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
    485. 

  485. 					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
    486. 

  486. 					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
    487. 

  487. 					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
    488. 

  488. 					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
    489. 

  489. 					luctus, metus
    490. 

  490. 				</p>
    491. 

  491. 				<p>
    492. 

  492. 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    493. 

  493. 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
    494. 

  494. 					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    495. 

  495. 				</p>
    496. 

  496. 			</div>
    497. 

  497. 

  498. 			<h2>Vertical only, "split" (default)</h2>
    499. 

  499. 			<div class="scroll-pane-split">
    500. 

  500. 				<p>
    501. 

  501. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
    502. 

  502. 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
    503. 

  503. 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
    504. 

  504. 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
    505. 

  505. 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
    506. 

  506. 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    507. 

  507. 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
    508. 

  508. 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
    509. 

  509. 					eu lacus semper viverra.
    510. 

  510. 				</p>
    511. 

  511. 				<p>
    512. 

  512. 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
    513. 

  513. 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
    514. 

  514. 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
    515. 

  515. 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
    516. 

  516. 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
    517. 

  517. 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
    518. 

  518. 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
    519. 

  519. 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
    520. 

  520. 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
    521. 

  521. 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
    522. 

  522. 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
    523. 

  523. 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
    524. 

  524. 				</p>
    525. 

  525. 				<p>
    526. 

  526. 					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
    527. 

  527. 					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
    528. 

  528. 					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
    529. 

  529. 					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
    530. 

  530. 					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
    531. 

  531. 					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
    532. 

  532. 					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
    533. 

  533. 					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
    534. 

  534. 					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
    535. 

  535. 					id mollis nisi. Donec fermentum vehicula porta.
    536. 

  536. 				</p>
    537. 

  537. 				<p>
    538. 

  538. 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    539. 

  539. 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
    540. 

  540. 					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    541. 

  541. 					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
    542. 

  542. 					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
    543. 

  543. 					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
    544. 

  544. 					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
    545. 

  545. 					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
    546. 

  546. 					luctus, metus
    547. 

  547. 				</p>
    548. 

  548. 				<p>
    549. 

  549. 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    550. 

  550. 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
    551. 

  551. 					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    552. 

  552. 				</p>
    553. 

  553. 			</div>
    554. 

  554. 			<h2>Horizontal only, "split" (default)</h2>
    555. 

  555. 			<div class="scroll-pane-split horizontal-only">
    556. 

  556. 				<p style="width: 1000px;">
    557. 

  557. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
    558. 

  558. 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
    559. 

  559. 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
    560. 

  560. 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
    561. 

  561. 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
    562. 

  562. 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    563. 

  563. 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
    564. 

  564. 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
    565. 

  565. 					eu lacus semper viverra.
    566. 

  566. 				</p>
    567. 

  567. 			</div>
    568. 

  568. 			<h2>Both, "split" (default)</h2>
    569. 

  569. 			<div class="scroll-pane-split">
    570. 

  570. 				<p style="width: 1000px">
    571. 

  571. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
    572. 

  572. 					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
    573. 

  573. 					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
    574. 

  574. 					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
    575. 

  575. 					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
    576. 

  576. 					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    577. 

  577. 					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
    578. 

  578. 					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
    579. 

  579. 					eu lacus semper viverra.
    580. 

  580. 				</p>
    581. 

  581. 				<p>
    582. 

  582. 					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
    583. 

  583. 					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
    584. 

  584. 					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
    585. 

  585. 					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
    586. 

  586. 					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
    587. 

  587. 					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
    588. 

  588. 					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
    589. 

  589. 					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
    590. 

  590. 					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
    591. 

  591. 					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
    592. 

  592. 					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
    593. 

  593. 					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
    594. 

  594. 				</p>
    595. 

  595. 				<p>
    596. 

  596. 					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
    597. 

  597. 					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
    598. 

  598. 					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
    599. 

  599. 					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
    600. 

  600. 					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
    601. 

  601. 					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
    602. 

  602. 					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
    603. 

  603. 					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
    604. 

  604. 					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
    605. 

  605. 					id mollis nisi. Donec fermentum vehicula porta.
    606. 

  606. 				</p>
    607. 

  607. 				<p>
    608. 

  608. 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    609. 

  609. 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
    610. 

  610. 					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    611. 

  611. 					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
    612. 

  612. 					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
    613. 

  613. 					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
    614. 

  614. 					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
    615. 

  615. 					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
    616. 

  616. 					luctus, metus
    617. 

  617. 				</p>
    618. 

  618. 				<p>
    619. 

  619. 					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    620. 

  620. 					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
    621. 

  621. 					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    622. 

  622. 				</p>
    623. 

  623. 			</div>
    624. 

  624. 			<h2>Page javascript</h2>
    625. 

  625. 			<div id="sourcecode-display">
    626. 

  626. 				<p>The contents of this div will be replaced by the javascript added to this page</p>
    627. 

  627. 			</div>
    628. 

  628. 			<h2>Page CSS</h2>
    629. 

  629. 			<div id="css-display">
    630. 

  630. 				<p>The contents of this div will be replaced by the CSS added to this page</p>
    631. 

  631. 			</div>
    632. 

  632. 		</div>
    633. 

  633. 	</body>
    634. 

  634. </html>
    635.