I need to write a page that takes a table of data and scrolls it in and endless loop. The only example I can think of like this is how the incoming/outgoing flight schedule looks at an airport.
I'd rather sit down and learn the language properly but for this task I just don't have the time.
Do any of you have any ideas how do to something like this, or can point me in the right direction to do the homework myself?
My target platform is IE 6x and it's for an internal application so I can control the browser version, etc.
Any help is appreciated.
I would make a series of arrays of the columns of data so that they are all indexed to the same counter. Then when you get to the last element, reset to zero.
Have a look at the technique that I've used for scrolling divs (forgetting the fancy jog/shuttle dials) in this month's editorial.
First off, very cool article!
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...
running = 0;
var thebox = document.getElementById("textbox"
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?
This is precisely what I'm looking for, thank you for taking time to clue me in.
I'll be picking up the book you mentioned shortly.
I'll also give this a shot and see if I can get it together.
This is working really slick, thank you again.
Since this is coming from dynamic data, I'm going to have to do some calculations on the fly to get the exact box sizes, but It think I can get what I need there. I also have to give some thought as to when I want to make a call back to the server for "fresh" data.
Ok, one more question
So, I was able to dynamically calculate the size of the box based on the rows returned from the database; Now I need to stop the scrolling when I get to the bottom of the list.
I tried using the "stop()" function from the news ticker example but it doesn't stop the scrolling. I don't see any kind of traditional "loop" in the code, I'm guessing that it's calling itself recursively?
Yes, it is recursive. To stop it just clear the timeOut
Look at the source of http://www.wpdfd.com/editorial/ticker.htm
and you will see the correct syntax.
I got it figured out, I'm only calling setTimeout() as long as I want the screen to scroll.
Now the only problem I have is that some of my columns are wrapping and screwing up my pixel-counting formula, but that's a problem I know how to handle.
Thanks again for the help!
OK I kinda cheated.
Instead of using two boxes to give the impression of a seamless scrolling, I simply start the first box off the page, scroll it off the top of the page, and then do a reload to start over.
In my case this makes the most sense since I need to reload the page at some point to get a fresh set of data from the database.
Thanks again for the help!
You must login to reply