Automatically vertically scroll div contents looping

Question

I am trying to find a simple way to have a div with just text in it automatically scroll the text vertically. I don't want to use a framework (though I do use Prototype, so if it is easier using Prototype then that is fine, but no Scriptalicious).

I assume there has got to be a way to do this with a few lines of code, but I am not familiar enough with Javascript to know how to most effectively do that.

Answer 1

This might not be conventional but you can try the <marquee> tag

it works both in IE and FF, and the last time I checked, safari too.

<marquee behavior="scroll" direction="up" height="250" 
   scrollamount="2" scrolldelay="10"">
  Your content goes here
</marquee>

should give you what you want,
and you can style them like any <div>...
and then there is the added advantage of having no javascript...

Edit in response to your comment

It gets better, try this in any browser

onmouseover="this.stop()" onmouseout="this.start()"

And this in IE

style="filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=0,
FinishOpacity=100, 
Style=1, StartX=0,  FinishX=0, StartY=0, FinishY=10) 
progid:DXImageTransform.Microsoft.Alpha( Opacity=100, FinishOpacity=0, 
Style=1, StartX=0, FinishX=0, StartY=90, FinishY=100)" 

As attributes of the marquee tag...

Answer 2

function scrollDivUp(id){
    document.getElementById(id).scrollTop-=1
    timerUp=setTimeout("scrollDivUp('"+id+"')",10)
}

try something like that maybe.

you could also change the .scrollTop-=1 to .scrollTop+=1 to scroll the other way.

You would also need a scrollable div which can be done by constraining the size and setting the overflow style property ie. style="width:200px; height:300px; overflow:auto"

Answer 3

Try changing the div's scrollTop. There is an example here.

Answer 4

I see that the correct answer isn't given yet. I think you have to look at cloneNode() for instance. And clone the element you want to scroll. When the first element is at the last point of scrolling then place the duplicated element after the first element. And when that duplicated element is almost at the end, place the original after the duplicate and so on!