Ultimate Fade-in slideshow problem on Safari (mac)

[fifty50]

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm


3) Describe problem: In Safari (Mac), if the mouse is positioned over where the slideshow is to appear when the page is loaded, nothing happens UNTIL you mouse out.
I tried pre-loading the images for the slideshow but didn't seem to help.
Works fine LOCALLY.
Works fine after you get the script to run once. But if you empty the cache, problem returns.
Here's a link: http://www.alvesdesign.ca/test/ I create the scenario by loading another page, emptying the cache, pasting the link into the address bar, placing the mouse over the image area, then hitting return.
Script seems to function on other browsers including Safari on PC (!?!!)

Any help would be appreciated. Be kind, I'm a code newbie. Thanx.

[jscheuer1]

The script already does an incremental preload.

I have no Safari Mac to test on. But I was able to duplicate the problem in Firefox and Opera under Win 7. However, as you stated, there was no problem in Safari Win. I also found no problem in IE 9. Try out this modified version (replace fadeslideshow.js with it). Make sure to make the change on the page and make sure to clear the cache to see if it takes effect:

Attachment 4000

What it does is wait until the first image is loaded before instituting the mouseover pause. It fixed it here for the browsers mentioned and I was able to switch repeatedly back and fourth between script versions to assure it wasn't a fluke in those browsers.

I also removed:

    img9 = new Image();
    img9.src = "alves11.jpg";
    img10 = new Image();
    img10.src = "alves12.jpg";
    img11 = new Image();
    img11.src = "alves13.jpg";
    img12 = new Image();
    img12.src = "alves14.jpg";
    img13 = new Image();
    img13.src = "alves15.jpg";
    img14 = new Image();
    img14.src = "alves16.jpg";
    img15 = new Image();
    img15.src = "alves17.jpg";
    img16 = new Image();
    img16.src = "alves18.jpg";
    img17 = new Image();
    img17.src = "alves19.jpg";
    img18 = new Image();
    img18.src = "alves20.jpg";
    img19 = new Image();
    img19.src = "alves21.jpg";
    img20 = new Image();
    img20.src = "alves22.jpg";
    img21 = new Image();
    img21.src = "alves23.jpg";
    img22 = new Image();
    img22.src = "alves24.jpg";
    img23 = new Image();
    img23.src = "alves25.jpg";
    img24 = new Image();
    img24.src = "alves26.jpg";

from the preload routine, this may be important, but appeared to only matter in load time here - faster without it.

I also updated jQuery, this didn't seem to matter though either, but can be important in IE 9. Change:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

to:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

[fifty50]

Hi, John.

Thanks for getting back to me. I'll try the modified code tomorrow and get back to you with the result.

The additional "preload" code (which you deleted) was my feeble attempt to correct the issue. Glad to know it's not needed (adds a lot to pages with many images).

[fifty50]

Hi, John

With the mouse over the area of the image, the script plays, but:
In FireFox, the script does not pause until the mouse is moved slightly (because the cursor is not visible over the image until you do so) - this is acceptable.
In Safari (Mac), the script does not pause until you move the cursor right off the image area and then back again - not so great.

Also, occasionally, the window area beneath the images remains white (I have style.css set the background to black). This is not a big deal but may help you discern what is going on.

Thanx, John.

[jscheuer1]

Oddly enough I can see what you mean in Firefox here, as it again behaves as you described Safari Mac.

Try this version:

Attachment 4006

It adds mousemove to the event to listen for to pause.

About the remaining white below, I had noticed that in one of my browsers, I forget which one. It's not happening now. But I would think or hope that's an unrelated css thing.

Try adding this to your stylesheet:

html, body {
	height: 100%;
	background-color: #000;
}

But setting the body's width and margins as you have done might be a problem. Avoid that by using a container division. Set its width and margins as the body's currently are and skip setting those for the body.

[fifty50]

Hi, John.

Great! FireFox and Safari are now behaving the same on my Mac. FireFox 5.0, Safari 5.0 and IE 7.0 are also behaving on my XP machine. I'd appreciate knowing if your Opera and IE 9 are likewise.

Thank you for your help!

[jscheuer1]

Yes they are.