Overlapping JavaScript Instances

vasha23 · March 19, 2009

Thanks for all of your help, in advance. I'm VERY new to JavaScript, so please bear with me.

I've built a new site using drop down menus and an image scroller, however when I test the site, the drop down menu is covered up by the image scroller - is there a way for me to have it the other way around?

Thank you again!

(I couldn't find an FAQ, so I'm not sure if there's a particular way I'm supposed to ask a question)

jackpf · March 19, 2009

Uhh...forgive me if I cannot visualise it.

Do you reckon you could post a link or something..?

Or at least some code?

vasha23 · March 19, 2009

Forgive the ugliness of the site right now: http://www.spca.org/site/PageServer?pagename=Test2

Thank you!

darkfreaks · March 19, 2009

can we see the dropdown code ???

vasha23 · March 19, 2009

DROP DOWN MENU

JavaScript

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
	sfEls[i].onmouseover=function() {
		this.className+=" sfhover";
	}
	sfEls[i].onmouseout=function() {
		this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
	}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

CSS

body {
font: 78%/1.5 arial, helvetica, serif;
text-align: center;
padding: 0;
margin: 0;
}

#container {
width: 36em;
background: #5d3ca6;
text-align: left;
border: 0px solid #ccc;
margin: 0 auto;
}

p {
margin: 0 0 0 0;
text-align:center;
}

p#smurf {
background: white;
font-style: italic;
text-align: center;
font-weight: bold;
color: #4e26aa;
}

#smurf strong {
font-size: 1.2em;
color: black;
}

h1 {
height: 108px;
text-indent: -999em;
margin: 1em 0 0 0;
}

#nav, #nav ul {
float: left;
width: 900;
list-style: none;
line-height: 1.5;
background: transparent;
font-weight: bold;
padding: 0;
border: solid #eee;
border-width: 0px 0;
margin: 0 0 0 0;
}

#nav a {

display: block;
width: 10em;
w\idth: 6em;
color: #000000;
text-decoration: none;
padding-left:inherit;
padding-top:.25em;
padding-bottom:.25em;	
text-align:center;	
}

#nav a.daddy {

}

#nav li {
background: transparent;
float: left;
padding: 0;
width: 10%;
}

#nav li ul {
background: white;
position: absolute;
left: -999em;
height: auto;
width: 150;
w\idth: 13.9em;
font-weight: normal;
border-width: 6;
margin: 0;
}

#nav li li {
width: 100%;
text-align:center;
}

#nav li ul a {
width: 100%;
text-align:center;
}



#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
background: #eee;
}

HTML

<HEAD>
<LINK href="http://www.spca.org/pw_active_0309/js/dropdownmenu/menu.css" rel="stylesheet" type="text/css">
    <script src="http://www.spca.org/pw_active_0309/js/dropdownmenu/menu.js" type="text/javascript"></script>
  </HEAD>


<ul id="nav">
<li><a href="#">QuickLinks</a>
	<ul>
		<li><a href="#">Donate</a></li>
		<li><a href="#">Adoptable Animals</a></li>
		<li><a href="#">Animal Surrender</a></li>
		<li><a href="#">Calendar</a></li>
   			<li><a href="#">Contact</a></li>
   			<li><a href="#">Lost/Found Pets</a></li>
   			<li><a href="#">Employment</a></li>
   			<li><a href="#">FAQ</a></li>
   			<li><a href="#">Locations</a></li>                        
   			<li><a href="#">Login/Signup</a></li>            
   			<li><a href="#">Report Cruelty/Abuse</a></li>            
   			<li><a href="#">Spay/Neuter Appointments</a></li>                        
   			<li><a href="#">Volunteer</a></li>                        
	</ul>
</li>

<li><a href="#">Adopt</a>
	<ul>
		<li><a href="#">Adoptable Animals</a></li>
		<li><a href="#">Adoption FAQ</a></li>
		<li><a href="#">Livestock</a></li>
		<li><a href="#">Offsite Adoptions</a></li>
		<li><a href="#">VIP Animals</a></li>
	</ul>
</li>
    
<li><a href="#">Shelters</a>
	<ul>
		<li><a href="#">Dealey Animal Care Center - Dallas</a></li>
		<li><a href="#">Lone Star Campus - Dallas</a></li>
		<li><a href="#">Perry Animal Care Center - McKinney</a></li>
		<li><a href="#">Adoption FAQ</a></li>
		<li><a href="#">Adoption Policy</a></li>
		<li><a href="#">Intake Policy/<br />Reservation Required</a></li>
	</ul>
</li>    
    
<li><a href="#">Clinics</a>
	<ul>
		<li><a href="#">Martin S/N Clinic at Village Fair - Dallas</a></li>
		<li><a href="#">Perry S/N Clinic - McKinney</a></li>
		<li><a href="#">Clinic Services</a></li>
	</ul>
</li>      
    
<li><a href="#">Programs</a>
	<ul>
		<li><a href="#">Compassion Connection</a></li>
		<li><a href="#">Dealey Life Care Cottage</a></li>
		<li><a href="#">DFW Pet Net (Lost/Found)</a></li>
		<li><a href="#">Foster Care</a></li>            
		<li><a href="#">Humane Education</a></li>            
		<li><a href="#">Pet Grief Counseling</a></li>                        
		<li><a href="#">Pet Haven</a></li>            
		<li><a href="#">Pet-O-Meals</a></li>                        
		<li><a href="#">Pet University</a></li>                                    
		<li><a href="#">Rescue & Investigations</a></li>                                    
		<li><a href="#">Volunteer</a></li>                                    
	</ul>
</li>         

<li><a href="#">Events</a>
	<ul>
		<li><a href="#">Event Calendar</a></li>
		<li><a href="#">Paws Cause</a></li>
		<li><a href="#">Strut Your Mutt</a></li>
		<li><a href="#">Pet Flix</a></li>            
		<li><a href="#">Fur Ball</a></li>            
		<li><a href="#">Pet Fest</a></li>            
	</ul>
</li>   
<li><a href="#">Resources</a>
	<ul>
		<li><a href="#">General Pet Care Tips</a></li>
		<li><a href="#">Dog Care Tips</a></li>
		<li><a href="#">Cat Care Tips</a></li>
		<li><a href="#">Surrendering Your Pet</a></li>            
		<li><a href="#">Compassion Connection</a></li>            
		<li><a href="#">Dealey Life Care Cottage</a></li>                        
		<li><a href="#">DFW Animal Control</a></li>            
		<li><a href="#">DFW Area Transfer Partners</a></li>                        
		<li><a href="#">DFW Pet Net (Lost/Found)</a></li>                                    
		<li><a href="#">Pet Grief Counseling</a></li>                                    
		<li><a href="#">Pet Haven</a></li>                                    
		<li><a href="#">Pet-O-Meals</a></li>                                    
		<li><a href="#">Report Animal Cruelty/Abuse</a></li>                                                
	</ul>
</li>    
<li><a href="#">About</a>
	<ul>
		<li><a href="#">Who We Are</a></li>
		<li><a href="#">History</a></li>
		<li><a href="#">FAQ</a></li>
		<li><a href="#">Facilities</a></li>            
		<li><a href="#">Careers</a></li>       
		<li><a href="#">Board of Directors</a></li>            
		<li><a href="#">Leadership Team</a></li>     
		<li><a href="#">Policies</a></li>                                 
		<li><a href="#">Annual Reports</a></li>                                             
</ul>
</li>   
	</ul>
</ul>

CONTENT SLIDER (dynamic drive)

JavaScript

//** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** May 2nd, 08'- Script rewritten and updated to 2.0.
//** June 12th, 08'- Script updated to v 2.3, which adds the following features:
		//1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later.
		//2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former).
		//3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example.

//** July 11th, 08'- Script updated to v 2.4:
		//1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider")
		//2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.

var featuredcontentslider={

//3 variables below you can customize if desired:
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',
bustajaxcache: true, //bust caching of external ajax page after 1st request?
enablepersist: true, //persist to last content viewed when returning to page?

settingcaches: {}, //object to cache "setting" object of each script instance

jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
this.turnpage(this.settingcaches[fcsid], pagenumber)
},

ajaxconnect:function(setting){
var page_request = false
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
	try {
	page_request = new ActiveXObject("Msxml2.XMLHTTP")
	} 
	catch (e){
		try{
		page_request = new ActiveXObject("Microsoft.XMLHTTP")
		}
		catch (e){}
	}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
	page_request = new XMLHttpRequest()
else
	return false
var pageurl=setting.contentsource[1]
page_request.onreadystatechange=function(){
	featuredcontentslider.ajaxpopulate(page_request, setting)
}
document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcache, true)
page_request.send(null)
},

ajaxpopulate:function(page_request, setting){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
	document.getElementById(setting.id).innerHTML=page_request.responseText
	this.buildpaginate(setting)
}
},

buildcontentdivs:function(setting){
var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
for (var i=0; i<alldivs.length; i++){
	if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"
		setting.contentdivs.push(alldivs[i])
			alldivs[i].style.display="none" //collapse all content DIVs to begin with
	}
}
},

buildpaginate:function(setting){
this.buildcontentdivs(setting)
var sliderdiv=document.getElementById(setting.id)
var pdiv=document.getElementById("paginate-"+setting.id)
var phtml=""
var toc=setting.toc
var nextprev=setting.nextprev
if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
	for (var i=1; i<=setting.contentdivs.length; i++){
		phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
	}
	phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
	pdiv.innerHTML=phtml
}
var pdivlinks=pdiv.getElementsByTagName("a")
var toclinkscount=0 //var to keep track of actual # of toc links
for (var i=0; i<pdivlinks.length; i++){
	if (this.css(pdivlinks[i], "toc", "check")){
		if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)
			pdivlinks[i].style.display="none" //hide this toc link
			continue
		}
		pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link
		pdivlinks[i][setting.revealtype]=function(){
			featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
			return false
		}
		setting.toclinks.push(pdivlinks[i])
	}
	else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"
		pdivlinks[i].onclick=function(){
			featuredcontentslider.turnpage(setting, this.className)
			return false
		}
	}
}
this.turnpage(setting, setting.currentpage, true)
if (setting.autorotate[0]){ //if auto rotate enabled
	pdiv[setting.revealtype]=function(){
		featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
	}
	sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on
		featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
	}
	setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation
 this.autorotate(setting)
}
},

urlparamselect:function(fcsid){
var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},

turnpage:function(setting, thepage, autocall){
var currentpage=setting.currentpage //current page # before change
var totalpages=setting.contentdivs.length
var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust
if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly
	return
setting.currentpage=turntopage
setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex
this.cleartimer(setting, window["fcsfade"+setting.id])
setting.cacheprevpage=setting.prevpage
if (setting.enablefade[0]==true){
	setting.curopacity=0
	this.fadeup(setting)
}
if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)
	setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
	setting.onChange(setting.prevpage, setting.currentpage)
}
setting.contentdivs[turntopage-1].style.visibility="visible"
setting.contentdivs[turntopage-1].style.display="block"
if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
	this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")
if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
	this.css(setting.toclinks[turntopage-1], "selected", "add")
setting.prevpage=turntopage
if (this.enablepersist)
	this.setCookie("fcspersist"+setting.id, turntopage)
},

setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
var targetobject=setting.contentdivs[setting.currentpage-1]
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
	if (typeof targetobject.filters[0].opacity=="number") //IE6
		targetobject.filters[0].opacity=value*100
	else //IE 5.5
		targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
	targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
	targetobject.style.opacity=value
setting.curopacity=value
},

fadeup:function(setting){
if (setting.curopacity<1){
	this.setopacity(setting, setting.curopacity+setting.enablefade[1])
	window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)
}
else{ //when fade is complete
	if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)
		setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
	setting.onChange(setting.cacheprevpage, setting.currentpage)
}
},

cleartimer:function(setting, timervar){
if (typeof timervar!="undefined"){
	clearTimeout(timervar)
	clearInterval(timervar)
	if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div
		setting.contentdivs[setting.cacheprevpage-1].style.display="none"
	}
}
},

css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
	return needle.test(el.className)
else if (action=="remove")
	el.className=el.className.replace(needle, "")
else if (action=="add")
	el.className+=" "+targetclass
},

autorotate:function(setting){
window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])
},

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

},


init:function(setting){
var persistedpage=this.getCookie("fcspersist"+setting.id) || 1
var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
this.settingcaches[setting.id]=setting //cache "setting" object
setting.contentdivs=[]
setting.toclinks=[]
setting.topzindex=0
setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)
setting.prevpage=setting.currentpage
setting.revealtype="on"+(setting.revealtype || "mouseover")
setting.curopacity=0
setting.onChange=setting.onChange || function(){}
if (setting.contentsource[0]=="inline")
	this.buildpaginate(setting)
if (setting.contentsource[0]=="ajax")
	this.ajaxconnect(setting)
}

}

CSS

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 0px solid #cccccc
border-bottom-width: 1px;
width: 400px; /*width of featured content slider*/
height: 300px;
}



.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 0px;
background: white;
width: 400px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
color:#000;
}

.pagination{
width: 400px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: #fff;
padding: 0px 0px;
}

.pagination a{
padding: 0 0px;
text-decoration: none; 
color: #ccc;
background: white;
}

.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #cccccc;
}

darkfreaks · March 19, 2009

cleaned up the JS:

sfHover = function() {
   var sfEls = document.getElementById("nav").getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" sfhover";
      };
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      };
   }
}
;if (window.attachEvent) {window.attachEvent("onload", sfHover);}

darkfreaks · March 19, 2009

also check out Jflow

http://www.gimiti.com/kltan/wordpress/?p=32

vasha23 · March 20, 2009

also check out Jflow

http://www.gimiti.com/kltan/wordpress/?p=32

Thank you!

I appreciate you looking at the code and cleaning it up for me, but it doesn't resolve the issue of the overlapping - is this something that can even be corrected?

darkfreaks · March 20, 2009

Cleaned CSS(doubt it will change anything but worth a try):

.sliderwrapper {
position:relative;
overflow:hidden;
border:0 solid #ccc;
border-bottom-width:1px;
width:400px;
height:300px;
}

.sliderwrapper .contentdiv {
visibility:hidden;
position:absolute;
left:0;
top:0;
background:#FFF;
width:400px;
height:100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity:1px;
opacity:1px;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
color:#000;
padding:0;
}

.pagination {
width:400px;
text-align:right;
background-color:#fff;
padding:0;
}

.pagination a {
text-decoration:none;
color:#ccc;
background:#FFF;
padding:0;
}

.pagination a:hover,.pagination a.selected {
color:#000;
background-color:#ccc;
}

vasha23 · March 23, 2009

You were right, it didn't change anything. I've been playing with the z-index settings, but when I set the content scroller to -1, it doesn't display at all.

*tears hair out*

darkfreaks · March 23, 2009

that gives a negative value to the stack order you do not want that

if you want the menu ontop give it a Z-index of 1

Cleaned CSS for menu:

body {
font:78%/1.5 arial, helvetica, serif;
text-align:center;
margin:0;
padding:0;
}

#container {
width:36em;
background:#5d3ca6;
text-align:left;
border:0 solid #ccc;
margin:0 auto;
}

p {
text-align:center;
margin:0;
}

p#smurf {
background:#FFF;
font-style:italic;
text-align:center;
font-weight:700;
color:#4e26aa;
}

#smurf strong {
font-size:1.2em;
color:#000;
}

h1 {
height:108px;
text-indent:-999em;
margin:1em 0 0;
}

#nav,#nav ul {
float:left;
width:900px;
list-style:none;
line-height:1.5;
background:transparent;
font-weight:700;
border:solid #eee;
border-width:0;
margin:0;
padding:0;
}

#nav a {
display:block;
width:6em;
color:#000;
text-decoration:none;
padding-left:inherit;
padding-top:.25em;
padding-bottom:.25em;
text-align:center;
}

#nav li {
background:transparent;
float:left;
width:10%;
padding:0;
}

#nav li ul {
background:#FFF;
position:absolute;
left:-999em;
height:auto;
width:13.9em;
font-weight:400;
border-width:6px;
margin:0;
}

#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul {
left:-999em;
}

#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul {
left:auto;
}

#nav li:hover,#nav li.sfhover {
background:#eee;
}

#nav li li,#nav li ul a {
width:100%;
text-align:center;
}

vasha23 · March 23, 2009

>:(

Still nothing when I try that . . . BOO!

darkfreaks · March 23, 2009

contact me on MSN i'll try to help

Sign In

Overlapping JavaScript Instances

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information