Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Drop Down Menus behind embedded object

    Hello, I'm not sure whether to post this here or in the css forum as this problem pertains to both. Now, let's get straight into it. A couple weeks ago I had a problem with a drop down menu script I found on the internet, thanks again to Eldarrion for your help on the matter. However, now I have come across a new problem. The best way to explain the problem is to show you. Here is the problem page. If you hold you're mouse over a nav item you will notice that the drop down menus appear behind the embedded flash media player. I have looked through the code and tried many things. Here is drop down menu script

    menucontent.js
    Code:
    var anylinkmenu1={divclass:'anylinkmenu', inlinestyle:'', linktarget:''} //First menu variable. Make sure "anylinkmenu1" is a unique name!
    anylinkmenu1.items=[
    	["Dynamic Drive", "http://www.dynamicdrive.com/"],
    	["CSS Drive", "http://www.cssdrive.com/"],
    	["JavaScript Kit", "http://www.javascriptkit.com/"],
    	["Coding Forums", "http://www.codingforums.com/"],
    	["JavaScript Reference", "http://www.javascriptkit.com/jsref/"] //no comma following last entry!
    ]
    
    
    
    var anylinkmenu2={divclass:'anylinkmenu', inlinestyle:'width:150px; background:#FDD271', linktarget:'_new'} //Second menu variable. Same precaution.
    anylinkmenu2.items=[
    	["CNN", "http://www.cnn.com/"],
    	["MSNBC", "http://www.msnbc.com/"],
    	["Google", "http://www.google.com/"],
    	["BBC News", "http://news.bbc.co.uk"] //no comma following last entry!
    ]
    
    
    
    var anylinkmenu3={divclass:'anylinkmenucols', inlinestyle:'', linktarget:'secwin'} //Third menu variable. Same precaution.
    anylinkmenu3.cols={divclass:'column', inlinestyle:''} //menu.cols if defined creates columns of menu links segmented by keyword "efc"
    anylinkmenu3.items=[
    	["Dynamic Drive", "http://www.dynamicdrive.com/"],
    	["CSS Drive", "http://www.cssdrive.com/"],
    	["JavaScript Kit", "http://www.javascriptkit.com/"],
    	["Coding Forums", "http://www.codingforums.com/"],
    	["JavaScript Reference", "http://www.javascriptkit.com/jsref/", "efc"],
    	["CNN", "http://www.cnn.com/"],
    	["MSNBC", "http://www.msnbc.com/"],
    	["Google", "http://www.google.com/"],
    	["BBC News", "http://news.bbc.co.uk", "efc"],
    	["News.com", "http://www.news.com/"],
    	["SlashDot", "http://www.slashdot.com/"],
    	["Digg", "http://www.digg.com/"],
    	["Tech Crunch", "http://techcrunch.com"] //no comma following last entry!
    ]
    
    
    var pgamenu={divclass:'anylinkmenu', inlinestyle:'width:150px; background:#BDBDBD', linktarget:''} //Second menu variable. Same precaution.
    pgamenu.items=[
    	["PGA Home", "./paradox_god/index.php"],
    	["Paradox Rock", "./paradox_god/paradoxrock.php"],
    	["Character Bios", "./paradox_god/charbios.php"],
    	["Comic", "./paradox_god/comic.php"]
    ]
    
    var pgamenu2={divclass:'anylinkmenu', inlinestyle:'width:150px; background:#BDBDBD; z-index:100;', linktarget:''} //Second menu variable. Same precaution.
    pgamenu2.items=[
    	["PGA Home", "/paradox_god/index.php"],
    	["Paradox Rock", "/paradox_god/paradoxrock.php"],
    	["Character Bios", "/paradox_god/charbios.php"],
    	["Comic", "/paradox_god/comic.php"]
    ]
    
    var mayamenu={divclass:'anylinkmenu', inlinestyle:'width:150px; background:#BDBDBD; z-index:100;', linktarget:''} //Second menu variable. Same precaution.
    mayamenu.items=[
    	["Maya Home", "/maya/index.php"],
    	["Animations", "/maya/Animations/index.php"],
    	["Model Renders", "/maya/Modeling/index.php"]
    ]


    anylinkmenu.js
    Code:
    //** AnyLink JS Drop Down Menu v2.0- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com
    //** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
    //** January 29th, 2009: Script Creation date
    
    var anylinkmenu={
    
    menusmap: {},
    effects: {delayhide: 200, shadow:{enabled:true, opacity:0.3, depth: [5, 5]}, fade:{enabled:false, duration:500}}, //customize menu effects
    
    dimensions: {},
    
    getoffset:function(what, offsettype){
    	return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]
    },
    
    getoffsetof:function(el){
    	el._offsets={left:this.getoffset(el, "offsetLeft"), top:this.getoffset(el, "offsetTop"), h: el.offsetHeight}
    },
    
    getdimensions:function(menu){
    	this.dimensions={anchorw:menu.anchorobj.offsetWidth, anchorh:menu.anchorobj.offsetHeight,
    		docwidth:(window.innerWidth ||this.standardbody.clientWidth)-20,
    		docheight:(window.innerHeight ||this.standardbody.clientHeight)-15,
    		docscrollx:window.pageXOffset || this.standardbody.scrollLeft,
    		docscrolly:window.pageYOffset || this.standardbody.scrollTop
    	}
    	if (!this.dimensions.dropmenuw){
    		this.dimensions.dropmenuw=menu.dropmenu.offsetWidth
    		this.dimensions.dropmenuh=menu.dropmenu.offsetHeight
    	}
    },
    
    isContained:function(m, e){
    	var e=window.event || e
    	var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
    	while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
    	if (c==m)
    		return true
    	else
    		return false
    },
    
    setopacity:function(el, value){
    	el.style.opacity=value
    	if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported
    		el.style.MozOpacity=value
    		if (el.filters){
    			el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")"
    		}
    	}
    },
    
    showmenu:function(menuid){
    	var menu=anylinkmenu.menusmap[menuid]
    	clearTimeout(menu.hidetimer)
    	this.getoffsetof(menu.anchorobj)
    	this.getdimensions(menu)
    	var posx=menu.anchorobj._offsets.left + (menu.orientation=="lr"? this.dimensions.anchorw : 0) //base x pos
    	var posy=menu.anchorobj._offsets.top+this.dimensions.anchorh - (menu.orientation=="lr"? this.dimensions.anchorh : 0)//base y pos
    	if (posx+this.dimensions.dropmenuw+this.effects.shadow.depth[0]>this.dimensions.docscrollx+this.dimensions.docwidth){ //drop left instead?
    		posx=posx-this.dimensions.dropmenuw + (menu.orientation=="lr"? -this.dimensions.anchorw : this.dimensions.anchorw)
    	}
    	if (posy+this.dimensions.dropmenuh>this.dimensions.docscrolly+this.dimensions.docheight){  //drop up instead?
    		posy=Math.max(posy-this.dimensions.dropmenuh - (menu.orientation=="lr"? -this.dimensions.anchorh : this.dimensions.anchorh), this.dimensions.docscrolly) //position above anchor or window's top edge
    	}
    	if (this.effects.fade.enabled){
    		this.setopacity(menu.dropmenu, 0) //set opacity to 0 so menu appears hidden initially
    		if (this.effects.shadow.enabled)
    			this.setopacity(menu.shadow, 0) //set opacity to 0 so shadow appears hidden initially
    	}
    	menu.dropmenu.setcss({left:posx+'px', top:posy+'px', visibility:'visible'})
    	if (this.effects.shadow.enabled){
    		//menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
    		menu.shadow.setcss({left:posx+anylinkmenu.effects.shadow.depth[0]+'px', top:posy+anylinkmenu.effects.shadow.depth[1]+'px', visibility:'visible'})
    	}
    	if (this.effects.fade.enabled){
    		clearInterval(menu.animatetimer)
    		menu.curanimatedegree=0
    		menu.starttime=new Date().getTime() //get time just before animation is run
    		menu.animatetimer=setInterval(function(){anylinkmenu.revealmenu(menuid)}, 20)
    	}
    },
    
    revealmenu:function(menuid){
    	var menu=anylinkmenu.menusmap[menuid]
    	var elapsed=new Date().getTime()-menu.starttime //get time animation has run
    	if (elapsed<this.effects.fade.duration){
    		this.setopacity(menu.dropmenu, menu.curanimatedegree)
    		if (this.effects.shadow.enabled)
    			this.setopacity(menu.shadow, menu.curanimatedegree*this.effects.shadow.opacity)
    	}
    	else{
    		clearInterval(menu.animatetimer)
    		this.setopacity(menu.dropmenu, 1)
    		menu.dropmenu.style.filter=""
    	}
    	menu.curanimatedegree=(1-Math.cos((elapsed/this.effects.fade.duration)*Math.PI)) / 2
    },
    
    setcss:function(param){
    	for (prop in param){
    		this.style[prop]=param[prop]
    	}
    },
    
    hidemenu:function(menuid){
    	var menu=anylinkmenu.menusmap[menuid]
    	clearInterval(menu.animatetimer)
    	menu.dropmenu.setcss({visibility:'hidden', left:0, top:0})
    	menu.shadow.setcss({visibility:'hidden', left:0, top:0})
    },
    
    getElementsByClass:function(targetclass){
    	if (document.querySelectorAll)
    		return document.querySelectorAll("."+targetclass)
    	else{
    		var classnameRE=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "i") //regular expression to screen for classname
    		var pieces=[]
    		var alltags=document.all? document.all : document.getElementsByTagName("*")
    		for (var i=0; i<alltags.length; i++){
    			if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
    				pieces[pieces.length]=alltags[i]
    		}
    		return pieces
    	}
    },
    
    addDiv:function(divid, divclass, inlinestyle){
    	var el=document.createElement("div")
    	if (divid)
    		el.id=divid
    	el.className=divclass
    	if (inlinestyle!="" && typeof el.style.cssText=="string")
    		el.style.cssText=inlinestyle
    	else if (inlinestyle!="")
    		el.setAttribute('style', inlinestyle)
    	document.body.appendChild(el)
    	return el
    },
    
    getmenuHTML:function(menuobj){
    	var menucontent=[]
    	var frag=""
    	for (var i=0; i<menuobj.items.length; i++){
    		frag+='<li><a href="' + menuobj.items[i][1] + '" target="' + menuobj.linktarget + '">' + menuobj.items[i][0] + '</a></li>\n'
    		if (menuobj.items[i][2]=="efc" || i==menuobj.items.length-1){
    			menucontent.push(frag)
    			frag=""
    		}
    	}
    	if (typeof menuobj.cols=="undefined")
    		return '<ul>\n' + menucontent.join('') + '\n</ul>'
    	else{
    		frag=""
    		for (var i=0; i<menucontent.length; i++){
    			frag+='<div class="' + menuobj.cols.divclass + '" style="' + menuobj.cols.inlinestyle + '">\n<ul>\n' + menucontent[i] + '</ul>\n</div>\n'
    		}
    		return frag
    	}
    },
    
    addEvent:function(targetarr, functionref, tasktype){
    	if (targetarr.length>0){
    		var target=targetarr.shift()
    		if (target.addEventListener)
    			target.addEventListener(tasktype, functionref, false)
    		else if (target.attachEvent)
    			target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)})
    		this.addEvent(targetarr, functionref, tasktype)
    	}
    },
    
    setupmenu:function(targetclass, anchorobj, pos){
    	this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
    	var relattr=anchorobj.getAttribute("rel")
    	dropmenuid=relattr.replace(/\[(\w+)\]/, '')
    	var dropmenuvar=window[dropmenuid]
    	var dropmenu=this.addDiv(null, dropmenuvar.divclass, dropmenuvar.inlinestyle) //create and add main sub menu DIV
    	dropmenu.innerHTML=this.getmenuHTML(dropmenuvar)
    	var menu=this.menusmap[targetclass+pos]={
    		id: targetclass+pos,
    		anchorobj: anchorobj,	
    		dropmenu: dropmenu,
    		revealtype: (relattr.length!=dropmenuid.length && RegExp.$1=="click")? "click" : "mouseover",
    		orientation: anchorobj.getAttribute("rev")=="lr"? "lr" : "ud",
    		shadow: this.addDiv(null, "anylinkshadow", null) //create and add corresponding shadow
    	}
    	menu.anchorobj._internalID=targetclass+pos
    	menu.anchorobj._isanchor=true
    	menu.dropmenu._internalID=targetclass+pos
    	menu.shadow._internalID=targetclass+pos
    	menu.dropmenu.setcss=this.setcss
    	menu.shadow.setcss=this.setcss
    	menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
    	this.setopacity(menu.shadow, this.effects.shadow.opacity)
    	this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOVER event for anchor, dropmenu, shadow
    		var menu=anylinkmenu.menusmap[this._internalID]
    		if (this._isanchor && menu.revealtype=="mouseover" && !anylinkmenu.isContained(this, e)){ //event for anchor
    			anylinkmenu.showmenu(menu.id)
    		}
    		else if (typeof this._isanchor=="undefined"){ //event for drop down menu and shadow
    			clearTimeout(menu.hidetimer)
    		}
    	}, "mouseover")
    	this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOUT event for anchor, dropmenu, shadow
    		if (!anylinkmenu.isContained(this, e)){
    			var menu=anylinkmenu.menusmap[this._internalID]
    			menu.hidetimer=setTimeout(function(){anylinkmenu.hidemenu(menu.id)}, anylinkmenu.effects.delayhide)
    		}
    	}, "mouseout")
    	this.addEvent([menu.anchorobj, menu.dropmenu], function(e){ //CLICK event for anchor, dropmenu
    		var menu=anylinkmenu.menusmap[this._internalID]
    		if ( this._isanchor && menu.revealtype=="click"){
    			if (menu.dropmenu.style.visibility=="visible")
    				anylinkmenu.hidemenu(menu.id)
    			else
    				anylinkmenu.showmenu(menu.id)
    			if (e.preventDefault)
    				e.preventDefault()
    			return false
    		}
    		else
    			menu.hidetimer=setTimeout(function(){anylinkmenu.hidemenu(menu.id)}, anylinkmenu.effects.delayhide)
    	}, "click")
    },
    
    init:function(targetclass){
    	var anchors=this.getElementsByClass(targetclass)
    	for (var i=0; i<anchors.length; i++){
    		this.setupmenu(targetclass, anchors[i], i)
    	}
    }
    
    }


    anylinkmenu.css
    Code:
    /* ######### Default class for drop down menus ######### */
    
    .anylinkmenu{
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    border: 1px solid black;
    border-bottom-width: 0;
    font:12pt;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    line-height: 18px;
    z-index: 100; /* zIndex should be greater than that of shadow's below */
    background:#BDBDBD;
    width: 200px; /* default width for menu */
    }
    
    .anylinkmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    .anylinkmenu ul li a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid black;
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    background:#BDBDBD;
    text-indent: 5px;
    }
    
    .anylinkmenu a:hover{ /*hover background color*/
    background: black;
    color: white;
    }
    
    /* ######### Alternate multi-column class for drop down menus ######### */
    
    
    .anylinkmenucols{
    position: absolute;
    width: 350px;
    left: 0;
    top: 0;
    visibility: hidden;
    border: 1px solid black;
    padding: 10px;
    font: normal 12px Verdana;
    z-index: 100; /*zIndex should be greater than that of shadow's below*/
    background: #E9E9E9;
    }
    
    .anylinkmenucols li{
    padding-bottom: 3px;
    }
    
    .anylinkmenucols .column{
    float: left;
    padding: 3px 8px;
    margin-right: 5px;
    background: #E0E0E0;
    }
    
    .anylinkmenucols .column ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    
    
    /* ######### class for shadow DIV ######### */
    
    
    .anylinkshadow{ /*CSS for shadow. Keep this as is */
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99; /*zIndex for shadow*/
    background: black;
    visibility: hidden;
    }

    And here is the code I wrote to try rectify the problem:

    snippet from index.php
    PHP Code:
                while ($row mysql_fetch_array($result))  {
                    echo 
    sprintf("<center> \n");
                    echo 
    sprintf("<div style='z-index:0;'> \n");
                    echo 
    sprintf("<center> \n");
                    echo 
    sprintf("<embed src='anim.swf' flashvars='flvsrc={$row["id"]}.flv' type='application/x-shockwave-flash' width='560px' height='420px' style='z-index:1;'/>\n"); 


    snippet from sitetemplate.css
    Code:
    div.maincont{
    	float:left;
    	background:url(../backgrounds/image/diamond_plate_metal-bg.png);
    	font-size:90%;
    	#font-size:95%;
    	font-family:Georgia, "Franklin Gothic Medium", "Courier New", Courier, "Times New Roman", serif, Geneva;
    	color:#FFFF99;
    	width:704px;
    	height:1037px;
    	display:table-column;
    	z-index:0;
    }

    I know it's a lot of code, but I don't really know where the problem lies. Thanks in advance.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    Can you show this "live" on a site?

    And what browser are you using to test this with?

    MSIE, up to version 6, will *always* show a <SELECT> right through most anything. Not your code; just the browser. The only way to get rid of that is to hide the <SELECT> when you want something to show in front of it. That is, use "theSelect.style.visibility='hidden';" JS code.

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I did not use select tags.
    Code:
    			<div id="mayamenu" class="anylinkmenu">
    				<ul>
    					<li><a href="/maya/">Maya Home</a></li>
    					<li><a href="/maya/Animations/">Animations</a></li>
    					<li><a href="/maya/renders/">Model Renders</a></li>
    				</ul>
    			</div>
    And I gave a link to the page I'm having a problem with.

    And I test my website against most browsers, IE6-8, Firefox 2.x-3.x, Opera, and Chrome.

    Actually I just checked my site against IE8 and the drop down menus appear at the top of the screen and not to the right of the nav item, so that is another problem.
    Last edited by ParadoxKing; 05-12-2009 at 05:39 PM.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    Sorrry...I now see the link in your first post. DUnno how I missed it before.

    It actually looks pretty good on MSIE, except of course you don't get proper transparency on the PNG at the top.

    But the layout is just totally messed up in both MSIE 6 and FF 3, on my machine. Neither looks close to right. I'd say you have some fundamental layout problems and the menu is just one minor aspect. Sorry, no idea.

    But this also appears to be a CSS problem and nothing directly to do with JavaScript, so really in wrong forum, no?

  • #5
    Regular Coder
    Join Date
    Oct 2007
    Posts
    277
    Thanks
    2
    Thanked 4 Times in 4 Posts
    You need to add wmode="transparent" to your embed I think.

  • #6
    New Coder
    Join Date
    Nov 2008
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks, the wmode="transparent" worked. It looks fine in FF3 to me...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •