advanced code snippet search

We Recommend

bash Cookbook: Solutions and Examples for bash Users bash Cookbook: Solutions and Examples for bash Users
bash Cookbook teaches shell scripting the way Unix masters practice the craft. It presents a variety of recipes and tricks for all levels of shell programmers so that anyone can become a proficient user of the most common Unix shell -- the bash shell -- and cygwin or other popular Unix emulation packages.

Posted By

komposition on 06/27/08


Tagged

javascript js textmate html jquery effect scrollto


Versions (?)


localScroll Template

Published in: Other 

Plain TextExpand 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  5. <head>
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. 	<title>Jquerty localScroll Template</title>
  8.  
  9. 	<style type="text/css" media="screen">
  10. 	#slide_wrapper{
  11. 		width: 400px;
  12. 		height: 300px;
  13. 		overflow: hidden;
  14. 	}
  15.  
  16. 	#slide_box{
  17. 		width: 2000px;
  18. 		height: 300px;
  19. 	}
  20.  
  21. 	.section{
  22. 		float: left;
  23. 		width: 400px;
  24. 		height: 300px;
  25. 		margin: 0 20px 0 0 0;
  26. 	}
  27.  
  28. 	#section01{ background: #ecf; }
  29. 	#section02{ background: #acf; }
  30. 	#section03{ background: #cfc; }
  31. 	#section04{ background: #ffc; }
  32. 	#section05{ background: #fda; }
  33. 	</style>
  34.  
  35. 	<script src="common/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  36. 	<script src="common/js/jquery.scrollTo-min.js" type="text/javascript" charset="utf-8"></script>
  37. 	<script src="common/js/jquery.localscroll-min.js" type="text/javascript" charset="utf-8"></script>
  38. 	<script type="text/javascript" charset="utf-8">
  39. 	$(document).ready(function() {
  40. 		$('#scroll_navi').localScroll({
  41. 			target: '#slide_wrapper',
  42. 			axis: 'xy'
  43. 		});
  44. 	});
  45. 	</script>
  46. </head>
  47. <body>
  48. 	<div id="slide_wrapper"><!-- Static Box contain Sliding Box. set overflow:hidden-->
  49. 		<div id="slide_box"><!-- Sliding Box, it's Long or Large and contain some sections -->
  50. 			<div id="section01" class="section">
  51. 				section01
  52. 			</div>
  53. 			<div id="section02" class="section">
  54. 				section02
  55. 			</div>
  56. 			<div id="section03" class="section">
  57. 				section03
  58. 			</div>
  59. 			<div id="section04" class="section">
  60. 				section04
  61. 			</div>
  62. 			<div id="section05" class="section">
  63. 				section05
  64. 			</div>
  65. 		</div>
  66. 	</div>
  67. 	<ul id="scroll_navi">
  68. 		<li id="scroll_navi01"><a href="#section01">section01</a></li>
  69. 		<li id="scroll_navi02"><a href="#section02">section02</a></li>
  70. 		<li id="scroll_navi03"><a href="#section03">section03</a></li>
  71. 		<li id="scroll_navi04"><a href="#section04">section04</a></li>
  72. 		<li id="scroll_navi05"><a href="#section05">section05</a></li>
  73. 	</ul>
  74. </body>
  75. </html>

Report this snippet 

You need to login to post a comment.