Solved

Need help with mouseover function

Posted on 2009-07-12
11
396 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
  • 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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

 
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 500 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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

856 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