Joe Gillespie said:

Hehe, I've got the scrolling script there too, the newsticker script will show you how to scroll a div under JavaScript.

That is something like the effect that I think you are after except mine is moving the x axis and you want to move the y. Unfortunately, I'm using an image rather than text, which is a lot easier to do because I can use the 'repeat' property of a background image to give endless repeats as I scroll.

When I've done what you want to do in the past, I've use two identical text boxes. One scrolls up to show all its contents, then the second one follows it. The first one is shifted back to the bottom again and follows the second - if you see what I'm getting at. Alternate two idential boxes from the same counter loop.

This will get one working...


var steps=4;
var speed=40;
var y=0;

function run()
   {
       if (running)
       {
       clearTimeout(running);
       running = 0;
       }

   if (document.getElementById)
       {
       y=y-steps;
       var thebox = document.getElementById("textbox"
       thebox.style.position="0px "+y+"px";
       }

   running = setTimeout("run()", speed);
   }

Now, all you have to do is put a switch in there that positions the second box when the first one reaches a certain position. It would help enormously if you knew the height of the box exactly.

As for the CSS, you need to make a div which is your 'view port' and put the other two inside it. The view port div would be set to overflow: hidden; so that when you move the boxes inside it, only the parts inside the viewport are visible.

Is that enough of a clue?