onMouseOut function to close Drop Down Menu

Hi,

i got this Drop Down Menu Script and its working fine, but the Drop Downs will only dissapear when you click somewhere on the page.
The problem is that the main part of the page is an iframe  and if you click into the iframe the DDMenu will not close and stay open which is very annoying.
I Have tried to solve the problem with an onMouseOut command but i cant get it to work.

the Menu Script and at the end the css file:

<SCRIPT type=text/javascript>
<!--
function Browser() {
  var ua, s, i;

  this.isIE    = false;  <? #// Internet Explorer ?>
  this.isNS    = false;  <? #// Netscape ?>
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

<? // Treat any other "Gecko" browser as NS 6.1. ?>

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}

var browser = new Browser();

<?
#//----------------------------------------------------------------------------
#// Code for handling the menu bar and active button.
#//----------------------------------------------------------------------------
?>
var activeButton = null;

<?
#// Capture mouse clicks on the page so any active button can be
#// deactivated.
?>

if (browser.isIE)
  document.onmousedown = pageMousedown;
else
  document.addEventListener("mousedown", pageMousedown, true);

function pageMousedown(event) {

  var el;

<? # // If there is no active button, exit. ?>

  if (activeButton == null)
    return;

<? # // Find the element that was clicked on. ?>

  if (browser.isIE)
    el = window.event.srcElement;
  else
    el = (event.target.tagName ? event.target : event.target.parentNode);

<? # // If the active button was clicked on, exit. ?>

  if (el == activeButton)
    return;

<?
# // If the element is not part of a menu, reset and clear the active
# // button.
?>

  if (getContainerWith(el, "DIV", "menu") == null) {
    resetButton(activeButton);
    activeButton = null;
  }
}

function buttonClick(event, menuId) {

  var button;

<? # // Get the target button element. ?>

  if (browser.isIE)
    button = window.event.srcElement;
  else
    button = event.currentTarget;

<? # // Blur focus from the link to remove that annoying outline. ?>

  button.blur();

<?
#  // Associate the named menu to this button if not already done.
#  // Additionally, initialize menu display.
?>
  if (button.menu == null) {
    button.menu = document.getElementById(menuId);
    if (button.menu.isInitialized == null)
      menuInit(button.menu);
  }

<? #  // Reset the currently active button, if any.?>

  if (activeButton != null)
    resetButton(activeButton);

<? #  // Activate this button, unless it was the currently active one. ?>

  if (button != activeButton) {
    depressButton(button);
    activeButton = button;
  }
  else
    activeButton = null;

  return false;
}

function buttonMouseover(event, menuId) {

  var button;

<? # // Find the target button element. ?>

  if (browser.isIE)
    button = window.event.srcElement;
  else
    button = event.currentTarget;

<? # // If any other button menu is active, make this one active instead. ?>

  if (activeButton != null && activeButton != button)
    buttonClick(event, menuId);
}

function depressButton(button) {

  var x, y;

<?
#  // Update the button's style class to make it look like it's
#  // depressed.
?>

  button.className += " menuButtonActive";

<?
#  // Position the associated drop down menu under the button and
#  // show it.
?>
  x = getPageOffsetLeft(button);
  y = getPageOffsetTop(button) + button.offsetHeight;

<? #  // For IE, adjust position. ?>

  if (browser.isIE) {
    x += button.offsetParent.clientLeft;
    y += button.offsetParent.clientTop;
  }

  button.menu.style.left = x + "px";
  button.menu.style.top  = y + "px";
  button.menu.style.visibility = "visible";
}

function resetButton(button) {

<? #  // Restore the button's style class. ?>

  removeClassName(button, "menuButtonActive");

<? #  // Hide the button's menu, first closing any sub menus. ?>

  if (button.menu != null) {
    closeSubMenu(button.menu);
    button.menu.style.visibility = "hidden";
  }
}

<?
#//----------------------------------------------------------------------------
#// Code to handle the menus and sub menus.
#//----------------------------------------------------------------------------
?>
function menuMouseover(event) {

  var menu;

<? # // Find the target menu element. ?>

  if (browser.isIE)
    menu = getContainerWith(window.event.srcElement, "DIV", "menu");
  else
    menu = event.currentTarget;

<? #  // Close any active sub menu. ?>

  if (menu.activeItem != null)
    closeSubMenu(menu);
}

function menuItemMouseover(event, menuId) {

  var item, menu, x, y;

<? #  // Find the target item element and its parent menu element. ?>

  if (browser.isIE)
    item = getContainerWith(window.event.srcElement, "A", "menuItem");
  else
    item = event.currentTarget;
  menu = getContainerWith(item, "DIV", "menu");

<? #  // Close any active sub menu and mark this one as active. ?>

  if (menu.activeItem != null)
    closeSubMenu(menu);
  menu.activeItem = item;

<? #  // Highlight the item element. ?>

  item.className += " menuItemHighlight";

<? #  // Initialize the sub menu, if not already done. ?>

  if (item.subMenu == null) {
    item.subMenu = document.getElementById(menuId);
    if (item.subMenu.isInitialized == null)
      menuInit(item.subMenu);
  }

<? #  // Get position for submenu based on the menu item. ?>

  x = getPageOffsetLeft(item) + item.offsetWidth;
  y = getPageOffsetTop(item);

<? # // Adjust position to fit in view. ?>

  var maxX, maxY;

  if (browser.isNS) {
    maxX = window.scrollX + window.innerWidth;
    maxY = window.scrollY + window.innerHeight;
  }
  if (browser.isIE) {
    maxX = (document.documentElement.scrollLeft   != 0 ? document.documentElement.scrollLeft    : document.body.scrollLeft)
         + (document.documentElement.clientWidth  != 0 ? document.documentElement.clientWidth   : document.body.clientWidth);
    maxY = (document.documentElement.scrollTop    != 0 ? document.documentElement.scrollTop    : document.body.scrollTop)
         + (document.documentElement.clientHeight != 0 ? document.documentElement.clientHeight : document.body.clientHeight);
  }
  maxX -= item.subMenu.offsetWidth;
  maxY -= item.subMenu.offsetHeight;

  if (x > maxX)
    x = Math.max(0, x - item.offsetWidth - item.subMenu.offsetWidth
      + (menu.offsetWidth - item.offsetWidth));
  y = Math.max(0, Math.min(y, maxY));

<? #  // Position and show it. ?>

  item.subMenu.style.left = x + "px";
  item.subMenu.style.top  = y + "px";
  item.subMenu.style.visibility = "visible";

<? #  // Stop the event from bubbling. ?>

  if (browser.isIE)
    window.event.cancelBubble = true;
  else
    event.stopPropagation();
}

function closeSubMenu(menu) {

  if (menu == null || menu.activeItem == null)
    return;

<? #  // Recursively close any sub menus. ?>

  if (menu.activeItem.subMenu != null) {
    closeSubMenu(menu.activeItem.subMenu);
    menu.activeItem.subMenu.style.visibility = "hidden";
    menu.activeItem.subMenu = null;
  }
  removeClassName(menu.activeItem, "menuItemHighlight");
  menu.activeItem = null;
}
<?
#//----------------------------------------------------------------------------
#// Code to initialize menus.
#//----------------------------------------------------------------------------
?>

function menuInit(menu) {

  var itemList, spanList;
  var textEl, arrowEl;
  var itemWidth;
  var w, dw;
  var i, j;

<? #  // For IE, replace arrow characters. ?>

  if (browser.isIE) {
    menu.style.lineHeight = "2.5ex";
    spanList = menu.getElementsByTagName("SPAN");
    for (i = 0; i < spanList.length; i++)
      if (hasClassName(spanList[i], "menuItemArrow")) {
        spanList[i].style.fontFamily = "Webdings";
        spanList[i].firstChild.nodeValue = "4";
      }
  }

<? #  // Find the width of a menu item. ?>

  itemList = menu.getElementsByTagName("A");
  if (itemList.length > 0)
    itemWidth = itemList[0].offsetWidth;
  else
    return;
<?
#  // For items with arrows, add padding to item text to make the
#  // arrows flush right.
?>
  for (i = 0; i < itemList.length; i++) {
    spanList = itemList[i].getElementsByTagName("SPAN");
    textEl  = null;
    arrowEl = null;
    for (j = 0; j < spanList.length; j++) {
      if (hasClassName(spanList[j], "menuItemText"))
        textEl = spanList[j];
      if (hasClassName(spanList[j], "menuItemArrow"))
        arrowEl = spanList[j];
    }
    if (textEl != null && arrowEl != null)
      textEl.style.paddingRight = (itemWidth
        - (textEl.offsetWidth + arrowEl.offsetWidth)) + "px";
  }

<?
#  // Fix IE hover problem by setting an explicit width on first item of
#  // the menu.
?>

  if (browser.isIE) {
    w = itemList[0].offsetWidth;
    itemList[0].style.width = w + "px";
    dw = itemList[0].offsetWidth - w;
    w -= dw;
    itemList[0].style.width = w + "px";
  }

<? #  // Mark menu as initialized. ?>

  menu.isInitialized = true;
}

<?
#//----------------------------------------------------------------------------
#// General utility functions.
#//----------------------------------------------------------------------------
?>

function getContainerWith(node, tagName, className) {

<?
#  // Starting with the given node, find the nearest containing element
#  // with the specified tag name and style class.
?>
  while (node != null) {
    if (node.tagName != null && node.tagName == tagName &&
        hasClassName(node, className))
      return node;
    node = node.parentNode;
  }

  return node;
}

function hasClassName(el, name) {

  var i, list;

<?
#  // Return true if the given element currently has the given class
#  // name.
?>
  list = el.className.split(" ");
  for (i = 0; i < list.length; i++)
    if (list[i] == name)
      return true;

  return false;
}

function removeClassName(el, name) {

  var i, curList, newList;

  if (el.className == null)
    return;

<? # // Remove the given class name from the element's className property. ?>

  newList = new Array();
  curList = el.className.split(" ");
  for (i = 0; i < curList.length; i++)
    if (curList[i] != name)
      newList.push(curList[i]);
  el.className = newList.join(" ");
}

function getPageOffsetLeft(el) {

  var x;

<? #  // Return the x coordinate of an element relative to the page. ?>

  x = el.offsetLeft;
  if (el.offsetParent != null)
    x += getPageOffsetLeft(el.offsetParent);

  return x;
}

function getPageOffsetTop(el) {

  var y;

<? #  // Return the x coordinate of an element relative to the page. ?>

  y = el.offsetTop;
  if (el.offsetParent != null)
    y += getPageOffsetTop(el.offsetParent);

  return y;
}
//-->
            
            
</SCRIPT>


<DIV class=menuBar style="WIDTH: 100%">
      <A class=menuButton onmouseover="buttonMouseover(event, 'fileMenu');" onclick="return buttonClick(event, 'fileMenu');"  href="">Datei</A>
      <A class=menuButton onmouseover="buttonMouseover(event, 'editMenu');" onclick="return buttonClick(event, 'editMenu');"   href="">Bearbeiten</A>
      <A class=menuButton onmouseover="buttonMouseover(event, 'helpMenu');" onclick="return buttonClick(event, 'optionsMenu');" href="">Optionen</A>
      <A class=menuButton onmouseover="buttonMouseover(event, 'helpMenu');" onclick="return buttonClick(event, 'helpMenu');" href="">Hilfe</A>
</DIV>

<!-- Main menus. -->
<DIV class=menu id=fileMenu onmouseover=menuMouseover(event)>
      <A class=menuItem onmouseover="menuItemMouseover(event,'fileMenu1');" onclick="return false;"  href="">
      <SPAN class=menuItemText>Neu</SPAN>
      <SPAN class=menuItemArrow>â–¶</SPAN></A>
      <A class=menuItem onmouseover="menuItemMouseover(event,'fileMenu2');" onclick="return false;" href="">
      <SPAN class=menuItemText>&Ouml;ffnen</SPAN>
      <SPAN class=menuItemArrow>â–¶</SPAN></A>
      <A class=menuItemOff id="speichern" >Speichern</A>
      <A class=menuItemOff id="schliessen" >Schließen</A>
      <DIV class=menuItemSep></DIV>
      <A class=menuItemOff id="strukturkopieren" >Struktur kopieren</A>
      <A class=menuItemOff id="synchroniesieren" >Synchronisieren</A>
      <A class=menuItemOff id="exportieren" >Exportieren</A>
      <DIV class=menuItemSep></DIV>
      <A class=menuItemOff id="logout" >Beenden / Logout</A>
</DIV>

<!-- File sub menus. -->
<DIV class=menu id=fileMenu1>
      <A class=menuItemOff id="neuwizard" >Wizard</A>
      <A class=menuItemOff id="neumastermodell" >Mastermodell</A>
</DIV>
<DIV class=menu id=fileMenu2>
      <A class=menuItemOff id="oeffnenauftraege" >Auftr&auml;ge</A>
</DIV>

<DIV class=menu id=editMenu  onmouseover=menuMouseover(event)>
      <A class=menuItemOff id="konfig" >Konfigurieren</A>
      <DIV class=menuItemSep></DIV>
      <A class=menuItemOff id="auftragsdaten" >Auftrag</A>
      <A class=menuItemOff id="schriftkopfdaten" >Schriftfeld</A>
</DIV>

<DIV class=menu id=optionsMenu  onmouseover=menuMouseover(event)>
      <A class=menuItemOff id="user" target=content >User Einstellungen</A>
      <A class=menuItemOff id="admin" target=content >Admin Einstellungen</A>
</DIV>

<DIV class=menu id=helpMenu onmouseover=menuMouseover(event) >
      <A class=menuItemOff id="about" >&Uuml;ber</A>
</DIV>

<script>
<!--- Hide script from old browsers
//
// BILD IN NEUEM FENSTER ÖFFNEN
//
function OpenNewWindow(Picture,Breit,Hoch)
{
xsize = Breit;// Zusatz für Rand rechts und links
ysize = Hoch+75; //Zusatz für Rand oben und unten - damit Button angezeit werden kann
   
ScreenWidth = screen.width;
ScreenHeight = screen.height;

xpos = (ScreenWidth/3)-(xsize/2);
ypos = (ScreenHeight/3)-(ysize/2);

NewWindow=window.open("Items","Picture","height="+ysize+",width="+xsize+",scrollbars=no,resizable=no,top="+ypos+",left="+xpos+"");
if(NewWindow.window.focus){NewWindow.window.focus();}
NewWindow.document.write ("<html><head><title>Über</title></head><body>");
NewWindow.document.write ("<a onClick='self.close()'>");
NewWindow.document.write ("<img src=");
NewWindow.document.write (Picture);
NewWindow.document.write (">");
NewWindow.document.write ("</a>");
NewWindow.document.write ("</body></html>");
NewWindow.document.close();}
// end hiding from old browsers -->
</script>


#############################################################
############# CSS FILE #########################################
#############################################################


TEXTAREA.configurator {
      WIDTH: 100%;
   HEIGHT: 100px;
   FONT-FAMILY: Arial, Helvetica, sans-serif;
}

button.menu {
   width:30;
   height:30;
   background-color: #d6d3d6;
}

A {
//      TEXT-DECORATION: none
}
BODY {
      FONT-SIZE: 10pt;
   COLOR: #e0e0e0;
   FONT-FAMILY: Arial, Helvetica, sans-serif;
   BACKGROUND-COLOR: #e0e0e0
}
H2 {
      FONT-SIZE: 140%
}
H3 {
      FONT-SIZE: 120%
}
H4 {
      FONT-SIZE: 100%
}
PRE {
      FONT-SIZE: 80%;
   FONT-FAMILY: "Courier New", Courier, monospace
}
TD {
      FONT-SIZE: 10pt;
   VERTICAL-ALIGN: top;
   FONT-FAMILY: Arial, Helvetica, sans-serif;
   TEXT-ALIGN: left
}
TH {
      FONT-SIZE: 10pt;
   VERTICAL-ALIGN: top;
   FONT-FAMILY: Arial, Helvetica, sans-serif;
   TEXT-ALIGN: left
}
TH {
      FONT-WEIGHT: bold;
   VERTICAL-ALIGN: bottom
}
UL {
      LIST-STYLE-TYPE: square
}
#demoBox {
      BORDER-RIGHT: #000000 1px solid;
   PADDING-RIGHT: 8px;
   BORDER-TOP: #000000 1px solid;
   PADDING-LEFT: 8px;
   PADDING-BOTTOM: 8px;
   BORDER-LEFT: #000000 1px solid;
   WIDTH: 24em;
   PADDING-TOP: 8px;
   BORDER-BOTTOM: #000000 1px solid
}
.footer {
      MARGIN-BOTTOM: 0px;
   TEXT-ALIGN: center
}
TABLE.boxed {
      border-spacing: 2px;
   empty-cells: hide
}
TD.boxed {
      BORDER-RIGHT: #000000 1px solid;
   PADDING-RIGHT: 8px;
   BORDER-TOP: #000000 1px solid;
   PADDING-LEFT: 8px;
   PADDING-BOTTOM: 2px;
   BORDER-LEFT: #000000 1px solid;
   COLOR: #000000;
   PADDING-TOP: 2px;
   BORDER-BOTTOM: #000000 1px solid;
   BACKGROUND-COLOR: #ffffff
}
TH.boxed {
      BORDER-RIGHT: #000000 1px solid;
   PADDING-RIGHT: 8px;
   BORDER-TOP: #000000 1px solid;
   PADDING-LEFT: 8px;
   PADDING-BOTTOM: 2px;
   BORDER-LEFT: #000000 1px solid;
   COLOR: #000000;
   PADDING-TOP: 2px;
   BORDER-BOTTOM: #000000 1px solid;
   BACKGROUND-COLOR: #ffffff
}
TH.boxedHeader {
      BORDER-RIGHT: #000000 1px solid;
   PADDING-RIGHT: 8px;
   BORDER-TOP: #000000 1px solid;
   PADDING-LEFT: 8px;
   PADDING-BOTTOM: 2px;
   BORDER-LEFT: #000000 1px solid;
   COLOR: #000000;
   PADDING-TOP: 2px;
   BORDER-BOTTOM: #000000 1px solid;
   BACKGROUND-COLOR: #ffffff
}
TH.boxed {
      BACKGROUND-COLOR: #c0c0c0
}
TH.boxedHeader {
      COLOR: #ffffff;
   BACKGROUND-COLOR: #808080
}

DIV.menuBar {
      FONT-WEIGHT: normal;
   FONT-SIZE: 8pt; COLOR: #000000;
   FONT-STYLE: normal;
   FONT-FAMILY: "MS Sans Serif", Arial, sans-serif
}
DIV.menuBar A.menuButton {
      FONT-WEIGHT: normal;
   FONT-SIZE: 8pt;
   COLOR: #000000;
   FONT-STYLE: normal;
   FONT-FAMILY: "MS Sans Serif", Arial, sans-serif
}
DIV.menu {
      FONT-WEIGHT: normal;
   FONT-SIZE: 8pt;
   COLOR: #000000;
   FONT-STYLE: normal;
   FONT-FAMILY: "MS Sans Serif", Arial, sans-serif
}
DIV.menu A.menuItem {
      FONT-WEIGHT: normal;
   FONT-SIZE: 8pt; COLOR: #000000;
   FONT-STYLE: normal; FONT-FAMILY: "MS Sans Serif", Arial, sans-serif
}
DIV.menuBar {
      BORDER-RIGHT: #909090 2px solid;
   PADDING-RIGHT: 2px;
   BORDER-TOP: #f0f0f0 2px solid;
   PADDING-LEFT: 2px;
   PADDING-BOTTOM: 4px;
   BORDER-LEFT: #f0f0f0 2px solid;
   PADDING-TOP: 4px;
   BORDER-BOTTOM: #909090 2px solid;
   BACKGROUND-COLOR: #d0d0d0;
   TEXT-ALIGN: left
}
DIV.menuBar A.menuButton {
      BORDER-RIGHT: #d0d0d0 1px solid;
   PADDING-RIGHT: 6px;
   BORDER-TOP: #d0d0d0 1px solid;
   PADDING-LEFT: 6px;
   Z-INDEX: 100; LEFT: 0px;
   PADDING-BOTTOM: 2px;
   MARGIN: 1px;
   BORDER-LEFT: #d0d0d0 1px solid;
   CURSOR: default;
   COLOR: #000000;
   PADDING-TOP: 2px;
   BORDER-BOTTOM: #d0d0d0 1px solid;
   POSITION: relative; TOP: 0px;
   BACKGROUND-COLOR: transparent;
   TEXT-DECORATION: none
}
DIV.menuBar A.menuButton:hover {
      BORDER-LEFT-COLOR: #f0f0f0;
   BORDER-BOTTOM-COLOR: #909090;
   COLOR: #000000;
   BORDER-TOP-COLOR: #f0f0f0;
   BACKGROUND-COLOR: transparent;
   BORDER-RIGHT-COLOR: #909090
}
DIV.menuBar A.menuButtonActive {
      BORDER-LEFT-COLOR: #909090;
   LEFT: 1px;
   BORDER-BOTTOM-COLOR: #f0f0f0;
   COLOR: #ffffff;
   BORDER-TOP-COLOR: #909090;
   TOP: 1px;
   BACKGROUND-COLOR: #a0a0a0;
   BORDER-RIGHT-COLOR: #f0f0f0
}
DIV.menuBar A.menuButtonActive:hover {
      BORDER-LEFT-COLOR: #909090;
   LEFT: 1px;
   BORDER-BOTTOM-COLOR: #f0f0f0;
   COLOR: #ffffff;
   BORDER-TOP-COLOR: #909090;
   TOP: 1px;
   BACKGROUND-COLOR: #a0a0a0;
   BORDER-RIGHT-COLOR: #f0f0f0
}
DIV.menu {
      BORDER-RIGHT: #909090 2px solid;
   PADDING-RIGHT: 1px;
   BORDER-TOP: #f0f0f0 2px solid;
   PADDING-LEFT: 0px;
   Z-INDEX: 101;
   LEFT: 0px;
   VISIBILITY: hidden;
   PADDING-BOTTOM: 1px;
   BORDER-LEFT: #f0f0f0 2px solid;
   PADDING-TOP: 0px;
   BORDER-BOTTOM: #909090 2px solid;
   POSITION: absolute;
   TOP: 0px;
   BACKGROUND-COLOR: #d0d0d0
}
DIV.menu A.menuItem {
      PADDING-RIGHT: 1em;
   DISPLAY: block;
   PADDING-LEFT: 1em;
   PADDING-BOTTOM: 3px;
   CURSOR: default;
   COLOR: #000000;
   PADDING-TOP: 3px;
   WHITE-SPACE: nowrap;
   TEXT-DECORATION: none
}

DIV.menu A.menuItem:hover {
      COLOR: ffffff;
   BACKGROUND-COLOR: #000080
}
DIV.menu A.menuItemHighlight {
      COLOR: #ffffff;
   BACKGROUND-COLOR: #000080
}
DIV.menu A.menuItem SPAN.menuItemText {
      
}

DIV.menu A.menuItem SPAN.menuItemArrow {
      MARGIN-RIGHT: -0.75em
}
DIV.menu DIV.menuItemSep {
      BORDER-TOP: #909090 1px solid;
   MARGIN: 4px 2px;
   BORDER-BOTTOM: #f0f0f0 1px solid
}


DIV.menu A.menuItemOff {
      PADDING-RIGHT: 1em;
   DISPLAY: block;
   PADDING-LEFT: 1em;
   PADDING-BOTTOM: 3px;
   CURSOR: default;
   COLOR: #aaaaaa;
   PADDING-TOP: 3px;
   WHITE-SPACE: nowrap;
   TEXT-DECORATION: none
}

DIV.menu A.menuItemOff:hover {
      COLOR: #aaaaaa;
 
}
DIV.menu A.menuItemOffHighlight {
      COLOR: #ffffff;
   BACKGROUND-COLOR: #000080
}
DIV.menu A.menuItemOff SPAN.menuItemText {
      
}

DIV.menu A.menuItemOff SPAN.menuItemArrow {
      MARGIN-RIGHT: -0.75em
}
DIV.menu DIV.menuItemSep {
      BORDER-TOP: #909090 1px solid;
   MARGIN: 4px 2px;
   BORDER-BOTTOM: #f0f0f0 1px solid
}


########################################################
##################### END ###############################
########################################################

I hope some one can help

thanks
Dope
DopemanAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

NushiCommented:
hi there.
have you tried to use onblur in the iframe?
set a variable which store the current opened submenu.
whenever the user leaves the frame (onblur)
close the current opened menu.

you can also do it from the second frame.
in the main frame (not menu) use onfocus to call function in the menu frame
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DopemanAuthor Commented:
hi Nushi,

sounds good havent tried that yet but i have no clue how to close the menu i just dont know the code

maybe you could give me a clue ;)

Dope
0
DopemanAuthor Commented:
please i need some help here

i cant get the DDM to close when i click into the iframe

can some one please post a code example to help me out

thanks
dope
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

NushiCommented:
>>i cant get the DDM to close when i click into the iframe

you cant do anything if you are "going" to iframe.
IFRAME is a separe "teritory" in teh browser.
you dont have and you cant access any of its context unless you
write the code inside, then you canimplements what you want.
0
DopemanAuthor Commented:
okay but i have access to the iframe content because its another of my php pages,
and with parent.anything.attr=something i can change HTML on the outside from within the iframe.

and if i could put some code into my iframe context like an onblur or onclick to make that menu vanish would be great
0
NushiCommented:
Dopeman
Thank you.
:-))
Nushi.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.