One script's images covering up another's - way to designate which is on top?

[camax]

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

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm and http://www.dynamicdrive.com/dynamicindex1/hvmenu/index.htm

3) Describe problem: I realize HV Menu isn't supported here, but perhaps someone has run into this problem and has a fix. These two scripts do not appear to conflict at all, however I am using the slideshow right underneath the menu on one page, and on that page, then menu appear to be dropping behind the slideshow, so you can't see the drop down portions of the menu at all. In graphics terms, it seems like the menu options are on a lower layer than the slideshow images. Is there any resolution to this, where I could make sure the menu is dropping down over top of the slideshow images instead?

Thank you!

~Cam

[camax]

If it helps to have a visual:

http://depts.washington.edu/uwactest/index.html

You can see the slideshow working on the large main images on the home page. You can also see the rollovers for the main bar of the navigation, but the submenus are dropping behind the slideshow. If you navigate to any other page, you will see the menu working fine, because there are just static images on all the other pages.

Anyone have a suggestion to try? Thanks!

~Cam

[jscheuer1]

This is a weird one because the HV menu doesn't offer any obvious style hooks for increasing its z-index value, which is the normal way to deal with this sort of thing.

However, the slide show does offer a hook for decreasing its z-index.

That's the first thing I would try, add this to your stylesheet:


#homeslideshow {
z-index: -1;
}

Since you have no links in the show, this should work out OK. It does in limited testing here. Your results may vary.

Another approach would be to add this script after the external script tag to jQuery:


<script type="text/javascript">
(function($){
$(window).bind('load', function(){
setTimeout(function(){$('div').not('#homeslideshow, #homeslideshow *').css('zIndex', 10000)}, 300);
}
})(jQuery);
</script>

This also appears to work here in limited testing, and though a bit more complex, is more adaptable and in keeping with what should be done here.

[camax]

Thank you so much jscheuer1! I did the first thing you suggested I try, adding the code to the style sheet, and it did exactly what I was hoping and what you were intending. Works in both Firefox and IE.

I can tell from the second coding option that you are more advanced than my current javascript understanding, so hopefully the first option is all I will need in this case, though I look forward to learning more in the future to be able to code like that to avoid troubles like this.

~Cam