Advanced Search

Vertical Scrolling Pane in HTML / JavaScript

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <html>
  2. <head>
  3. 	<title>Scrolling Field Demonstration</title>
  4. 	<script type="text/javascript">
  5.  
  6. 		var scrollingPanes = new Array();
  7. 		var panePositions = new Array();
  8. 		var dupeCount = 0;		//Current number of created duplicates
  9. 		var paneHeight = 0;		//Current height of container pane
  10. 		var itemHeight = 0;		//Height of item to be duplicated
  11. 		var paneOffset = 2;	    //Spacing distance between panes
  12. 		var updateSpeed = 60;   //Update frequency in milliseconds, lower is faster
  13. 		var allowScroll = true;
  14.  
  15. 		function DuplicateDIV(srcDivName,insertDivName)
  16. 		{
  17. 			try
  18. 			{
  19. 				dupeCount++;
  20. 				var srcDiv = document.getElementById(srcDivName);
  21. 				var targetDiv = document.getElementById(insertDivName);
  22. 				var newDivId = srcDivName + dupeCount;
  23. 				if(srcDiv && targetDiv)
  24. 				{
  25.  
  26. 					itemHeight = srcDiv.offsetHeight;
  27.  
  28. 					var duplicateDiv = document.createElement('div');
  29. 					duplicateDiv.innerHTML = srcDiv.innerHTML;
  30. 					duplicateDiv.className = srcDiv.className;
  31. 					duplicateDiv.setAttribute('id',newDivId);
  32. 					targetDiv.appendChild(duplicateDiv);
  33. 					panePositions.push(dupeCount * (itemHeight + paneOffset));
  34. 					return duplicateDiv;
  35. 				}
  36. 			}
  37. 			catch(err)
  38. 			{
  39. 				//Handle error here
  40. 				alert(err.message);
  41. 				return null;
  42. 			}
  43.  
  44. 		}
  45.  
  46. 		function StartScrolling()
  47. 		{
  48.  
  49. 			var containerPane = document.getElementById("scrollingWindow");
  50. 			containerPane.onmouseover = PauseScrolling;
  51. 			containerPane.onmouseout = ResumeScrolling;
  52.  
  53. 			scrollingPanes.push(document.getElementById("scrollingDiv0"));
  54. 			panePositions.push(0);
  55.  
  56. 			var requiredHeight = containerPane.offsetHeight;
  57. 			var currentHeight = 0;
  58. 			while(currentHeight < requiredHeight)
  59. 			{
  60. 				var newPane = DuplicateDIV("scrollingDiv0","scrollingWindow");
  61. 				if(newPane != null)
  62. 				{
  63. 					currentHeight += newPane.offsetHeight;
  64. 					scrollingPanes.push(newPane);
  65. 				}
  66. 				else
  67. 				{
  68. 					break;
  69. 				}
  70. 			}
  71.  
  72. 			setInterval("UpdateDivPanes()",updateSpeed);
  73. 		}
  74.  
  75. 		function PauseScrolling()
  76. 		{
  77. 			allowScroll = false;
  78. 		}
  79.  
  80. 		function ResumeScrolling()
  81. 		{
  82. 			allowScroll = true;
  83. 		}
  84.  
  85. 		/*
  86. 			//Update the current positions of all the duplicated divs
  87. 		*/
  88. 		function UpdateDivPanes()
  89. 		{
  90. 			if(allowScroll == true)
  91. 			{
  92. 				for(var i = 0; i < scrollingPanes.length; i++)
  93. 				{
  94. 					var thisPane = scrollingPanes[i];
  95. 					thisPane.style.top = panePositions[i] + "px";
  96. 					panePositions[i]--;
  97. 					if(panePositions[i] <= 0 - (itemHeight + paneOffset))
  98. 					{
  99. 						panePositions[i] = EndPosition();
  100. 					}
  101. 				}
  102. 			}
  103. 		}
  104.  
  105. 		/*
  106. 			//This function calculates what the current bottom-most div is
  107. 			//and returns the value of that plus the pane offset value.
  108. 		*/
  109. 		function EndPosition()
  110. 		{
  111. 			var maxPosition = 0;
  112. 			for(var i = 0; i < scrollingPanes.length; i++)
  113. 			{
  114. 				if(panePositions[i] > maxPosition)
  115. 				{
  116. 					maxPosition = panePositions[i];
  117. 				}
  118. 			}
  119.  
  120. 			return maxPosition + itemHeight + paneOffset - 1; //The -1 compensates for the face that everything else is moving by 1 pixel this cycle
  121.  
  122. 		}
  123.  
  124. 	</script>
  125. 	<style>
  126. 		*
  127. 		{
  128. 			font-family: Arial, sans-serif;
  129. 			font-size: 12px;
  130. 		}
  131.  
  132.  
  133. 		.scrollPane
  134. 		{
  135. 			position: relative;
  136. 			width: 300px;
  137. 			height: 300px;
  138. 			background: #000;
  139. 			overflow: hidden;
  140. 		}
  141.  
  142. 		.scrollItem
  143. 		{
  144. 			position: absolute;
  145. 			width: 300px;
  146. 			background: #039;
  147. 			color: #fff;
  148. 		}
  149.  
  150. 		.innerPadding
  151. 		{
  152. 			padding: 18px;
  153. 		}
  154. 	</style>
  155. </head>
  156. <body onload="StartScrolling();">
  157.  
  158. <div id="scrollingWindow" class="scrollPane">
  159. 	<div id="scrollingDiv0" class="scrollItem">
  160. 		<div class="innerPadding">
  161. 			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis, tellus ac tincidunt volutpat, nibh nisl mattis eros, in condimentum lectus mauris quis diam. Mauris et tellus elit. Duis feugiat congue vestibulum. Cras commodo elit nec est porttitor malesuada. Nunc adipiscing placerat urna eu lobortis. Vestibulum mauris justo, suscipit eget tristique non, elementum quis velit. Pellentesque elementum, nisi ac tempor tincidunt, ligula nulla accumsan nisi, in scelerisque magna enim sed lacus. Vivamus orci tortor, pulvinar ut aliquet eu, dictum fermentum diam. Suspendisse potenti. Sed sem leo, commodo ac pharetra eu, iaculis non odio.</p>
  162. 		</div>
  163. 	</div>
  164. </div>
  165.  
  166. </body>
  167. </html>

URL: http://egoant.com/tutorials/snippets/div-scroller.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.