Hi all,

I am trying to create a similar navigation to the one front and center on this page: www.fda.gov . I can't fully follow how it works.


What I can't figure out is what triggers changing the right hand portion of the navigation back to what is originally displayed when the site first loads when you mouseout of the navigation area. I know what function is being called, but not where or how.

All help is welcom and appreciated!!

There's a lot of code to wade through on their navigation. I would think they either have an onmouseout even directly on the link or they're calling the function on an onmouseout event directly in one of the .js files. If they're calling it in one of the files it's probably outside any of the functions or in a single function at the end of the file that loads a bunch of things on initialization.

Thanks for the reply. I looked through all the code and still didn't find it, but I'm pretty close with my own site--I have almost everything working right. The only problem I'm having is shown in the attachment.

The content changes appropriately when mousing over the different list items (the 5 pictures across) but when the mouse reaches the red rectangle area that i drew in is when the onmouseout event is triggered even though I have the onmouseout event on the entire div (highlighted in blue). Eventually I will have the portion that says "this is where the rollover content goes" neatened up and it will contain links etc. So you can see why I would not want the content to disappear from an onmouseout event before the mouse reaches that section.

I should mention that the top line of the red rectangle also marks the bottom of the LIs that the mouseover events are on in case that might help. For reference, here are the RemoveAllStyles() and addStyle() functions:

 
function addStyle(x)
{
 removeAllStyle();
 document.getElementById(x).style.display="block";
}
function removeAllStyle()
 {
 removeStyle('feat_hurricane');
 removeStyle('feat_fabrication');
 removeStyle('feat_capsnap');
 removeStyle('feat_medical');
 removeStyle('feat_media');
 }
function removeStyle(x)
 {
 document.getElementById(x).style.display="";
 }

That could be caused by how you styled the navigation. Could you post the html and css for your navigation? If you floated the list or the links or maybe have some padding in there it could be that as far as the DOM is concerned that red outlined area is where your navigation is..

Thanks for the reply vangogh. From what I've read on the internet I think the problem is event bubbling. I know little about this, and I'm having trouble applying what I've read to my own code. I'll include the CSS just in case. Thanks!

html:

 
<div onmouseout="addStyle('feat_main');" >
      <ul>
          <li><a></a></li>
          <li><a></a></li>
          <li><a></a></li>
      </ul>
      <div>
      ...
      </div>
</div>

functions:

 
function addStyle(e, x)
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
 
removeAllStyle();
document.getElementById(x).style.display="block";
}
 
function removeAllStyle()
{
     removeStyle('feat_main');
     removeStyle('feat_hurricane');
     removeStyle('feat_fabrication');
     removeStyle('feat_capsnap');
     removeStyle('feat_medical');
     removeStyle('feat_media');
}

CSS the div inherits:

 * {
margin:0;
padding:0;
 
 
}
 
 
Inherited fromdiv#container
 
#container {
text-align:left;
 
 
}
 
 
Inherited frombody.home
 
body {
color:#484848;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
 
 
}

CSS for the content of the div:

 
#featured {
 height:112px;
 padding:0 0 25px;
/* border-bottom:4px solid #ccc;                       */
}
#featured li {
 text-align:center;
 font-weight:bold;
 list-style:none;
 float:left;
    height:147px;
}
#featured a {
 color:#333972;
 font-size:13px;
 padding-top:112px;
 display:block;
}
 
#featured li.equipment {
 width:162px;
 background:url(../images/bg_featuredEquip.jpg) no-repeat 0 0;
}
 #featured li.equipment:hover {
     background:url(../images/bg_featuredEquip_hover.jpg) no-repeat 0 0;
  }
 
 
#featured li.service {
 width:150px;
 background:url(../images/bg_featuredService.jpg) no-repeat 0 0;
}
 #featured li.service:hover {
      background:url(../images/bg_featuredService_hover.jpg) no-repeat 0 0;
 }
 
 #featured li.capsnap {
 width:153px;
 background:url(../images/bg_featuredCapsnap.jpg) no-repeat 0 0;
 
}
#featured li.capsnap:hover {
      background:url(../images/bg_featuredCapSnap_hover.jpg) no-repeat 0 0;
 }
 
 #featured li.medical {
 width:150px;
 background:url(../images/bg_featuredMedical.jpg) no-repeat 0 0;
}
#featured li.medical:hover {
      background:url(../images/bg_featuredMedical_hover.jpg) no-repeat 0 0;
 
 }
#featured li.tours {
 width:165px;
 background:url(../images/bg_featuredTours.jpg) no-repeat 0 0;
}
#featured li.tours:hover {
      background:url(../images/bg_featuredTours_hover.jpg) no-repeat 0 0;
 }
 
#featured li:hover a{  
    padding-top:112px;
    display:block;
    font-size: 1px; 
}

Sorry I haven't been back to check on this thread in a few days.

What I was thinking before is that maybe because you're floated the list elements and taken them out of the document flow the DOM sees the links in a different location than the person viewing them.

I don't know if any of these are the answer, but I notice #featured has the 25px padding. I'm wondering if that padding is the area which you outlined with the red box. If you take that padding off will the mouseout work? I realize that may not leave things looking how you want, but it could help figure out what's going on.

onmouse over, onmouse out events...Nothing more than that. Surely you can find it on DHTML scripts or similar site.

Thanks for the input, everyone... I found the solution on a different forum. For anyone who's interested, here is the example I was given by vwphillips on codingforums.com

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.t1 {
  position:relative;left:100px;top:100px;width:200px;height:200px;background-Color:#FFFFCC;
}

.t1 DIV {
  position:relative;left:100px;top:100px;width:50px;height:50px;background-Color:#FF9966;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/

function CkMseOut(obj){
var e=window.event||arguments.callee.caller.arguments[0];
document.Show.Show0.value='All Mouse Outs ' +vic++;
if (zxcCkEventObj(e,obj)){
document.Show.Show1.value='Real Mouse Outs ' +tom++;
}
}

function zxcCkEventObj(e,p){
if (!e) var e=window.event;
e.cancelBubble=true;
if (e.stopPropagation) e.stopPropagation();
if (e.target) eobj=e.target;
else if (e.srcElement) eobj=e.srcElement;
if (eobj.nodeType==3) eobj=eobj.parentNode;
var eobj=(e.relatedTarget)?e.relatedTarget:(e.type=='mouseout')?e.toElement:e.fromElement;
if (!eobj||eobj==p) return false;
while (eobj.parentNode){
  if (eobj==p) return false;
  eobj=eobj.parentNode;
}
return true;
}

/*]]>*/
</script>

</head>

<body>
<div class="t1" onmouseout="CkMseOut(this);" ><div  ></div></div>
<script> vic=1; tom=1;</script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:420px;left:0px;" >
<input size=100 name=Show0 >
<input size=100 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>
</body>

</html>