kimbaker Posted August 23, 2010 Share Posted August 23, 2010 I need help with my drop down navigation menu. I'm using it on a website (http://exechouseholdstaffing.com). On the home page, the submenu drops down in front of the featured content glider images like it's supposed to. The problem I'm having is that the submenu drops down behind the slideshow images on other pages (example: http://exechouseholdstaffing.com/nannies.html). I want it to drop down in front of the slideshow images like it does for the featured content glider. Can anyone help? Quote Link to comment Share on other sites More sharing options...
Andy-H Posted August 23, 2010 Share Posted August 23, 2010 Have you tried changing the z-index? Quote Link to comment Share on other sites More sharing options...
kimbaker Posted August 23, 2010 Author Share Posted August 23, 2010 Yes... changing the z-index is how I got the menu to drop in front of the featured content glider images. Quote Link to comment Share on other sites More sharing options...
Andy-H Posted August 23, 2010 Share Posted August 23, 2010 Change: <img style="border-width: 0pt; display: inline; margin-left: 0px; margin-top: 0px;" src="images/nanny4.jpg"> to: <img style="border-width: 0pt; display: inline; margin-left: 0px; margin-top: 0px; z-index: -1;" src="images/nanny4.jpg"> Quote Link to comment Share on other sites More sharing options...
kimbaker Posted August 23, 2010 Author Share Posted August 23, 2010 Where exactly is this code? Quote Link to comment Share on other sites More sharing options...
Andy-H Posted August 23, 2010 Share Posted August 23, 2010 The javascript adds it, from the slideshowimages1.js file, I was using firebug. Try changing line 55 of "fadeslideshow.js" to var $loadingimg=$('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="z-index:-1;position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+';height:'+fadeSlideShow_descpanel.controls[2][2]+'" />') backup the file first tho incase I broke the script. Quote Link to comment Share on other sites More sharing options...
kimbaker Posted August 23, 2010 Author Share Posted August 23, 2010 Thank you for your effort, but it didn't work. This is very aggravating. Quote Link to comment Share on other sites More sharing options...
Andy-H Posted August 24, 2010 Share Posted August 24, 2010 [pre]Last attempt, 1am now [/pre] /* Ultimate Fade-in slideshow (v2.1) * Last updated: Sept 10th, 2009. This notice must stay intact for usage * Author: Dynamic Drive at http://www.dynamicdrive.com/ * Visit http://www.dynamicdrive.com/ for full source code */ //Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize var fadeSlideShow_descpanel={ controls: [['images/x.png',7,7], ['images/restore.png',10,11], ['images/loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images fontStyle: 'normal 11px Verdana', //font style for text descriptions slidespeed: 200 //speed of description panel animation (in millisec) } //No need to edit beyond here... jQuery.noConflict() function fadeSlideShow(settingarg){ this.setting=settingarg settingarg=null var setting=this.setting setting.fadeduration=setting.fadeduration? parseInt(setting.fadeduration) : 500 setting.curimage=(setting.persist)? fadeSlideShow.routines.getCookie("gallery-"+setting.wrapperid) : 0 setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty setting.currentstep=0 //keep track of # of slides slideshow has gone through (applicable in displaymode='auto' only) setting.totalsteps=setting.imagearray.length*(setting.displaymode.cycles>0? setting.displaymode.cycles : Infinity) //Total steps limit (applicable in displaymode='auto' only w/ cycles>0) setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide) setting.oninit=setting.oninit || function(){} setting.onslide=setting.onslide || function(){} if (setting.displaymode.randomize) //randomly shuffle order of images? setting.imagearray.sort(function() {return 0.5 - Math.random()}) var preloadimages=[] //preload images setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains "" for (var i=0; i<setting.imagearray.length; i++){ //preload images preloadimages[i]=new Image() preloadimages[i].src=setting.imagearray[i][0] if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length) setting.longestdesc=setting.imagearray[i][3] } var closebutt=fadeSlideShow_descpanel.controls[0] //add close button to "desc" panel if descreveal="always" setting.closebutton=(setting.descreveal=="always")? '<img class="close" src="'+closebutt[0]+'" style="float:right;cursor:hand;cursor:pointer;width:'+closebutt[1]+'px;height:'+closebutt[2]+'px;margin-left:0" title="Hide Description" />' : '' var slideshow=this jQuery(document).ready(function($){ //fire on DOM ready var setting=slideshow.setting var fullhtml=fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'white', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main slideshow DIV if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.") return } setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide .css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'white'}) .appendTo(setting.$wrapperdiv) var $loadingimg=$('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+';height:'+fadeSlideShow_descpanel.controls[2][2]+'" />') .css({left:setting.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2, top:setting.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}) //center loading gif .appendTo(setting.$wrapperdiv) var $curimage=setting.$gallerylayers.html(fullhtml).find('img').hide().eq(setting.curimage) //prefill both layers with entire slideshow content, hide all images, and return current image if (setting.longestdesc!=""){ //if at least one slide contains a description (feature is enabled) fadeSlideShow.routines.adddescpanel($, setting) if (setting.descreveal=="always"){ //position desc panel so it's visible to begin with setting.$descpanel.css({top:setting.dimensions[1]-setting.panelheight}) setting.$descinner.click(function(e){ //asign click behavior to "close" icon if (e.target.className=="close"){ slideshow.showhidedescpanel('hide') } }) setting.$restorebutton.click(function(e){ //asign click behavior to "restore" icon slideshow.showhidedescpanel('show') $(this).css({visibility:'hidden'}) }) } else{ //display desc panel on demand (mouseover) setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')}) setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('hide')}) } } setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover=false}) if ($curimage.get(0).complete){ //accounf for IE not firing image.onload $loadingimg.hide() slideshow.paginateinit($) slideshow.showslide(setting.curimage) } else{ //initialize slideshow when first image has fully loaded $loadingimg.hide() slideshow.paginateinit($) $curimage.bind('load', function(){slideshow.showslide(setting.curimage)}) } setting.oninit.call(slideshow) //trigger oninit() event $(window).bind('unload', function(){ //clean up and persist if (slideshow.setting.persist) //remember last shown image's index fadeSlideShow.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage) jQuery.each(slideshow.setting, function(k){ if (slideshow.setting[k] instanceof Array){ for (var i=0; i<slideshow.setting[k].length; i++){ if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div slideshow.setting[k][i].innerHTML=null slideshow.setting[k][i]=null } } }) slideshow=slideshow.setting=null }) }) } fadeSlideShow.prototype={ navigate:function(keyword){ var setting=this.setting clearTimeout(setting.playtimer) if (setting.displaymode.type=="auto"){ //in auto mode setting.displaymode.type="manual" //switch to "manual" mode when nav buttons are clicked on setting.displaymode.wraparound=true //set wraparound option to true } if (!isNaN(parseInt(keyword))){ //go to specific slide? this.showslide(parseInt(keyword)) } else if (/(prev)|(next)/i.test(keyword)){ //go back or forth inside slide? this.showslide(keyword.toLowerCase()) } }, showslide:function(keyword){ var slideshow=this var setting=slideshow.setting if (setting.displaymode.type=="auto" && setting.ismouseover && setting.currentstep<=setting.totalsteps){ //if slideshow in autoplay mode and mouse is over it, pause it setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause) return } var totalimages=setting.imagearray.length var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0) : (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1) : Math.min(keyword, totalimages-1) var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image $slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]<setting.dimensions[0])? setting.dimensions[0]/2-imgdimensions[0]/2 : 0}) $slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]<setting.dimensions[1])? setting.dimensions[1]/2-imgdimensions[1]/2 : 0}) setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground .stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete: clearTimeout(setting.playtimer) try{ setting.onslide.call(slideshow, setting.$gallerylayers.eq(setting.fglayer).get(0), setting.curimage) }catch(e){ alert("Fade In Slideshow error: An error has occured somwhere in your code attached to the \"onslide\" event: "+e) } setting.currentstep+=1 if (setting.displaymode.type=="auto"){ if (setting.currentstep<=setting.totalsteps || setting.displaymode.cycles==0) setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause) } }) //end callback function setting.$gallerylayers.eq(setting.fglayer).css({zIndex:999}) //foreground layer becomes background setting.fglayer=setting.bglayer setting.bglayer=(setting.bglayer==0)? 1 : 0 setting.curimage=imgindex if (setting.$descpanel) setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'}) if (setting.imagearray[imgindex][3]) setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3]) if (setting.displaymode.type=="manual" && !setting.displaymode.wraparound){ this.paginatecontrol() } if (setting.$status) //if status container defined setting.$status.html(setting.curimage+1 + "/" + totalimages) }, showhidedescpanel:function(state, showcontrol){ var setting=this.setting var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1] setting.$descpanel.stop().animate({top:endpoint}, fadeSlideShow_descpanel.slidespeed, function(){ if (setting.descreveal=="always" && state=="hide") setting.$restorebutton.css({visibility:'visible'}) //show restore button }) }, paginateinit:function($){ var slideshow=this var setting=this.setting if (setting.togglerid){ //if toggler div defined setting.$togglerdiv=$("#"+setting.togglerid) setting.$prev=setting.$togglerdiv.find('.prev').data('action', 'prev') setting.$next=setting.$togglerdiv.find('.next').data('action', 'next') setting.$prev.add(setting.$next).click(function(e){ //assign click behavior to prev and next controls var $target=$(this) slideshow.navigate($target.data('action')) e.preventDefault() }) setting.$status=setting.$togglerdiv.find('.status') } }, paginatecontrol:function(){ var setting=this.setting setting.$prev.css({opacity:(setting.curimage==0)? 0.4 : 1}).data('action', (setting.curimage==0)? 'none' : 'prev') setting.$next.css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1}).data('action', (setting.curimage==setting.imagearray.length-1)? 'none' : 'next') if (document.documentMode=={ //in IE8 standards mode, apply opacity to inner image of link setting.$prev.find('img:eq(0)').css({opacity:(setting.curimage==0)? 0.4 : 1}) setting.$next.find('img:eq(0)').css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1}) } } } fadeSlideShow.routines={ getSlideHTML:function(imgelement){ var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide? layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0;" />\n' layerHTML+=(imgelement[1])? '</a>\n' : '' return layerHTML //return HTML for this layer }, getFullHTML:function(imagearray){ var preloadhtml='' for (var i=0; i<imagearray.length; i++) preloadhtml+=this.getSlideHTML(imagearray[i]) return preloadhtml }, 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:-1;width:'+fadeSlideShow_descpanel.controls[1][1]+'px;height:'+fadeSlideShow_descpanel.controls[1][2]+'px;cursor:pointer;cursor:hand" />') .appendTo(setting.$wrapperdiv) } }, getCookie:function(Name){ var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return null }, setCookie:function(name, value){ document.cookie = name+"=" + value + ";path=/" } } //edit Could also try $('#mainmenu>li.expand').hover(function() { $('#mainmenu li.expand>div').css({ 'display' : 'none' , 'z-index' : '9999' }).show(150); $(this).addClass('hover'); },function(){ $(this).removeClass('hover'); }); Quote Link to comment Share on other sites More sharing options...
kimbaker Posted August 24, 2010 Author Share Posted August 24, 2010 I fixed it!!! All it took was adding just a little code to the css file: #nanny { z-index:1; } I'm so excited that I figured it out!!! Quote Link to comment Share on other sites More sharing options...
Andy-H Posted August 24, 2010 Share Posted August 24, 2010 Nice one Bed time for me lol Night Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.