auto_reinitialise.html 3.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  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>jScrollPane - automatic reinitialise demo page</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. 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. var settings = {
  31. showArrows: true,
  32. autoReinitialise: true
  33. };
  34. var pane = $('.scroll-pane')
  35. pane.jScrollPane(settings);
  36. var contentPane = pane.data('jsp').getContentPane();
  37. var i = 1;
  38. // Every second add some new content...
  39. setInterval(
  40. function()
  41. {
  42. contentPane.append(
  43. $('<p />').text('This is paragraph number ' + i++)
  44. );
  45. },
  46. 1000
  47. );
  48. });
  49. </script>
  50. </head>
  51. <body>
  52. <div id="top-nav">
  53. <img src="image/logo.png" width="196" height="69" alt="jScrollPane">
  54. <ul>
  55. <li><a href="index.html">Home</a></li>
  56. <li><a href="index.html#examples">Examples</a></li>
  57. <li><a href="index.html#themes">Themes</a></li>
  58. <li><a href="index.html#usage">How to use</a></li>
  59. <li><a href="faqs.html">FAQs</a></li>
  60. <li><a href="known_issues.html">Known issues</a></li>
  61. <li><a href="index.html#support">Support</a></li>
  62. <li><a href="index.html#download">Download</a></li>
  63. </ul>
  64. </div>
  65. <div id="container">
  66. <h1>jScrollPane - automatic reinitialisation demo page</h1>
  67. <p>
  68. This demonstration shows how you can tell jScrollPane to automatically reinitialise itself. You do this
  69. by passing in <strong><a href="settings.html#autoReinitialise">autoReinitialise</a>: true</strong> as a
  70. setting. If you do this then the scrollpane attempts to reinitialise itself every
  71. <a href="settings.html#autoReinitialiseDelay">autoReinitialiseDelay</a> miliseconds.
  72. </p>
  73. <p>
  74. Note that there is obviously a processing overhead associated with this method as the script is running
  75. repeatedly in the background. For this reason <strong>autoReinitialise</strong> is false by default and
  76. if possible you are recommended to <a href="dynamic_content.html">manually reinitialise</a>
  77. jScrollPane when you add content to it. However, in some situations this isn't possible so the
  78. <strong>autoReinitialise</strong> method is provided for convenience.
  79. </p>
  80. <div class="scroll-pane">
  81. </div>
  82. <h2>Page javascript</h2>
  83. <div id="sourcecode-display">
  84. <p>The contents of this div will be replaced by the javascript added to this page</p>
  85. </div>
  86. <h2>Page CSS</h2>
  87. <div id="css-display">
  88. <p>The contents of this div will be replaced by the CSS added to this page</p>
  89. </div>
  90. </div>
  91. </body>
  92. </html>