Aim
The aim is to a have a container DIV with a fixed height and width and have
the HTML content
within that DIV automatically scroll vertically continuously.
Question
Basically I've created
the code below using jQuery to scroll (move)
the child DIV vertically upwards until its outside
the bounding parent box where
the animation then completes which triggers an event handler which resets
the position of
the child DIV and starts
the process again.
This works fine, so
the content scrolls up leaving a blank space and then starts from
the bottom again and scrolls up.
The problem I have is that
the requirements for this is for
the content to appear as if it was continuously repeating, see below diagram to better explain this, is there a way to do this? (I don't want to use 3rd party plug ins or libraries other than jQuery):
What I have so far
The HTML:
<div id="scrollingContainer">
<div class="scroller">
<h1>This is a title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at orci mi, id gravida tellus. Integer malesuada ante sit amet enim pulvinar congue. Donec pulvinar dolor et arcu posuere feugiat id et felis.</p>
<p>More content....</p>
</div>
</div>
The CSS:
#scrollingContainer{
height: 300px;
width: 300px;
overflow: hidden;
}
#scrollingContainer DIV.scroller{
position: relative;
}
The JavaScript:
/**
* Scrolls
the content DIV
*/
function scroll() {
if($('DIV.scroller').height() > $('#scrollingContainer').height()) {
var t = $('DIV.scroller').position().top + $('DIV.scroller').height();
/* Animate */
$('DIV.scroller').animate(
{
top: '-=' + t + 'px'
}
, 4000, 'linear', animationComplete);
}
}
function animationComplete() {
$(this).css('top', $('#scrollingContainer').height());
scroll();
}
