aman0711
asked on
Need help with mouseover function
Hi Experts,
I am using a javascript for 2 level horizontal menu. Like the one in snapshot.. When you mouse over Admin, you see the horizontal menu below that.
This is working fine. but the problem is I want the menu to disappear whenever I move my mouse away from ADMIN.
Right now its not going away once i mouseover ADMIN. i have attached the javascript. and BELOW is my HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/analytics/static/st yles/2leve ltab.css" />
<script type="text/javascript" src="/analytics/static/js/ 2leveltab. js">
</script>
</head>
<body>
<div id="page-wrapper">
<div id="header"><!-- begin header -->
<h1 class="hidden">Intranet Site</h1>
<!-- hidden titles for accessibility and SEO -->
<h2 class="hidden">Intranet Site Homepage</h2>
<h1 id="title"><a href="index.html" title=""><img
alt="" src="/analytics/static/ima ges/header -title.jpg " /></a></h1>
<ul id="maintab" class=" nav-bar">
<li class="current"><a href="index.html" title="Home">SUMMARY</a></ li>
<li>KPI</li>
<li>TRANSACTION</li>
<li>ERRORS</li>
<li>REVENUE</li>
<li>CALL OFFLOAD</li>
<li rel="admin"><a href="admin.html" title="Admin Console">ADMIN</a></li>
<li><a href="mailto:someuser@some domain.com ?subject=x xxxAnalyti cs Portal">CONTACT US</a></li>
</ul>
<script type="text/javascript">
//initialize tab menu, by passing in ID of UL
initalizetab("maintab");
</script>
<!-- end header --></div>
</div>
<div id="admin" class="submenustyle">
<a href="admin.html?page=admD efault" title="" style='text-decoration: none;'>Default Views</a>
<a href="adminEdit.html?page= editAdmSum mary" title="" style='text-decoration: none;'>Add/Edit Defaults</a>
<a href="goal.html?page=goal" title="" style='text-decoration: none;'>Goals Summary</a>
<a href="goalEdit.html?page=e ditGoal" title="" style='text-decoration: none;'>Add/Edit Goal</a>
</div>
</body>
</html>
I am using a javascript for 2 level horizontal menu. Like the one in snapshot.. When you mouse over Admin, you see the horizontal menu below that.
This is working fine. but the problem is I want the menu to disappear whenever I move my mouse away from ADMIN.
Right now its not going away once i mouseover ADMIN. i have attached the javascript. and BELOW is my HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/analytics/static/st
<script type="text/javascript" src="/analytics/static/js/
</script>
</head>
<body>
<div id="page-wrapper">
<div id="header"><!-- begin header -->
<h1 class="hidden">Intranet Site</h1>
<!-- hidden titles for accessibility and SEO -->
<h2 class="hidden">Intranet Site Homepage</h2>
<h1 id="title"><a href="index.html" title=""><img
alt="" src="/analytics/static/ima
<ul id="maintab" class=" nav-bar">
<li class="current"><a href="index.html" title="Home">SUMMARY</a></
<li>KPI</li>
<li>TRANSACTION</li>
<li>ERRORS</li>
<li>REVENUE</li>
<li>CALL OFFLOAD</li>
<li rel="admin"><a href="admin.html" title="Admin Console">ADMIN</a></li>
<li><a href="mailto:someuser@some
</ul>
<script type="text/javascript">
//initialize tab menu, by passing in ID of UL
initalizetab("maintab");
</script>
<!-- end header --></div>
</div>
<div id="admin" class="submenustyle">
<a href="admin.html?page=admD
<a href="adminEdit.html?page=
<a href="goal.html?page=goal"
<a href="goalEdit.html?page=e
</div>
</body>
</html>
var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""
function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}
function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display="none"
}
function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}
function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}
function initalizetab(tabid){
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className=="selected")
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}
2level.PNG
ASKER
complete code is above sir.. dont have anything else now :(
So the code in the scrollable area is the contents of"/analytics/static/js/2l eveltab.js " ?
ASKER
yes :)
Please provide 2leveltab.css
ASKER
Here :)
.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
margin-bottom: 0;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 2px;
border: 1px solid gray;
border-bottom: none;
background-color: white;
color: black;
}
.basictab li a:visited{
color: black;
}
.basictab li a:hover{
background-color: #dbffff;
color: black;
}
.basictab li a:active{
color: black;
}
.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #dbffff;
color: black;
}
.submenustyle{
padding: 2px 1px;
border: 1px solid black;
border-top-width: 0;
width: auto;
display: none;
filter:alpha(opacity=0);
-moz-opacity:0;
}
* html .submenustyle{ /*IE only width definition*/
width: 100%;
}
.submenustyle a{
border-right: 1px dashed black;
padding: 1px 5px;
text-decoration: none;
}
.submenustyle a:hover{
background-color: #ebffff;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Sir, this didnt work :(
Now I am seeing those sub menu items all the item
Now I am seeing those sub menu items all the item
I'm glad that this helped.
I'm sorry that I missed your update on 7/13/.
Thanks for the grade & points.
Good luck & have a great day.
I'm sorry that I missed your update on 7/13/.
Thanks for the grade & points.
Good luck & have a great day.
original text AND last comment edited by SouthMod to obfuscate the email address. Image not replaced.
ASKER
I would think that you don't have the right mouseout event handler...