Posted By

EgoAnt on 03/31/11

Tagged

Versions (?)

Last Edited at 03/31/11 08:38am

Statistics

Viewed 641 times

Favorited by 0 user(s)

Related snippets

Vertical Scrolling Pane in HTML / JavaScript

/ Published in: JavaScript

Highlighted TextExpand

<html>
<head>
	<title>Scrolling Field Demonstration</title>
	<script type="text/javascript">
	
		var scrollingPanes = new Array();
		var panePositions = new Array();
		var dupeCount = 0;		//Current number of created duplicates
		var paneHeight = 0;		//Current height of container pane
		var itemHeight = 0;		//Height of item to be duplicated
		var paneOffset = 2;	    //Spacing distance between panes
		var updateSpeed = 60;   //Update frequency in milliseconds, lower is faster
		var allowScroll = true;
	
		function DuplicateDIV(srcDivName,insertDivName)
		{
			try
			{
				dupeCount++;
				var srcDiv = document.getElementById(srcDivName);
				var targetDiv = document.getElementById(insertDivName);
				var newDivId = srcDivName + dupeCount;
				if(srcDiv && targetDiv)
				{
				
					itemHeight = srcDiv.offsetHeight;
				
					var duplicateDiv = document.createElement('div');
					duplicateDiv.innerHTML = srcDiv.innerHTML;
					duplicateDiv.className = srcDiv.className;
					duplicateDiv.setAttribute('id',newDivId);
					targetDiv.appendChild(duplicateDiv);
					panePositions.push(dupeCount * (itemHeight + paneOffset));
					return duplicateDiv;
				}
			}
			catch(err)
			{
				//Handle error here
				alert(err.message);
				return null;
			}

}
		
		function StartScrolling()
		{
		
			var containerPane = document.getElementById("scrollingWindow");
			containerPane.onmouseover = PauseScrolling;
			containerPane.onmouseout = ResumeScrolling;
			
			scrollingPanes.push(document.getElementById("scrollingDiv0"));
			panePositions.push(0);
			
			var requiredHeight = containerPane.offsetHeight;
			var currentHeight = 0;
			while(currentHeight < requiredHeight)
			{
				var newPane = DuplicateDIV("scrollingDiv0","scrollingWindow");
				if(newPane != null)
				{
					currentHeight += newPane.offsetHeight;
					scrollingPanes.push(newPane);
				}
				else
				{
					break;
				}
			}
		
			setInterval("UpdateDivPanes()",updateSpeed);
		}
		
		function PauseScrolling()
		{
			allowScroll = false;
		}
		
		function ResumeScrolling()
		{
			allowScroll = true;
		}
		
		/*
			//Update the current positions of all the duplicated divs
		*/
		function UpdateDivPanes()
		{
			if(allowScroll == true)
			{
				for(var i = 0; i < scrollingPanes.length; i++)
				{
					var thisPane = scrollingPanes[i];
					thisPane.style.top = panePositions[i] + "px";
					panePositions[i]--;
					if(panePositions[i] <= 0 - (itemHeight + paneOffset))
					{
						panePositions[i] = EndPosition();
					}
				}
			}
		}
		
		/*
			//This function calculates what the current bottom-most div is
			//and returns the value of that plus the pane offset value.
		*/
		function EndPosition()
		{
			var maxPosition = 0;
			for(var i = 0; i < scrollingPanes.length; i++)
			{
				if(panePositions[i] > maxPosition)
				{
					maxPosition = panePositions[i];
				}
			}
			
			return maxPosition + itemHeight + paneOffset - 1; //The -1 compensates for the face that everything else is moving by 1 pixel this cycle
			
		}
		
	</script>
	<style>
		*
		{
			font-family: Arial, sans-serif;
			font-size: 12px;
		}
	
	
		.scrollPane
		{
			position: relative;
			width: 300px;
			height: 300px;
			background: #000;
			overflow: hidden;
		}
		
		.scrollItem
		{
			position: absolute;
			width: 300px;
			background: #039;
			color: #fff;
		}
		
		.innerPadding
		{
			padding: 18px;
		}
	</style>
</head>
<body onload="StartScrolling();">

<div id="scrollingWindow" class="scrollPane">
	<div id="scrollingDiv0" class="scrollItem">
		<div class="innerPadding">
			<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>
		</div>
	</div>
</div>

</body>
</html>

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

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.