Revision: 43824
Updated Code
at April 1, 2011 07:34 by EgoAnt
Updated Code
<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>
Revision: 43823
Updated Code
at March 31, 2011 09:01 by EgoAnt
Updated Code
<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.setAttribute("onmouseover","PauseScrolling(); return false;");
containerPane.setAttribute("onmouseout","ResumeScrolling(); return false;");
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>
Revision: 43822
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at March 31, 2011 08:38 by EgoAnt
Initial Code
<html>
<head>
<title>Scrolling Field Demonstration</title>
<script type="text/javascript">
var dupeCount = 0;
var scrollingPanes = new Array();
var panePositions = new Array();
var paneHeight = 200;
var itemHeight = 100;
var paneOffset = 0;
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);
return duplicateDiv;
}
}
catch(err)
{
//Handle error here
alert(err.message);
return null;
}
}
function StartScrolling()
{
var containerPane = document.getElementById("scrollingWindow");
containerPane.setAttribute("onmouseover","PauseScrolling(); return false;");
containerPane.setAttribute("onmouseout","ResumeScrolling(); return false;");
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;
}
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)
{
panePositions[i] = EndPosition();
}
}
}
}
function EndPosition()
{
var maxPosition = 0;
for(var i = 0; i < scrollingPanes.length; i++)
{
if(panePositions[i] > maxPosition)
{
maxPosition = panePositions[i];
}
}
return maxPosition + itemHeight - 1;
}
</script>
<style>
*
{
font-family: Arial, sans-serif;
font-size: 10px;
}
.scrollPane
{
position: relative;
width: 300px;
height: 200px;
background: #cfcfcf;
overflow: hidden;
}
.scrollItem
{
position: absolute;
width: 300px;
background: #ffccff;
margin-bottom: 2px;
}
</style>
</head>
<body onload="StartScrolling();">
<div id="scrollingWindow" class="scrollPane">
<div id="scrollingDiv0" class="scrollItem">
<p>This is a test! I really hope it works!</p>
<ul>
<li>This is just a list of items!</li>
<li>Code</li>
<li>Monkeys</li>
<li>Rule</li>
<li>They</li>
<li>Really</li>
<li>Really, really, really</li>
<li>Rule!</li>
</ul>
</div>
</div>
</body>
</html>
Initial URL
http://egoant.com/tutorials/snippets/div-scroller.html
Initial Description
Initial Title
Vertical Scrolling Pane in HTML / JavaScript
Initial Tags
Initial Language
JavaScript