Jump to content

Overlapping JavaScript Instances


vasha23

Recommended Posts

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)

Link to comment
https://forums.phpfreaks.com/topic/150208-overlapping-javascript-instances/
Share on other sites

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;
}

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);}

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;
}

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

 

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;
}

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.