Ultimate Fade-in and Spry menu bar conflict?

**newbie1122** · 10-12-2009, 06:47 PM

1) Script Title: Ultimate Fade-in

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

3) Describe problem: Basically the photos within the slideshow never completely fade out. One sees parts of photos yet to come behind them. Note: I set up these pages a couple of months ago before v2.1 was available. I have pages within this site where the Ultimate Fade-in show is working fine [without the Spry menu bar]. Obviously, I would like to avoid rebuilding this page. I am a graphic designer with very little "tech" understanding and am looking for some help to solve this problem. If possible, when replying please be sensitive to my technical ignorance. Thanks in advance.

Slide show not working correctly: http://www.studiodurham.com/indexSD.html

Slide show working fine: http://www.studiodurham.com/proj_c_ware.html

**jscheuer1** · 10-13-2009, 03:39 AM

This is your problem:

Code:

var fadebgcolor="none"

These slide shows must have background, otherwise there is bleed through like you have.

It has nothing to do with the spry menu, but if you are also having the problem of the menu's drop downs appearing behind the slide show at times (I didn't observe this, though it can happen sporadically by browser, session, length of time the show runs, etc.), which is a separate issue. IF that happens at all, it can also be addressed - primarily by upping the z-index for the menu.

That aside, you can set things up so that the background is the image (images_main/bkgrd2.jpg) that you obviously want to have behind them, but getting it to line up with that background image outside the side show can be a little tricky at times.

Adding this to your style section on the page:

Code:

#master0 div {
background: white url(images_main/bkgrd2.jpg) no-repeat 0 -25px;
}

looks like it would do the trick, some tweaking may be required.

**newbie1122** · 10-13-2009, 04:41 AM

Thank you so much! I understand about the need for a background for the show. Sorry for my ignorance, but I don't know where the "style section" is in the code. I looked through the code twice trying to find the #master0 div but could not locate it. Do I take the code you've given in its entirety and replace the fadebgcolor="none" code?

**jscheuer1** · 10-13-2009, 07:36 AM

No need to apologize, place it here as shown in your page's code:

Code:

<link href="../../../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
a:link {
	color: #999;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #999;
}
a:hover {
	text-decoration: underline;
	color: #C00;
}
a:active {
	text-decoration: none;
}
body {
	background-color: #333;
}
#master0 div {
background: white url(images_main/bkgrd2.jpg) no-repeat 0 -25px;
}
-->
</style></head>

<body text="#CCCCCC" onLoad="MM_timelinePlay('Timeline1')">
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr valign="top">
    <td height="75" colspan="4" alig . . .

By way of a partial explanation, the script itself generates the element with the id of master0, and places two divisions inside it to hold the fading images. This style I'm suggesting overrides the script's generated style for those divisions, at least as far as the background property for them goes.

Also, although I believe it is unnecessary in this case, it cannot hurt to add the !important keyword after the directive:

Code:

#master0 div {
background: white url(images_main/bkgrd2.jpg) no-repeat 0 -25px!important;
}

For more information on how the background style property works, see:

http://www.eskimo.com/~bloo/indexdot...colorbg/bg.htm

or your favorite css style reference.

Any more questions, feel free to ask.

Thread: Ultimate Fade-in and Spry menu bar conflict?

Thread Tools

Search Thread

Ultimate Fade-in and Spry menu bar conflict?

Bookmarks

Bookmarks

Posting Permissions