Fade-in slideshow - overlay menu along the bottom

**bchristian** · 12-29-2009, 06:27 PM

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

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

3) Describe problem:
I peaked into the code of the JS file (below where it says mods don't need to be made), and noticed the div containers have a z-index settings around 1000. I'm trying to overlay a menu by putting a div container (menu) inside the fadeslideshow div, and no matter what I make the z-index on the menu container I can't get it to be on top of the slideshow.

I then thought...it should be possible to put it right in the JS file similar to how it creates the description div (for when you have the description on).

Here's the code excerpt for the description panel...

Code:

	adddescpanel:function($, setting){
		setting.$descpanel=$('<div class="fadeslidedescdiv"></div>')
			.css({position:'absolute', visibility:'hidden', width:'100%', left:0, top:setting.dimensions[1], font:fadeSlideShow_descpanel.fontStyle, zIndex:'1001'})
			.appendTo(setting.$wrapperdiv)
		$('<div class="descpanelbg"></div><div class="descpanelfg"></div>') //create inner nav panel DIVs
			.css({position:'absolute', left:0, top:0, width:setting.$descpanel.width()-8, padding:'4px'})
			.eq(0).css({background:'black', opacity:0.7}).end() //"descpanelbg" div
			.eq(1).css({color:'white'}).html(setting.closebutton + setting.longestdesc).end() //"descpanelfg" div
			.appendTo(setting.$descpanel)
		setting.$descinner=setting.$descpanel.find('div.descpanelfg')
		setting.panelheight=setting.$descinner.outerHeight()
		setting.$descpanel.css({height:setting.panelheight}).find('div').css({height:'100%'})
		if (setting.descreveal=="always"){ //create restore button
			setting.$restorebutton=$('<img class="restore" title="Restore Description" src="' + fadeSlideShow_descpanel.controls[1][0] +'" style="position:absolute;visibility:hidden;right:0;bottom:0;z-index:1002;width:'+fadeSlideShow_descpanel.controls[1][1]+'px;height:'+fadeSlideShow_descpanel.controls[1][2]+'px;cursor:pointer;cursor:hand" />')
				.appendTo(setting.$wrapperdiv)


		}
	},

I was thinking that my CSS would be able to simply overlay on the slideshow using the z-index, but it said somewhere that you can't (though i've read elsewhere that it's worked...) So I'm not sure if it's possible, or if I need to put my menu div into the JS file

Unfortunately i'm just not smart enough to figure this out on my own...I need to get a menu, that's always there (really awesome if it could fade in 500ms after the first main image), then stay persistent there as the images behind it transition. I'd also like to have mouseover effects on the menu buttons/links...

Anyway, I hope my question is clear...and sorry i'm a JS newb

Oh...here's a link to the webpage where I'm trying this out

http://www.nettechsolutionsinc.com/dev/rrch/

you can clearly see the slideshow right in the middle and the menu below it. I want that menu on top of the slideshow.

Thank you!

**jscheuer1** · 12-29-2009, 07:38 PM

Change (in your page's HTML code):

HTML Code:

<body>
<div id="wrapper">
<div id="header"></div>
<!-- end #header -->
<div id="menu">
<ul>
<li class="current_page_item"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- end #menu -->

to:

HTML Code:

<body>
<div id="wrapper">
<div id="menu">
<ul>
<li class="current_page_item"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- end #menu -->
<div id="header"></div>
<!-- end #header -->

**bchristian** · 12-29-2009, 07:48 PM

wow i'm dumb lol...Thanks that's fixed it...now i just have to position it right and use css to add mouseover =) i think i can handle that!

Thread: Fade-in slideshow - overlay menu along the bottom

Thread Tools

Search Thread

Fade-in slideshow - overlay menu along the bottom

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

Bookmarks

Bookmarks

Posting Permissions