Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: [DHTML] Cross Browser Image Fader

  1. #1
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default [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
    Last edited by jscheuer1; 07-11-2007 at 03:58 PM. Reason: show added support for image id
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Wow, very nice!

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    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.)

  5. #5
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    Very nice script. Seems to be very flexible as well. Nicely done.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  6. #6
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Quote Originally Posted by Trinithis View Post
    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.

  7. #7
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    FF1.0

    Windows XP
    2.1 GHz
    448 MB RAM

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Not so in Fx3.0, I'm happy to say -- it rivals Opera and Konqueror quite nicely.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  10. #10
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •