Continuous text slideshow javascript (breaking news bar) - text

Question

I'm trying to create a simple breaking news bar with continuously moving text. A single string of text moving and looping forever, and only stopping on hover. Do you know of any script like that? I've searched a lot but couldn't find one.
Cheers
So far I have this:
<script type="text/javascript">
$(function() {
var ele = $('#scroll');
var speed = 25, scroll = 5, scrolling;
$('#scroll-up').mouseenter(function() {
// Scroll the element up
scrolling = window.setInterval(function() {
ele.scrollLeft( ele.scrollLeft() - scroll );
autoPlay: true;
}, speed);
});
$('#scroll-down').mouseenter(function() {
// Scroll the element down
scrolling = window.setInterval(function() {
ele.scrollLeft( ele.scrollLeft() + scroll );
autoPlay: true;
}, speed);
});
$('#scroll-up, #scroll-down').bind({
click: function(e) {
// Prevent the default click action
e.preventDefault();
},
mouseleave: function() {
if (scrolling) {
window.clearInterval(scrolling);
scrolling = false;
}
}
});
});
</script>
Now I want to make it automatic, and make it loop infinitely. Any help?

Answer 1

Here's something I hacked together based on your sample: http://jsfiddle.net/mcknz/jEGex/
It scrolls from top to bottom and then back to top, but uses vertical space to give the appearance of a loop. Could be made more elegant and dynamic I'm sure.
HTML:
<div id="scroll">
<br /><br /><br /><br /><br />
One<br /><br /><br />
Two<br /><br /><br />
Three<br /><br /><br />
Four<br /><br /><br />
Five<br /><br /><br />
Six<br /><br /><br />
Seven<br /><br /><br />
<br /><br /><br /><br />
</div>
<br>
scroll top: <span id="scrollTop"/>
JavaScript:
$(function() {
var ele = $('#scroll');
var speed = 35,
scroll = 1,
top = 0,
maxTop = 500,
scrolling;
ele.mouseleave(function() {
scrolling = window.setInterval(function() {
top = top === maxTop ? 0 : ele.scrollTop() + scroll;
ele.scrollTop(top);
$('#scrollTop').text(top);
}, speed);
});
ele.mouseenter(function() {
if (scrolling) {
window.clearInterval(scrolling);
scrolling = false;
}
});
ele.mouseleave();
});​
CSS
#scroll {
width: 200px;
height: 100px;
overflow: hidden;
padding: 4px;
border: solid 1px #000;
}​