[DHTML] Cross Browser Image Fader

1) CODE TITLE: Cross Browser Image Fader

2) AUTHOR NAME/NOTES: John Davenport Scheuer (jscheuer1)

3) DESCRIPTION: A very easy to use image fader. No knowledge of opacity styles or filters required. The script determines what the browser supports and writes the style on the fly. All you need to configure is an array of the image's id's and initial opacities, ex:

Code:

---

var faders=[];
// Preset each image's initial opacity (0 to 100):
// ex:  faders[x]=['image_id', initial_opacity];
faders[0]=['mona', 50];
faders[1]=['arch', 0];

---

Works in all browsers that support any type of opacity style or filter.

Syntax:

Code:

---

fade(image_element_OR_'image_id', 'in_OR_out', target_opacity, opacity_increment, timeout_interval)

---

Opacity, increment, and interval are optional.

4) URL TO CODE: http://home.comcast.net/~jscheuer1/s...eset_write.htm

Wow, very nice!

Thanks! I just made a few minor upgrades. The only one that affects the user is that the fade() function now accepts either the image element or its quoted id value as the first argument. The code was improved to facilitate this and to make more efficient use of the image's id in its subroutines. The demo page has been updated as well. A:

Code:

---

////////////// Stop Editing //////////////

---

line was added to the script to show where the novice should start minding his/her own business.

Can you set the fade in time to differ from the fade out time?

Anyway, looks great, but the code slows down on my computer when the arch is fading out and the mona is fading in at the same time. (Probably not a real issue.)

Very nice script. Seems to be very flexible as well. Nicely done.

Quote:

---

Originally Posted by Trinithis

Can you set the fade in time to differ from the fade out time?

Anyway, looks great, but the code slows down on my computer when the arch is fading out and the mona is fading in at the same time. (Probably not a real issue.)

---

What's the spec on your computers? I recken when you have multiple fade instances running (as you do in this case), you may notice an increase in system resource temporarily.

FF1.0

Windows XP
2.1 GHz
448 MB RAM

You might be a little low on RAM there, Trinithis. Also, the more recent versions of FF process this type of code better. FF has been, and although it is improving, continues to be a bit slow at repetitive math in javascript. Even having two javascript marquees on one page can cause it to get jerky.

To answer your other question, yes.

Not so in Fx3.0, I'm happy to say -- it rivals Opera and Konqueror quite nicely.

Sadly, I'm stuck with 1.0.7 for the time being.

I use dial-up (I know :() and for some obscure reason, more recent (and some older) versions of FF randomly hang my connection. I don't have this issue with IE or this crappy Yahoo browser (but who wants to use those?).

I've tried fixing the problem, but since I don't know what to really do, I Googled for answers that were of no help.

I've tried FF2 and it was cool because of all these neat extensions I could use, but the threat of having to re-dial was annoying enough to send me back to the dark ages. Fortunately, I have access to an old version of Adblock.