/index.html

https://github.com/mask8/etScroller · HTML · 70 lines · 64 code · 6 blank · 0 comment · 0 complexity · aa6c428ee2cdd151edeff56031c386ed MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. 	<head>
    4. 

  4. 		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes" />
    5. 

  5. 		<meta charset="UTF-8" />
    6. 

  6. 		<title>etScroller</title>
    7. 

  7. 		<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
    8. 

  8. 		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    9. 

  9. 		<script type="text/javascript" src="js/jquery.et.scroller.js"></script>
    10. 

  10. 		<script type="text/javascript">
    11. 

  11. 			$(document).ready(function(){
    12. 

  12.    				// Your code here
    13. 

  13.    				$(".scroller").etScroller({
    14. 

  14. //					'overflow': true,
    15. 

  15. 					'hscroll': false,
    16. 

  16. 					'vscroll': true,
    17. 

  17. 					'width': 400,
    18. 

  18. 					'height': 400
    19. 

  19.    				});
    20. 

  20. 			});
    21. 

  21. 		</script>
    22. 

  22. 	</head>
    23. 

  23. 	<body>
    24. 

  24. 		<div>
    25. 

  25. 			<h1>etScroller - jQuery Plugin</h1>
    26. 

  26. 

  27. 			<p>
    28. 

  28. 				etScroller, jQuery Plugin, enables any container to have a scrollbar for both web browser and mobile web browser.
    29. 

  29. 				In Web browser, you can simply drag the scrollbar or use wheel to scroll content inside of any div.
    30. 

  30. 				In mobile Web browser, you can swipe content to scroll. 
    31. 

  31. 			</p>
    32. 

  32. 

  33. 			<h2>How it works</h2>
    34. 

  34. 			
    35. 

  35. 			<p>
    36. 

  36. 				Basic idea of etScroller is the same with CSS overflow property. Why not just use overflow? Because overflow is not supported by smartphones.
    37. 

  37. 				Yes, etScroller works in iPhone and Android.
    38. 

  38. 				You'll just need a piece of jquery code to make any containers scrollable.
    39. 

  39. 			</p>
    40. 

  40. 

  41. 			<h3>Requirement</h3>
    42. 

  42. 			<ul>
    43. 

  43. 				<li>jQuery-1.3.x or later - http://jquery.com/</li>
    44. 

  44. 				<li>jQuery Easing Plugin-1.3 - http://gsgd.co.uk/sandbox/jquery/easing/</li>
    45. 

  45. 			</ul>
    46. 

  46. 

  47. 			<div id="debug"></div>
    48. 

  48. 			<div id="debug2"></div>
    49. 

  49. 

  50. 			<div class="scroller" style="width: 400px; height: 400px; background-color: #ccc;">
    51. 

  51. 				<h2>Scroll it</h2>
    52. 

  52. 				<p>
    53. 

  53. 					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
    54. 

  54. 				</p>
    55. 

  55. 				<p>
    56. 

  56. 					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
    57. 

  57. 				</p>
    58. 

  58. 				<p style="width: 600px;">
    59. 

  59. 					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
    60. 

  60. 				</p>
    61. 

  61. 				<p>
    62. 

  62. 					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
    63. 

  63. 				</p>
    64. 

  64. 				<p>
    65. 

  65. 					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
    66. 

  66. 				</p>
    67. 

  67. 			</div>
    68. 

  68. 		</div>
    69. 

  69. 	</body>
    70. 

  70. </html>
    71.