123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320 |
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>jScrollPane - RuneImp demo 2</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 */
- .section
- {
- width: 180px;
- margin: 0 13px 1em 0;
- height: 300px;
- float: left;
- }
- .last
- {
- margin-right: 0;
- }
- .scroll-pane
- {
- background: #fff;
- padding: 0 0 0 10px;
- width: 170px;
- height: 100%;
- overflow: auto;
- }
- </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').jScrollPane();
- });
- </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 - RuneImp demo 2 page</h1>
- <p>
- This demonstration is an extension of the <a href="runeimp.html">RuneImp demo</a> to verify that
- jScrollPane works correctly when the gap between the sections is specified as margin on the container
- (rather than padding on the element). As you can see, I still using padding on the left hand side of
- the scrolling element to bring the text in from the edge but I also use margins to make the space on
- the right hand side of the scrollbars.
- </p>
- <p>
- Note that I've made the background of .scroll-pane white in this example to demonstrate that the gap
- is margin rather than padding. You can also change the margin rules on .section and .last to padding and
- the layout will continue to work as expected.
- </p>
- <h2>Panes</h2>
- <div class="section">
- <div class="scroll-pane">
- <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>
- </div>
- <div class="section">
- <div class="scroll-pane">
- <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>
- </div>
- <div class="section">
- <div class="scroll-pane">
- <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>
- </div>
- <div class="section last">
- <div class="scroll-pane">
- <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>
- </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>
|