123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634 |
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>jScrollPane arrow positioning example</title>
- <!-- styles specific to demo site -->
- <link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
- <!-- styles needed by jScrollPane - include in your own sites -->
- <link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
- <style type="text/css" id="page-css">
- /* Styles specific to this particular page */
- .scroll-pane-before,
- .scroll-pane-after,
- .scroll-pane-split,
- .scroll-pane-os
- {
- width: 100%;
- height: 200px;
- overflow: auto;
- }
- .horizontal-only
- {
- height: auto;
- max-height: 200px;
- }
- </style>
- <!-- latest jQuery direct from google's CDN -->
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <!-- the mousewheel plugin -->
- <script type="text/javascript" src="script/jquery.mousewheel.js"></script>
- <!-- the jScrollPane script -->
- <script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
- <!-- scripts specific to this demo site -->
- <script type="text/javascript" src="script/demo.js"></script>
- <script type="text/javascript" id="sourcecode">
- $(function()
- {
- $('.scroll-pane-before').jScrollPane(
- {
- showArrows: true,
- verticalArrowPositions: 'before',
- horizontalArrowPositions: 'before'
- }
- );
- $('.scroll-pane-after').jScrollPane(
- {
- showArrows: true,
- verticalArrowPositions: 'after',
- horizontalArrowPositions: 'after'
- }
- );
- $('.scroll-pane-os').jScrollPane(
- {
- showArrows: true,
- verticalArrowPositions: 'os',
- horizontalArrowPositions: 'os'
- }
- );
- $('.scroll-pane-split').jScrollPane(
- {
- showArrows: true,
- verticalArrowPositions: 'split',
- horizontalArrowPositions: 'split'
- }
- );
- });
- </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 - example showing options for arrow positioning</h1>
- <p>
- This demonstration builds on the <a href="arrows.html">basic arrows scrollpane example</a> and
- demonstrates the different possible settings for <a href="settings.html#verticalArrowPositions">
- verticalArrowPositions</a> and <a href="settings.html#horizontalArrowPositions">horizontalArrowPositions
- </a>. These settings allow you to choose where the arrows appear relative to the tracks and each of the
- settings has four valid values:
- </p>
- <ul class="link-list">
- <li>
- <strong>split</strong> - First arrow will appear before track, second arrow afterwards (the default)
- </li>
- <li>
- <strong>before</strong> - Both arrows will appear before the track.
- </li>
- <li>
- <strong>after</strong> - Both arrows will appear after the track (as is default on OSX).
- </li>
- <li>
- <strong>os</strong> - The positioning of the arrows will be chosen dependant on the users operating
- system (e.g. the value will be "after" for OSX and "split" or other operating systems).
- </li>
- </ul>
- <p>
- Note that in these examples the arrows are simple squares which can cause confusion when they are next
- to each other. This won't be a problem with well designed graphical elements.
- </p>
- <h2>Vertical only, "before"</h2>
- <div class="scroll-pane-before">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
- eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
- mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
- consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
- bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
- semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
- mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
- quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
- eu lacus semper viverra.
- </p>
- <p>
- Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
- lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
- faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
- Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
- tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
- Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
- est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
- volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
- libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
- sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
- pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
- habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
- </p>
- <p>
- Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
- eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
- dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
- amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
- est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
- dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
- varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
- feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
- congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
- id mollis nisi. Donec fermentum vehicula porta.
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
- sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
- commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
- ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
- Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
- eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
- luctus, metus
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
- amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- </p>
- </div>
- <h2>Horizontal only, "before"</h2>
- <div class="scroll-pane-before horizontal-only">
- <p style="width: 1000px;">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
- eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
- mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
- consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
- bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
- semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
- mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
- quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
- eu lacus semper viverra.
- </p>
- </div>
- <h2>Both, "before"</h2>
- <div class="scroll-pane-before">
- <p style="width: 1000px">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
- eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
- mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
- consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
- bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
- semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
- mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
- quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
- eu lacus semper viverra.
- </p>
- <p>
- Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
- lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
- faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
- Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
- tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
- Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
- est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
- volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
- libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
- sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
- pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
- habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
- </p>
- <p>
- Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
- eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
- dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
- amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
- est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
- dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
- varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
- feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
- congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
- id mollis nisi. Donec fermentum vehicula porta.
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
- sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
- commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
- ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
- Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
- eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
- luctus, metus
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
- amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- </p>
- </div>
- <h2>Vertical only, "after"</h2>
- <div class="scroll-pane-after">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
- eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
- mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
- consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
- bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
- semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
- mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
- quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
- eu lacus semper viverra.
- </p>
- <p>
- Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
- lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
- faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
- Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
- tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
- Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
- est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
- volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
- libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
- sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
- pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
- habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
- </p>
- <p>
- Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
- eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
- dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
- amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
- est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
- dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
- varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
- feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
- congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
- id mollis nisi. Donec fermentum vehicula porta.
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
- sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
- commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
- ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
- Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
- eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
- luctus, metus
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
- amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- </p>
- </div>
- <h2>Horizontal only, "after"</h2>
- <div class="scroll-pane-after horizontal-only">
- <p style="width: 1000px;">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
- eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
- mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
- consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
- bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
- semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
- mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
- quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
- eu lacus semper viverra.
- </p>
- </div>
- <h2>Both, "after"</h2>
- <div class="scroll-pane-after">
- <p style="width: 1000px">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
- eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
- mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
- consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
- bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
- semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
- mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
- quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
- eu lacus semper viverra.
- </p>
- <p>
- Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
- lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
- faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
- Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
- tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
- Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
- est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
- volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
- libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
- sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
- pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
- habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
- </p>
- <p>
- Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
- eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
- dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
- amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
- est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
- dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
- varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
- feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
- congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
- id mollis nisi. Donec fermentum vehicula porta.
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
- sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
- commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
- ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
- Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
- eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
- luctus, metus
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
- amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- </p>
- </div>
- <h2>Vertical only, "os"</h2>
- <div class="scroll-pane-os">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
- eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
- mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
- consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
- bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
- semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
- mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
- quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
- eu lacus semper viverra.
- </p>
- <p>
- Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
- lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
- faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
- Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
- tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
- Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
- est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
- volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
- libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
- sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
- pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
- habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
- </p>
- <p>
- Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
- eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
- dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
- amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
- est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
- dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
- varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
- feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
- congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
- id mollis nisi. Donec fermentum vehicula porta.
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
- sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
- commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
- ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
- Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
- eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
- luctus, metus
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
- amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- </p>
- </div>
- <h2>Horizontal only, "os"</h2>
- <div class="scroll-pane-os horizontal-only">
- <p style="width: 1000px;">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
- eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
- mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
- consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
- bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
- semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
- mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
- quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
- eu lacus semper viverra.
- </p>
- </div>
- <h2>Both, "os"</h2>
- <div class="scroll-pane-os">
- <p style="width: 1000px">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
- eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
- mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
- consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
- bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
- semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
- mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
- quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
- eu lacus semper viverra.
- </p>
- <p>
- Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
- lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
- faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
- Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
- tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
- Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
- est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
- volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
- libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
- sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
- pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
- habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
- </p>
- <p>
- Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
- eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
- dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
- amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
- est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
- dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
- varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
- feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
- congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
- id mollis nisi. Donec fermentum vehicula porta.
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
- sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
- commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
- ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
- Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
- eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
- luctus, metus
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
- amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- </p>
- </div>
- <h2>Vertical only, "split" (default)</h2>
- <div class="scroll-pane-split">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
- eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
- mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
- consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
- bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
- semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
- mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
- quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
- eu lacus semper viverra.
- </p>
- <p>
- Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
- lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
- faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
- Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
- tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
- Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
- est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
- volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
- libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
- sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
- pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
- habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
- </p>
- <p>
- Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
- eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
- dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
- amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
- est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
- dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
- varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
- feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
- congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
- id mollis nisi. Donec fermentum vehicula porta.
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
- sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
- commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
- ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
- Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
- eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
- luctus, metus
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
- amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- </p>
- </div>
- <h2>Horizontal only, "split" (default)</h2>
- <div class="scroll-pane-split horizontal-only">
- <p style="width: 1000px;">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
- eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
- mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
- consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
- bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
- semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
- mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
- quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
- eu lacus semper viverra.
- </p>
- </div>
- <h2>Both, "split" (default)</h2>
- <div class="scroll-pane-split">
- <p style="width: 1000px">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
- eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
- mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
- consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
- bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
- semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
- mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
- quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
- eu lacus semper viverra.
- </p>
- <p>
- Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
- lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
- faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
- Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
- tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
- Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
- est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
- volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
- libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
- sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
- pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
- habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
- </p>
- <p>
- Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
- eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
- dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
- amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
- est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
- dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
- varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
- feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
- congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
- id mollis nisi. Donec fermentum vehicula porta.
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
- sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
- commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
- ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
- Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
- eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
- luctus, metus
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
- amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- </p>
- </div>
- <h2>Page javascript</h2>
- <div id="sourcecode-display">
- <p>The contents of this div will be replaced by the javascript added to this page</p>
- </div>
- <h2>Page CSS</h2>
- <div id="css-display">
- <p>The contents of this div will be replaced by the CSS added to this page</p>
- </div>
- </div>
- </body>
- </html>
|