Collapsed space then black space appears in ultimate fade-in slideshow

[cnymike]

1) Script Title: Ultimate Fade-in Slideshow v2.0

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

3) Describe problem: I have read some of the other threads on this but my problem is that when the page loads, the space where the slideshow is to appear is collapsed, then the space opens up to the correct size but a black blank "image" is there, then finally my slideshow begins.

Here is a screencast of the issue...

http://screencast.com/t/NDdhMGZkM

I have tried placing a placeholder image in the script, but that did not help.

Any ideas how to rid the slideshow of the collpasing and then black "image?"

http://www.apgtech.com

[jscheuer1]

The way the slide show works is that once the document has been parsed, the slide show's dimensions are set as specified. That accounts for the collapsed effect.

Since there is no height specified for the containing td, it has to wait until after document parse to 'grow' to its display height.

You could set the height for the td, but we may as well kill two birds with one stone. The black is the default background color for the show. This is only important for .jpg in IE, and then only under certain circumstances, and also for images with transparent sections. For this last though, it's only important that it have some background other than transparent.

To these ends we can add these rules to your stylesheet:

#fadeshow1 {
	width: 769px;
	height: 141px;
}

#fadeshow1, #fadeshow1 .gallerylayer {
	background-color: white!important;
}

Make sure to use the keyword !important as shown, otherwise the background color will not override the scripted style of black.

[cnymike]

John, thanks.

Using a suggestion in another thread, I was able to change the background color to white by changing the .js file.

Is there an advantage to using css instead of changing the .js file.

Thanks for the collapse info as well. I should have realized it was due to not specifying the height of the td. Been so long that I've dealt with tables, I forgot.

Michael

[cnymike]

Another question though... would it be possible to have the background image of the flag as the td background, then when the slideshow loads it would load over the pre-existing image, thus no point at which the space is blank? Or is the initial being blank always going to occur simply because the script works that way and needs that moment to do what it does?

[jscheuer1]

Using css allows you to keep the script intact. This is always to be preferred in case of future problems and/or updates. For the former, you don't have to explain what you did to the script each time you need help with it. With updates there's a better chance that an update will be a drop in replacement, rather than need to be edited to reflect past script changes.

Using css is also an easier way for most folks to keep track of things and then be able to change them further if need be. Say you want a different background color. Will you be more likely to remember the exact location in the script to change, or the css for it? Using css also allows for different backgrounds for different slide shows on the same and/or different pages, all from the same script. Changing the script would require a separate copy of the script for each different background. This wastes bandwidth and could become somewhat unwieldy if attempted on the same page.