JavaScript - popup menu ... - Asked By Joe Barker on 09-Oct-01 10:59 AM

I hope you can understand what the problem is...here goes:
I want a popup-style menu to appear when I click on a table cell (going across the top of the screen), and for it to be positioned just below the cell, and then disapear when the mouse moves off the popup menu (which is actually a small table). This all works fine...but, just below the startup table (where the user first clicks) I want to put an iframe. Now, the popup menu appears *behind* the iframe object, but I need it to be displayed on top of the iframe. I have tried to change the zindexes of the objects (table and iframe) but with no luck. Any ideas?

I've heard this one a lot. You could maybe try putting the popup menu inside its own dynamically written IFrame, and then handle this by setting the z-order on the popup IFrame vs. the other Iframe... I haven't tried it, but it "sounds" right...

Those JavaScript popup menues will NOT paint themselves over plug-ins,ActiveX controls, other windows or pages.

I don't think the iframe idea (while a good one to try) will yield any better results.  In order for that idea to work, I think you'd have to dynamically adjust the frame size or page size to accomodate the dropdowns.

This code is a little quick and hokey, but the menu does
display OVER the IFRAME:
<SCRIPT>
var oPopup = window.createPopup();
function getA(el) {
	while (el!=null) {
		if (el.tagName=="A") return el;
		el = el.parentElement;
	}
	return null;
}

function doClick() {
  var ev = this.document.parentWindow.event ;
  var el = getA(ev.srcElement);
  if (el)
	self.location = el.href ;
}
function showMenu(e,menu) {
  var oPopupBody = oPopup.document.body;
  oPopupBody.style.border = "1px black solid";
  oPopupBody.innerHTML = submenu.outerHTML;
  oPopupBody.style.display="block";
  oPopupBody.onclick = doClick;
  oPopup.show(0, e.offsetHeight, menu.offsetWidth, menu.offsetHeight,e);
}
</SCRIPT>

<TABLE WIDTH=50%><TR><TD><A HREF="#" ONCLICK="showMenu(this,submenu)">Main Menu</A></TD></TR></TABLE>


<TABLE CLASS=menu ID=submenu>
  <TR><TD NOWRAP>
    <A HREF="http://www.eggheadcafe.com" TARGET="content">Developers</A>
  </TD></TR>
  <TR><TD NOWRAP>
    <A HREF="http://www.yahoo.com" TARGET="content">Ordinary People</A>
  </TD></TR>
 </TABLE>

I used what you advised and managed to get round the problem using a iframe in a table cell, and positioning the table where I wanted it, because I could not set the position attributes of a iframe element. The problem I have now, is that I am trying to hide the popup table when the mouse is moved of it using the onmouseout event of the table contained in the page referenced by the iframe element, which then calls a routine in its parent (the original page) to hide the table containing the iframe. The onmouseout event seems to be called when the mouse goes over cell boundaries. Is this correct, and if so, how can I get round this?

you have to experiment with event.cancelBubble
for this. Otherwise, maybe switch to another paradigm.

Are you using the IE popup behavior e.g.
var oPopup = window.createPopup();
function doContext()
{
    var lefter2 = event.offsetY+0;
    var topper2 = event.offsetX+15;
    // oContext2.innerHTML is <DIV> with display=none
   //  contextobj is the id of the table cell or even
   //  the document body where you want event fired
    oPopup.document.body.innerHTML = oContext2.innerHTML; 
    oPopup.show(topper2, lefter2, 210, 97, contextobj);
}

I can get the menu to appear, but I cannot seem to find a reliable method of hiding it again. Because the menu appears on top of an iframe element, I cannot seem to use the onmouseout event of the menu. So, I have tried to use the onmouseout of the body element of the child window (ie: the popup menu), checking to see whether the current mouse XY coords are within the table, and otherwise call a function in the parent window to set the display of the menu to none. However, this event does not always seem to be fired. I have posted the html for the 2 files below; home2.htm is the parent which opens menu.htm in the same directory:

Move the mouse over the 'trend analysis' on the left hand side to open the menu.

home2.htm ........


<TITLE>CWAFS Information Site</TITLE>
<HEAD>
<SCRIPT language="vbscript">

Option Explicit

Const giMBOX_INFO_OK = 64
Const giMBOX_ASK_YESNO = 36
Const gsMBOX_TITLE = "OLAP Development"

Dim iLastOption
Dim objCurDataFrame
Dim iElements


'************************************************************
'************ this is the relevant code for the popup menu...

Sub shwpopupmenu(iCell, iOption)

  tblPopup1.Style.Display = ""
  tblPopup1.Style.PosLeft = tdTemp10.OffSetLeft
  tblPopup1.Style.PosTop = tdTemp10.OffSetTop + tdTemp10.OffSetHeight

End Sub


Function iHidePopupMenu

  tblPopup1.Style.Display = "none"
  iHidePopupMenu = 1

End Function

'************************************************************
'************************************************************


Sub ChgBGColor(iCell, iOption)

  Dim sColor

'  On Error Resume Next

  If iCell = iLastOption Then Exit Sub
  If iOption = 0 Then sColor = "#DC143C" Else sColor = "#336699"

  tblOptions.Rows(0).Cells(iCell).BGColor = sColor


if icell = 10 then Call shwpopupmenu(icell, ioption)

End Sub


Sub imgSwapMenu_OnClick

  Dim sSrc

  On Error Resume Next

  tblFrame.Style.Display = "NONE"
  sSrc = Document.All.frameMain.Src

  Document.All.frameMain.Src = ""
  Document.All.frameMain1.Src = sSrc

  tblFrame1.Style.Display = ""
  tblNewMenu.Style.Display = ""

  Set objCurDataFrame = Document.All.frameMain1

End Sub


Sub tdResetMenu_OnClick

  Dim sSrc

  On Error Resume Next

  sSrc = Document.All.frameMain1.Src

  Document.All.frameMain1.Src = ""
  Document.All.frameMain.Src = sSrc

  tblFrame1.Style.Display = "NONE"
  tblFrame.Style.Display = ""
  tblNewMenu.Style.Display = "NONE"

  Set objCurDataFrame = Document.All.frameMain

End Sub


Sub Window_OnLoad

  On Error Resume Next

  iLastOption = 0
  tdDefaultMonth.InnerText = "Default month is " & MonthName(Month(Now), True) & CStr(Year(Now))
  Set objCurDataFrame = Document.All.frameMain

  

  iElements = Document.All.Length - 1

End Sub


Sub OptionRef_Click(riOption)

  On Error Resume Next

  Document.All.frameMain.Scrolling = "NO"
  Select Case riOption
    Case 0
      objCurDataFrame.Src = "glossary2.asp"
    Case 1
      objCurDataFrame.Src = "posttext.asp"
    Case 2
      Document.All.frameMain.Scrolling = "YES"
      objCurDataFrame.Src = "viewtext.asp"
    Case 3
      objCurDataFrame.Src = "siteadmin.asp"
    Case 4
      objCurDataFrame.Src = "contactus.asp"
    Case 5
      objCurDataFrame.Src = "top20.asp"
    Case 6
      Document.URL = "map1.asp"
  End Select

End Sub


Sub TabOptionClick(iOption)

  On Error Resume Next

  If iLastOption = iOption Then Exit Sub

  tblOptions.Rows(0).Cells(iOption).BGColor = "#DC143C"
  tblOptions.Rows(0).Cells(iLastOption).BGColor = "#336699"

  iLastOption = iOption

  Select Case iOption
    Case 0
      Document.All.frameMain.Scrolling = "NO"
      objCurDataFrame.Src = "top20.asp"
    Case 2
      Document.All.frameMain.Scrolling = "NO"
      objCurDataFrame.Src = "bmpstat.asp"
    Case 4
      Document.All.frameMain.Scrolling = "NO"
      objCurDataFrame.Src =

I wish I had more time to look at this. First thing, you probably need to use a settimeout function to fire the iHidePopupMenu function after a specified time say 2 seconds, first checking to see if the mouse is still within the xy coords of the original menu-firing cell.
Most of the examples you'll find of popup menus use this technique. Same thing when the menu opening gets fired, it would check if another menu is open and close it first.
You can search:
http://www.google.com/search?q=Settimeout+popup&btnG=Google+Search

for examples.

is there a way of getting the current XY coords of the mouse? I know you can get these values from the last event (ie - mouseover event) using the event.clientY, etc., but I need to get the current position of the mouse even after no event has been fired. Is this possible?

You can strip out the Netscape-specific tests if you're only programming for IE:


var where = ""; 
function checkwhere(e) {
        if (document.layers){
        xCoord = e.x;
        yCoord = e.y;
}
        else if (document.all){
        xCoord = event.clientX;
        yCoord = event.clientY;
}
        else if (document.getElementById){
        xCoord = e.clientX;
        yCoord = e.clientY;
}
        self.status = "X= "+ xCoord + "  Y= " + yCoord; 
        }
document.onmousemove = checkwhere;
if(document.captureEvents) {document.captureEvents(Event.MOUSEMOVE);}