Smooth Menu and Ultimate Fade In Slide Show

**brm_eng** · 01-12-2011, 10:17 PM

1) Script Title: Smooth Navigational Menu (v1.5) AND Ultimate Fade-in slideshow (v2.4)

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

3) Describe problem: I'm using both scripts on the same page and both work well. The only problem is when a menu is hovered and the submenu unfolds, the elements are hidden behind the fade in slide show images. I've seen options for flash elements to add wmode="transparent", but that doesn't seem to work. Any help would be appreciated!

**jscheuer1** · 01-12-2011, 11:43 PM

Open the ddsmoothmenu.css file and add this at the top:

Code:

.ddsmoothmenu, .ddsmoothmenu *, .ddsmoothmenu-v, .ddsmoothmenu-v * {
position: relative;
z-index: 1003!important;
}

And at the end of the same file, add the highlighted as shown:

Code:

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{ /*shadow for NON CSS3 capable browsers*/
position: absolute;
z-index: 1002;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
position: relative;
z-index: 1002;
}

Make sure to clear the cache and refresh the page.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**brm_eng** · 01-13-2011, 02:43 AM

John, thanks for the prompt reply. I modified the file as you suggested and the menu and slideshow are working perfect in Firefox!

I have an IE problem now where the page bounces as the menu is expanded/contracted, and the images are not showing from the slideshow, but that may have been happening prior to my post, I just tried it in IE.

My page is http://beta.nationalmoofest.com/

**jscheuer1** · 01-13-2011, 06:58 AM

OK, there are some issues with the page, and one with my advice (sorry). My mistake was adding position and z-index for:

Code:

.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
position: relative;
z-index: 1002;
}

Revert that (get rid of the highlighted).

Next, there are two opening html tags and the DOCTYPE is misplaced:

Code:

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />

Change that section to look like so:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />

As for the slideshow, no comma (red) after the last item (highlighted) in the imagearray:

Code:

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [615, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/sample1.jpg", "", "", "Carla Jo Carr and the Silver Wings Band"],
		["images/sample2.jpg", "", "", "Carla Jo Carr and the Silver Wings Band"],
		["images/sample3.jpg", "", "", "Carla Jo Carr and the Silver Wings Band"],
		["images/sample4.jpg", "", "", "Carla Jo Carr and the Silver Wings Band"],
	],
	displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 750, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})
</script>

Get rid of that extra comma, and the slideshow will work in IE.

There's a non-fatal error with the menu. You aren't using the second menu:

Code:

<script type="text/javascript">

ddsmoothmenu.init({
	mainmenuid: "smoothmenu1", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	//customtheme: ["#1c5a80", "#18374a"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

ddsmoothmenu.init({
	mainmenuid: "smoothmenu2", //Menu DIV id
	orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
	//customtheme: ["#804000", "#482400"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>

So get rid of that.

Finally, for now - you have three versions of jQuery on the page. You only need one. Change this one as shown:

Code:

<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />

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

/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

And get rid of these two:

Code:

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

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

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

**brm_eng** · 01-13-2011, 02:59 PM

John, again, thanks so much for your help. It seems all problems are now fixed except the page jump in IE. I also checked Opera and it does as well, and have checked on three different PC's.

**brm_eng** · 01-13-2011, 10:10 PM

After googling around, it seems a 'page shift' may be a more accurate description of what's happening. The page will shift down the amount the menu should drop down.

**jscheuer1** · 01-13-2011, 11:01 PM

Opera is good now here, perhaps you have an old cached version of the page in that browser. Try refreshing the page and/or clearing the cache in Opera. It's possible you have an older version of Opera though, one that's acting more like IE. As to that - You still haven't changed the (at the end of the ddsmoothmenu.css file):

Originally Posted by jscheuer1

My mistake was adding position and z-index for:

Code:

.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
position: relative;
z-index: 1002;
}

Revert that (get rid of the highlighted).

Take care of that and make sure the page is using the version without those highlighted lines, and IE will be fine too.

**brm_eng** · 01-14-2011, 01:30 AM

Beautiful! I had modified the last entry in that file, but forgot to upload it! Thanks so much for your help!

Thread: Smooth Menu and Ultimate Fade In Slide Show

Thread Tools

Search Thread

Smooth Menu and Ultimate Fade In Slide Show

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions