Scripting: Javascript "Flight Schedule"-ish display

started by Mrblack on May 6, 2004 — RSS Feed

Mrblack Mrblack
Posts: 40

Just to set the perspective here, I'm a server-side programmer but my client-side/Javascript skills are weak so be gentle.

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 haven't seen anything "canned" that does this, but honestly I didn't look too long because most of the javascript "tutorial" sites I found were just a cut-n-paste-fest and nothing that really goes into the programmatic nature of the examples.

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.

Joe Gillespie Joe Gillespie
Posts: 528

JavaScript doesn't support multi-dimensional arrays but you can bluff it with arrays of arrays.

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.

JavaScript arrays are zero-based and you can get the size of the array with the length property.

Have a look at the technique that I've used for scrolling divs (forgetting the fancy jog/shuttle dials) in this month's editorial.

I'd recommend, 'JavaScript the Definitive Guide' by David Flanagan if you aren't up to speed with JavaScript arrays.

Mrblack Mrblack
Posts: 40

First off, very cool article!

Second, I need to have this text scroll automatically, endlessly.  I don't really understand the event model of Javascript; do I need to setup some sort of a timer or something to make this scrolling happen continuously?

Joe Gillespie Joe Gillespie
Posts: 528

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?

Mrblack Mrblack
Posts: 40

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.

Thanks!

Mrblack Mrblack
Posts: 40

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.

Thanks again!

Mrblack Mrblack
Posts: 40

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?

Joe Gillespie Joe Gillespie
Posts: 528

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.

Mrblack Mrblack
Posts: 40

Wow, Javascript is an interesting language...

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!

Mrblack Mrblack
Posts: 40

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!

Maskodok Eko Maskodok Eko
Posts: 171

Jasa SEO Profesional

TOP SEO | Jasa SEO Profesional RajaPoker88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya IDRPoker.COM Agen Texas Poker dan Domino Online Indonesia Terpercaya POKERSTAR88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya D

Kokokmas Kokokma Kokokmas Kokokma
Posts: 104

You know, Sim City Societies had a lot of potential, it was a great concept that was horribly developed and lacked any kind of depth. The idea of individualize buildings functioning independently playing its role in a largely diverse and thriving city.

The new Sim City appears to be the classic Sim City gameplay we saw with SC4, combined with a far better developed version of the Societies concepts. Looking great guys, don't let us down.


You must login to reply