PageRenderTime 43ms CodeModel.GetById 20ms RepoModel.GetById 0ms app.codeStats 0ms

/docs/manual/bower_components/Slidebars/examples/momentum-scrolling.html

https://gitlab.com/github-cloud-corporation/incubator-predictionio
HTML | 72 lines | 56 code | 12 blank | 4 comment | 0 complexity | 48fa61f9705e9894cd9e838160502550 MD5 | raw file
    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3. 	<head>
    4. 

  4. 		<title>Slidebars Momentum Scrolling Example</title>
    5. 

  5. 		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    6. 

  6. 		
    7. 

  7. 		<!-- Slidebars CSS -->
    8. 

  8. 		<link rel="stylesheet" href="slidebars/slidebars.css">
    9. 

  9. 		
    10. 

  10. 		<!-- Example Styles -->
    11. 

  11. 		<link rel="stylesheet" href="example-styles.css">
    12. 

  12. 	</head>
    13. 

  13. 	
    14. 

  14. 	<body>	
    15. 

  15. 		<div id="sb-site">
    16. 

  16. 			<h1>Slidebars Momentum Scrolling Example</h1>
    17. 

  17. 			<p>iOS offers a special webkit property to allow native style momentum scrolling on overflowing elements. You can add the class '.sb-momentum-scrolling' to your Slidebars to achieve this. In this example, the <a class="sb-open-left" href="#">left</a> Slidebar has smooth scrolling enabled whereas the <a class="sb-open-right" href="#">right</a> does not. You'll need to view this page on an iOS device/simulator to see it working.</p>
    18. 

  18. 			<ul>
    19. 

  19. 				<li class="sb-toggle-left">Toggle left Slidebar</li>
    20. 

  20. 				<li class="sb-toggle-right">Toggle right Slidebar</li>
    21. 

  21. 				<li class="sb-open-left">Open left Slidebar</li>
    22. 

  22. 				<li class="sb-open-right">Open right Slidebar</li>
    23. 

  23. 				<li class="sb-close">Close either Slidebar</li>
    24. 

  24. 			</ul>
    25. 

  25. 			
    26. 

  26. 			<h2>More Examples</h2>
    27. 

  27. 			<ul>
    28. 

  28. 				<li><a href="control-classes.html">Control Classes</a></li>
    29. 

  29. 				<li><a href="api-usage.html">API Usage</a></li>
    30. 

  30. 				<li><a href="mobile-only.html">Mobile Only</a></li>
    31. 

  31. 				<li><a href="animation-styles.html">Animation Styles</a></li>
    32. 

  32. 				<li><a href="optional-widths.html">Optional Widths</a></li>
    33. 

  33. 				<li><a href="custom-widths.html">Custom Widths</a></li>
    34. 

  34. 				<li><a href="scroll-lock.html">Scroll Lock</a></li>
    35. 

  35. 				<li><a href="slidebar-links.html">Slidebar Links</a></li>
    36. 

  36. 				<li><a href="static-slidebars.html">Static Slidebars</a></li>
    37. 

  37. 				<li><a href="momentum-scrolling.html">Momentum Scrolling</a></li>
    38. 

  38. 				<li><a href="left-slidebar-only.html">Left Slidebar Only</a></li>
    39. 

  39. 				<li><a href="right-slidebar-only.html">Right Slidebar Only</a></li>
    40. 

  40. 			</ul>
    41. 

  41. 		</div>
    42. 

  42. 		
    43. 

  43. 		<div class="sb-slidebar sb-left sb-momentum-scrolling">
    44. 

  44. 			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae lorem eleifend, ultricies nisi tempor, dapibus dui. Ut iaculis adipiscing mi, at lacinia augue pulvinar in. Pellentesque et nunc a libero cursus posuere. Fusce semper metus id nunc laoreet vulputate. Maecenas sit amet augue ornare, tempus augue eget, scelerisque arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quis diam ac est ultricies vestibulum. Aenean nec rhoncus lorem. Nam velit elit, mollis in blandit vel, pellentesque id augue. In hac habitasse platea dictumst. Nunc placerat est eget vulputate tristique. Sed turpis libero, aliquam at dolor eu, consectetur tincidunt est. Nulla vel semper dui, porttitor gravida lacus. Mauris lacinia pharetra tincidunt. Nunc varius mattis molestie.</p>
    45. 

  45. 			
    46. 

  46. 			<p>Sed quis velit leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam malesuada lobortis commodo. Maecenas egestas augue diam, eget semper massa sodales nec. Nunc fermentum suscipit augue, at sagittis mauris. Vestibulum in turpis elementum, facilisis ipsum vitae, fermentum erat. Integer sodales at dolor vitae porttitor. Pellentesque tempus in eros eu elementum. Phasellus molestie, ligula et elementum feugiat, libero purus mollis metus, quis semper tellus velit ut risus. Nullam adipiscing erat ac tortor rutrum, eu laoreet libero sollicitudin. Nunc auctor et sem quis fringilla. In erat lacus, rutrum in erat id, lacinia cursus velit. Pellentesque consequat sit amet justo non aliquet. Donec ligula eros, convallis sit amet vehicula et, dignissim id velit.</p>
    47. 

  47. 			
    48. 

  48. 			<p>Suspendisse sodales ornare dui sed tincidunt. Praesent bibendum nisl ac neque posuere ultrices. Sed ac nisl id augue lobortis venenatis. Morbi eros urna, sollicitudin tristique justo ac, sodales feugiat sem. Donec auctor placerat leo, quis auctor lorem laoreet vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra nulla ac fringilla dictum. Maecenas sed dapibus arcu. Morbi nec feugiat tellus. Donec rutrum, tellus vitae sollicitudin tincidunt, ligula elit feugiat ligula, eget sollicitudin libero felis vel augue. Duis et massa fringilla, vehicula arcu sed, ultricies ligula. Praesent porttitor gravida posuere.</p>
    49. 

  49. 		</div>
    50. 

  50. 		
    51. 

  51. 		<div class="sb-slidebar sb-right">
    52. 

  52. 			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae lorem eleifend, ultricies nisi tempor, dapibus dui. Ut iaculis adipiscing mi, at lacinia augue pulvinar in. Pellentesque et nunc a libero cursus posuere. Fusce semper metus id nunc laoreet vulputate. Maecenas sit amet augue ornare, tempus augue eget, scelerisque arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quis diam ac est ultricies vestibulum. Aenean nec rhoncus lorem. Nam velit elit, mollis in blandit vel, pellentesque id augue. In hac habitasse platea dictumst. Nunc placerat est eget vulputate tristique. Sed turpis libero, aliquam at dolor eu, consectetur tincidunt est. Nulla vel semper dui, porttitor gravida lacus. Mauris lacinia pharetra tincidunt. Nunc varius mattis molestie.</p>
    53. 

  53. 			
    54. 

  54. 			<p>Sed quis velit leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam malesuada lobortis commodo. Maecenas egestas augue diam, eget semper massa sodales nec. Nunc fermentum suscipit augue, at sagittis mauris. Vestibulum in turpis elementum, facilisis ipsum vitae, fermentum erat. Integer sodales at dolor vitae porttitor. Pellentesque tempus in eros eu elementum. Phasellus molestie, ligula et elementum feugiat, libero purus mollis metus, quis semper tellus velit ut risus. Nullam adipiscing erat ac tortor rutrum, eu laoreet libero sollicitudin. Nunc auctor et sem quis fringilla. In erat lacus, rutrum in erat id, lacinia cursus velit. Pellentesque consequat sit amet justo non aliquet. Donec ligula eros, convallis sit amet vehicula et, dignissim id velit.</p>
    55. 

  55. 			
    56. 

  56. 			<p>Suspendisse sodales ornare dui sed tincidunt. Praesent bibendum nisl ac neque posuere ultrices. Sed ac nisl id augue lobortis venenatis. Morbi eros urna, sollicitudin tristique justo ac, sodales feugiat sem. Donec auctor placerat leo, quis auctor lorem laoreet vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra nulla ac fringilla dictum. Maecenas sed dapibus arcu. Morbi nec feugiat tellus. Donec rutrum, tellus vitae sollicitudin tincidunt, ligula elit feugiat ligula, eget sollicitudin libero felis vel augue. Duis et massa fringilla, vehicula arcu sed, ultricies ligula. Praesent porttitor gravida posuere.</p>
    57. 

  57. 		</div>
    58. 

  58. 				
    59. 

  59. 		<!-- jQuery -->
    60. 

  60. 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    61. 

  61. 		
    62. 

  62. 		<!-- Slidebars -->
    63. 

  63. 		<script src="slidebars/slidebars.js"></script>
    64. 

  64. 		<script>
    65. 

  65. 			(function($) {
    66. 

  66. 				$(document).ready(function() {
    67. 

  67. 					$.slidebars();
    68. 

  68. 				});
    69. 

  69. 			}) (jQuery);
    70. 

  70. 		</script>
    71. 

  71. 	</body>
    72. 

  72. </html>
    73.