?
Solved

Need help with mouseover function

Posted on 2009-07-12
11
Medium Priority
?
413 Views
Last Modified: 2012-05-07
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/styles/2leveltab.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/images/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@somedomain.com?subject=xxxxAnalytics 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=admDefault" title="" style='text-decoration: none;'>Default Views</a>
<a href="adminEdit.html?page=editAdmSummary" 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=editGoal" title="" style='text-decoration: none;'>Add/Edit Goal</a>
</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"))
}
}
}
}

Open in new window

2level.PNG
0
Comment
Question by:aman0711
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
11 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 24835251
You need to show/provide more of your code.

I would think that you don't have the right mouseout event handler...
0
 
LVL 10

Author Comment

by:aman0711
ID: 24835269
complete code is above sir.. dont have anything else now :(
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24835280
So the code in the scrollable area is the contents of"/analytics/static/js/2leveltab.js" ?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 10

Author Comment

by:aman0711
ID: 24835283
yes :)
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24835295
Please provide 2leveltab.css
0
 
LVL 10

Author Comment

by:aman0711
ID: 24835316
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;
}

Open in new window

0
 
LVL 41

Accepted Solution

by:
HonorGod earned 2000 total points
ID: 24836761
Something like this perhaps?
<!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="2leveltab.css" />
  <script type="text/javascript" src="2leveltab.js"></script>
  
  <script type="text/javascript">
          //initialize tab menu, by passing in ID of UL
    var oldOnload = window.onload;
    window.onload = function() {
      if ( oldOnload ) {
        oldOnload();
      }
      initalizetab( "maintab" );
    }
  </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/images/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:g01151@att.com?subject=MyWorld Analytics Portal">CONTACT US</a></li>
        </ul>
 
 
    <!-- end header --></div>
</div>
<div id="admin" class="submenustyle">
  <a href="admin.html?page=admDefault"         title="" style='text-decoration: none;'>Default Views</a>
  <a href="adminEdit.html?page=editAdmSummary" 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=editGoal"        title="" style='text-decoration: none;'>Add/Edit Goal</a>
</div>
</body>
</html>

Open in new window

2leveltab.js.txt
0
 
LVL 10

Author Comment

by:aman0711
ID: 24841902
Sir,  this didnt work :(

Now I am seeing those sub menu items all the item
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 25234257
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.
0
 

Expert Comment

by:South Mod
ID: 25848574
original text AND last comment edited by SouthMod to obfuscate the email address. Image not replaced.
0
 
LVL 10

Author Comment

by:aman0711
ID: 25857431
Please replace the text with this: as it still has some info shown up there.

2level.PNG
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question