Solved

Need help with mouseover function

Posted on 2009-07-12
11
390 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
 
LVL 10

Author Comment

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

Expert Comment

by:HonorGod
ID: 24835295
Please provide 2leveltab.css
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

932 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now