Multiple scripts on one page

[marnieg]

1) Script Title: anylinkmenu.js and fadeslideshow.js

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

3) Describe problem:

I have a website where I am using two javascripts that I downloaded from dynamicdrive. One for the drop down menu and one for the slide show. When I try to use the drop down menu it is hiding behind the slide show images. Anyone else have this problem.

The drop down menu is the anylinkmenu.js and the slide show is the fadeslideshow.js

My web address is www.citrusedc.net

Thanks for any help in this matter.

[azoomer]

try this css

#fadeshow2 {
z-index: 1;
}

[jscheuer1]

You will lose your mouseover pause with that. The alternative is to raise the z-index of the menu. It's a little more complicated:

.anylinkmenu {
	z-index: 1101;
}

.anylinkshadow {
	z-index: 1100;
}

Add to the end of your anylinkmenu.css file.

[marnieg]

Thank you so much the changes to the z-index on the anylinkmenu worked. I'm glad I found this forum. I was sure other people had this issue before. I wasn't familiar with the z-index in the css and need to learn more about it.

Thanks!

[jscheuer1]

You can Google z-index. But basically it's how things appear on the z-axis. The x-axis is width, the y-axis is height, and the z-axis is depth. However, unlike width and height that apply in almost all situations, for z-index to take effect you need to also have position relative, absolute, or fixed on all elements involved in the z-axis stacking. The higher z-index on elements positioned as mentioned allows them to appear over the lower z-index elements whenever one or more of them are trying to occupy some of the same space on the page.