Solved

onMouseOut function to close Drop Down Menu

Posted on 2003-11-10
7
772 Views
Last Modified: 2012-05-04
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
0
Comment
Question by:Dopeman
  • 3
  • 3
7 Comments
 
LVL 10

Accepted Solution

by:
Nushi earned 25 total points
ID: 9714600
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
 

Author Comment

by:Dopeman
ID: 9714682
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
 

Author Comment

by:Dopeman
ID: 9764188
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 10

Expert Comment

by:Nushi
ID: 9764334
>>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
 

Author Comment

by:Dopeman
ID: 9769579
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
 
LVL 10

Expert Comment

by:Nushi
ID: 9884054
Dopeman
Thank you.
:-))
Nushi.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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)
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…

746 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

12 Experts available now in Live!

Get 1:1 Help Now