Menu/Image loading delay (like youtube's "Videos being watched right now")

[ajaxexpo]

I wanted to know how to develop code to load menu objects/images in sequential order just like youtube's "Videos being watched right now".

I am still new to javascript, but it looks like some sort of delay. Is there example code for something similar to this?

[PeejAvery]

My company provides my internet at work and at home. They also block sites that take away productivity, such as Youtube. Can you please explain a little better what you are hoping to accomplish?

[IllegalCharacter]

That's done with Flash, not Javascript - right click on it and you'll see.

You can do something similar (without as much fancy animation) using AJAX, but if you're still new to Javascript then it may not be the best thing to tackle at the moment.

As for delays in Javascript, you can use the setTimeout function:

var timer = setTimeout("myFunc()", 1000);

This will call myFunc() after 1 second. The variable timer will hold the ID of this timeout, in case you want to cancel it with clearTimeout(). If you won't ever want to cancel it, you can just go:

setTimeout("myFunc()", 1000);

[ajaxexpo]

Ah, didn't realize that was flash.

In that case I want to reproduce a similar effect using AJAX. I'm familiar with C, C++, Java, PHP, and html/dhtml; but, not familiar with javascript's functions yet.

I have a set of images I want to load sequentially (one after the other) as well as have each image load gradually (something like 0% opacity to 100% opacity).

For example: I have a set of 4 images.
_______ ________ ________ ________
|______||_______||_______||_______|

I want the first image on the left to take ~1/4 seconds to load from 0% opacity to 100% opacity. Once it loads then the next image loads in the same manner, and so on.

I'm not sure what the correct term for this is.

[IllegalCharacter]

The effect you're trying to do is called chaining. There's Javascript libraries that do this kind of thing. Scriptaculous is a good one: http://script.aculo.us/

You can do something like this:

new Effect.Appear("firstDiv", {
onComplete: function(){
new Effect.Appear("secondDiv");
}
});


There are other ones like Mootools: http://mootools.net/ but having worked extensively with both, I find that Scriptaculous is more straight forward, has better docs (mootools' docs look good, until you actually try to figure something out) and does less things that bite you in the *** later.

[ajaxexpo]

Thanks for the links. It was exactly what I needed.

[IllegalCharacter]

No problem. You'll also find the Prototype library that Scriptaculous is based on very useful when you start learning AJAX. I would recommend looking at this too.