short.html 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title>Short jScrollPane demo</title>
  6. <!-- styles specific to demo site -->
  7. <link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
  8. <!-- styles needed by jScrollPane - include in your own sites -->
  9. <link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
  10. <style type="text/css" id="page-css">
  11. /* Styles specific to this particular page */
  12. .scroll-pane
  13. {
  14. width: 100%;
  15. max-height: 200px;
  16. overflow: auto;
  17. }
  18. </style>
  19. <!-- latest jQuery direct from google's CDN -->
  20. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  21. <!-- the mousewheel plugin -->
  22. <script type="text/javascript" src="script/jquery.mousewheel.js"></script>
  23. <!-- the jScrollPane script -->
  24. <script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
  25. <!-- scripts specific to this demo site -->
  26. <script type="text/javascript" src="script/demo.js"></script>
  27. <script type="text/javascript" id="sourcecode">
  28. $(function()
  29. {
  30. $('.scroll-pane').jScrollPane();
  31. });
  32. </script>
  33. </head>
  34. <body>
  35. <div id="top-nav">
  36. <img src="image/logo.png" width="196" height="69" alt="jScrollPane">
  37. <ul>
  38. <li><a href="index.html">Home</a></li>
  39. <li><a href="index.html#examples">Examples</a></li>
  40. <li><a href="index.html#themes">Themes</a></li>
  41. <li><a href="index.html#usage">How to use</a></li>
  42. <li><a href="faqs.html">FAQs</a></li>
  43. <li><a href="known_issues.html">Known issues</a></li>
  44. <li><a href="index.html#support">Support</a></li>
  45. <li><a href="index.html#download">Download</a></li>
  46. </ul>
  47. </div>
  48. <div id="container">
  49. <h1>jScrollPane - demo page showing "no scroll necessary"</h1>
  50. <p>
  51. This demonstration shows how jScrollPane won't add scrollbars if you apply it to an element which
  52. doesn't require scrolling.
  53. </p>
  54. <div class="scroll-pane">
  55. <p>
  56. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
  57. eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
  58. mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
  59. consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
  60. bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
  61. semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
  62. mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
  63. quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
  64. eu lacus semper viverra.
  65. </p>
  66. </div>
  67. <h2>Page javascript</h2>
  68. <div id="sourcecode-display">
  69. <p>The contents of this div will be replaced by the javascript added to this page</p>
  70. </div>
  71. <h2>Page CSS</h2>
  72. <div id="css-display">
  73. <p>The contents of this div will be replaced by the CSS added to this page</p>
  74. </div>
  75. </div>
  76. </body>
  77. </html>