diff options
Diffstat (limited to 'libs/bower_components/jScrollPane/fixed_width.html')
| -rw-r--r-- | libs/bower_components/jScrollPane/fixed_width.html | 230 |
1 files changed, 230 insertions, 0 deletions
diff --git a/libs/bower_components/jScrollPane/fixed_width.html b/libs/bower_components/jScrollPane/fixed_width.html new file mode 100644 index 0000000000..5b619d723b --- /dev/null +++ b/libs/bower_components/jScrollPane/fixed_width.html @@ -0,0 +1,230 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" + "http://www.w3.org/TR/html4/loose.dtd"> +<html> + <head> + + <title>jScrollPane fixed width demo</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 */ + .width-marker + { + width: 300px; + border-bottom: 15px solid #3333ff; + margin: 0 0 1em; + } + .scroll-pane + { + width: 300px; + 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.8.2/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( + $('<div class="width-marker" />') + ); + $('.scroll-pane').jScrollPane(); + $('#reinit-link').bind( + 'click', + function() + { + // Using this form rather than the API simply because + // it is easier to apply the same action to multiple + // scrollpanes this way - they should be equivalent + $('.scroll-pane').jScrollPane(); + return false; + } + ); + }); + </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 - fixed width demo page</h1> + <p> + This demonstration is to test a fix for a problem with elements who have a fixed width (as + <a href="http://groups.google.com/group/jscrollpane/browse_thread/thread/a5955d3b77d56afb#msg_0867f38ede7398ce"> + reported</a> on the mailing list). + </p> + <p> + When the panes are reinitialised (by clicking <a href="#" id="reinit-link">this link</a>) they should + stay at their fixed width (300px). + </p> + <p> + Note that I have also added blue bars marking 300px widths to double check that the scrollpane is + displaying its content at the correct width. + </p> + + <h2>Vertical only</h2> + <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> + <h2>Horizontal only</h2> + <div class="scroll-pane 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</h2> + <div class="scroll-pane"> + <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>
\ No newline at end of file |