Positioning DIVs

If I reposition a DIV tag and on that DIV tag I use a onmouseout event should the onmouseout recognize the new area covered by the DIV tag or the old one? Thanks in advance for any help.

Rob

the mouse event is attached to area where the div resides

"where the div tag resides"... do you mean resides before or after the re-positioning? It looks like the onmouseout isn't working as I planned. After moving it to another part of the screen the onmouseout happens as soon as I move the mouse. See I have a cell that once the mouse goes over it (i.e. onmouseover) the submenu (i.e. the table enclosed by the DIV tag I'm concerned about) comes up (i.e. gets repositioned underneath the parent cell, the cell with the initial onmouseover). While above the parent cell I set a variable called Parent to 1 and off the cell I set it to 0. So when the submenu pops up I should be able to go anywhere on the submenu. The submenu has a onmouseout to close the submenu if you leave the submenu and the Parent variable is set to 0. BUT the onmouseout happens for the submenu once the mouse isn't over the parent cell. It's like the onmouseout isn't working properly or something weird is happening with the submenu.

Rob

The problem is that the mouse is not on the submenu so it sees it as a mouseout and hides it.

I will try to write a little smaple code in a couple of minutes.

Eric

Really appreciate it Eric. Would you like to see the page I've written to help you see exactly what I've been doing or do you have enough information?

Rob

Eric, is the reason why the onmouseout doesn't seem to be working properly because of the way the z-order is set-up possibly?

Rob

I am working on it and it should not be because of z-index...My boss came tome with a problem so I am trying to debug it...

Eric

--Use code further down page -- this has problems...

This is what I came up with real quick, ran it in IE and Firefox:

<html>
  <head>
    <script>
 
      var openSub = "";
      var ErrorGapX = 10;
      var ErrorGapY = 13;
 
      function ErrorPosition(ErrorElement){
        ErrorPosX = ErrorElement.offsetLeft
        ErrorPosY = ErrorElement.offsetTop;
        ErrorWidth = ErrorElement.clientWidth;
        if(!ErrorWidth){ErrorWidth = ErrorElement.offsetWidth;}
        TheElement = ErrorElement.offsetParent;
        while(TheElement != null){
          ErrorPosX += TheElement.offsetLeft 
          ErrorPosY += TheElement.offsetTop;
          TheElement = TheElement.offsetParent;
        }
        ErrorPosX += ErrorGapX;
        ErrorPosY += ErrorGapY;
        return ErrorPosX  + "|" + ErrorPosY; 
      }
 
 
      function ShowMenu(parentElem,subElement){
        if(openSub)HideSub(openSub)
        thePos = ErrorPosition(parentElem).split("|");
        document.getElementById(subElement).style.left = thePos[0];
        document.getElementById(subElement).style.top = thePos[1];
        document.getElementById(subElement).style.visibility = "visible"
        openSub = document.getElementById(subElement);
      }
 
      function HideSub(xElem){
xElem.style.visibility = "Hidden";
        openSub = "";
      }
 
 
    </script>
  </head>
  <body>
    <div id="menu1" onmouseover=ShowMenu(this,"sub1") style="display:inline;width:50px;text-align:center;background-color:gray;border: black 1px solid;cursor:hand">Hello</div>
    <div id="sub1"  onmouseout="HideSub(this)" style="position:absolute;top:0px;left:0px;z-index:100;visibility:hidden;width:150px;text-align:center;background-color:silver;border: black 1px solid;cursor:hand">Blah<br/>Blah<br/>Blah</div>
    <div id="menu2" onmouseover=ShowMenu(this,"sub2") style="display:inline;width:50px;text-align:center;background-color:gray;border: black 1px solid;cursor:hand">Hello</div>
    <div id="sub2"  onmouseout="HideSub(this)" style="position:absolute;top:0px;left:0px;z-index:100;visibility:hidden;width:150px;text-align:center;background-color:silver;border: black 1px solid;cursor:hand">Blah<br/>Blah<br/>Blah<br/>Blah<br/>Blah</div>
      <div id="menu3" onmouseover=ShowMenu(this,"sub3") style="display:inline;width:50px;text-align:center;background-color:gray;border: black 1px solid;cursor:hand">Hello</div>
    <div id="sub3"  onmouseout="HideSub(this)" style="position:absolute;top:0px;left:0px;z-index:100;visibility:hidden;width:150px;text-align:center;background-color:silver;border: black 1px solid;cursor:hand">Blah<br>Blah</div>
  </body>
</html>

Eric
[ January 11, 2005: Message edited by: Eric Pascarello ]

Hi Eric,
You shortened up the code a bit for me but the problem still persists. Here's the code I have :

< html>
< head>
< title>Untitled Document</title>
< style>
.navButtons {font-size: 9pt; font-weight: bold; color: 2222AA}
#NAMenu {position: absolute; visibility: hidden; z-order: 100}
#CALUpdate {position: absolute; visibility: hidden; z-order: 101}
#layer2 {position: absolute; z-order: 2; top: 15; left: 30; color: #202077; font-weight: bold}
#layer1 {position: absolute; z-order: 1; top: 20; left: 40; color: #F3F3FF; font-weight: bold}
#layer100 {position: relative; z-order: 3}
#layer101 {position: relative; z-order: 4}
</style>
<script language="javascript">
var openSub = "";
var ErrorGapX = 10;
var ErrorGapY = 13;
function ErrorPosition (ErrorElement) {
ErrorPosX = ErrorElement.offsetLeft;
ErrorPosY = ErrorElement.offsetTop;
ErrorWidth = ErrorElement.clientWidth;
if (!ErrorWidth) {
ErrorWidth = ErrorElement.offsetWidth;
}
TheElement = ErrorElement.offsetParent;
while (TheElement != null) {
ErrorPosX += TheElement.offsetLeft;
ErrorPosY += TheElement.offsetTop;
TheElement = TheElement.offsetParent;
}
ErrorPosX += ErrorGapX;
ErrorPosY += ErrorGapY;
return ErrorPosX + "|" + ErrorPosY;
}
function ShowMenu (parentElem, subElement) {
if (openSub) {
HideSub(openSub);
}
thePos = ErrorPosition(parentElem).split("|");
document.getElementById(subElement).style.left = thePos[0];
document.getElementById(subElement).style.top = thePos[1];
document.getElementById(subElement).style.visibility = "visible";
openSub = document.getElementById(subElement);
}
function HideSub (xElem) {
xElem.style.visibility = "Hidden";
openSub = "";
}
</script>
</head>

< body style="background-color: #AAAAFF">
< form name="ExampleMenu" action="Outline.htm" method="post">

< div align="center" id="layer1">Company Name</div>
< div align="center" id="layer2">Company Name</div>

<div id="layer100">
<table width="100%" cellpadding=0 cellspacing=0 border=1>
<tr width="100%">
<th width="1%"></th>
<th width="17%"></th>
<th width="1%"></th>
<th width="17%"></th>
<th width="1%"></th>
<th width="17%"></th>
<th width="1%"></th>
<th width="17%"></th>
<th width="1%"></th>
<th width="17%"></th>
<th width="1%"></th>
</tr>
<tr>
<td colspan=10 align="right">Clerk : <b>Guest</b></td>
</tr>
<tr height=10>
<td></td>
</tr>
<tr>
<td align="center" colspan=10 style="font-size: 26pt; font-weight: bold; color: #202077">Application Name</td>
</tr>
<tr height=10>
<td></td>
</tr>
<tr align="center" width="100%" valign="center" height="20">
<td></td>
<td style="background-color: #CCCCDD; font-weight: bold; font-size: 10pt" onmou$eover='ShowMenu(this,"CALUpdate");' onMou$eOut="hideMenu('CALUpdate');">Calendar
Update</td>
<td></td>
<td style="background-color: #CCCCDD; font-weight: bold; font-size: 10pt" onmou$eover='ShowMenu(this,"NAMenu");' onMou$eOut="hideMenu('NAMenu');">Name
& Address</td>
<td></td>
<td style="background-color: #CCCCDD; font-weight: bold; font-size: 10pt">Word
Processor</td>
<td></td>
<td style="background-color: #CCCCDD; font-weight: bold; font-size: 10pt">Calculator</td>
<td></td>
<td style="background-color: #CCCCDD; font-weight: bold; font-size: 10pt">Printer
Group Maintenance</td>
<td></td>
</tr>
<tr height=15>
<td></td>
</tr>
</table>

<table width="100%" cellspacing=0 cellpadding=0 border=1>
<tr height=400>
<td></td>
</tr>
</table>
</div>
<center>

<input type="hidden" name="Parent" value="">
<input type="hidden" name="SubMenu" value="">

<div id="CALUpdate" onmou$eout="HideSub(this)" >
<table cellspacing=0 cellpadding=0 width=200 border=1>
<tr><td style="font-size: 10pt; background-color: FF6666">Calendar Inquiry</td></tr>
<tr><td style="font-size: 10pt; background-color: FF6666">Print Monthly Calendar</td></tr>
<tr><td style="font-size: 10pt; background-color: FF6666">Calendar Update</td></tr>
<tr><td style="font-size: 10pt; background-color: FF6666">Comings & Goings</td></tr>
<tr><td style="font-size: 10pt; background-color: FF6666">Group Code Update</td></tr>
<tr><td style="font-size: 10pt; background-color: FF6666">Telephone Call Maintenance</td></tr>
<tr><td style="font-size: 10pt; background-color: FF6666">Personal Manager</td></tr>
<tr><td style="font-size: 10pt; background-color: FF6666">Print Action List</td></tr>
<tr><td style="font-size: 10pt; background-color: FF6666">PM Reporting</td></tr>
</table>
</div>

<div id="NAMenu" onmou$eout="HideSub(this)" >
<table cellspacing=0 cellpadding=0 width=200 border=1>
<tr><td style="font-size: 10pt; background-color: FF6666">Maintain Name & Address Records</td></tr>
<tr><td style="font-size: 10pt; background-color: FF6666">N & A Inquiry</td></tr>
<tr><td style="font-size: 10pt; background-color: FF6666">N & A Dictionary Maintenance</td></tr>
<tr><td style="font-size: 10pt; background-color: FF6666">Spooler Control Menu</td></tr>
<tr><td style="font-size: 10pt; background-color: FF6666">List N & A Files</td></tr>
<tr><td style="font-size: 10pt; background-color: FF6666">Change Working Parameters</td></tr>
<tr><td style="font-size: 10pt; background-color: FF6666">N & A Reporting</td></tr>
</table>
</div>

</form>
</body>
</html>

I'd greatly appreciate it if you could take a look at this code and let me know what the heck the problem is. Really appreciate this. Thanks again.

Rob

just a quick glance:

onmouseover='ShowMenu(this,"CALUpdate");' onmosueout="hideMenu('CALUpdate');

why are you hiding it there? I would remove that onmosueout line....

Hey Eric,
Still doesn't work with the mosueout taken out.
Rob

The problem is wioth the table inside the div, it sees it as leaving the div...

So if I got rid of the DIV tag for the content but it still doesn't work. Anything else you can think of? Thanks again.

Rob

Play with this code and adjust the closePause variable to different numbers to see what you like.

<html>
  <head>
    <script>
      var closePause = 500;
      var openSub = "";
      var ErrorGapX = 10;
      var ErrorGapY = 13;
 
      function ErrorPosition(ErrorElement){
        ErrorPosX = ErrorElement.offsetLeft
        ErrorPosY = ErrorElement.offsetTop;
        ErrorWidth = ErrorElement.clientWidth;
        if(!ErrorWidth){ErrorWidth = ErrorElement.offsetWidth;}
        TheElement = ErrorElement.offsetParent;
        while(TheElement != null){
          ErrorPosX += TheElement.offsetLeft 
          ErrorPosY += TheElement.offsetTop;
          TheElement = TheElement.offsetParent;
        }
        ErrorPosX += ErrorGapX;
        ErrorPosY += ErrorGapY;
        return ErrorPosX  + "|" + ErrorPosY; 
      }
 
      function ShowMenu(parentElem,subElement){
 if(openSub){
  HideSub(openSub);
  if(theTimer)clearTimeout(theTimer)
}
        thePos = ErrorPosition(parentElem).split("|");
        document.getElementById(subElement).style.left = thePos[0];
        document.getElementById(subElement).style.top = thePos[1];
        document.getElementById(subElement).style.visibility = "visible"
        openSub = subElement;
      }
 
      function HideSub(xElem){
    document.getElementById(xElem).style.visibility = "Hidden";
        openSub = "";
      }
 
  var theTimer = "";
  function SetHideSub(theElem){
  theElem = theElem.id;
    if(theTimer)clearTimeout(theTimer)
    theTimer = setTimeout("HideSub('" + theElem + "')",closePause)
      }
 
      function CancelHideSub(){
        if(theTimer)clearTimeout(theTimer)
  }
 
    </script>
  </head>
  <body>
    <div id="menu1" onmouseover="ShowMenu(this,'sub1')" onmouseout="SetHideSub(document.getElementById('sub1'))" style="display:inline;width:150px;text-align:center;background-color:gray;border: black 1px solid;cursor:hand">MENU 1</div>
    <div id="sub1" style="position:absolute;top:0px;left:0px;z-index:100;visibility:hidden;width:250px;text-align:center;background-color:silver;border: black 1px solid;cursor:hand" onmouseout="SetHideSub(this)" onmouseover="CancelHideSub()">
  <table style="width:100%;" border="1">
    <tr><td>ARGH1</td></tr>
    <tr><td>ARGH1</td></tr>
    <tr><td>ARGH1</td></tr>
    <tr><td>ARGH1</td></tr>
    <tr><td>ARGH1</td></tr>
  </table>
</div>
    <div id="menu2" onmouseover="ShowMenu(this,'sub2')" onmouseout="SetHideSub(document.getElementById('sub2'))" style="display:inline;width:150px;text-align:center;background-color:gray;border: black 1px solid;cursor:hand">MENU 2</div>
    <div id="sub2" style="position:absolute;top:0px;left:0px;z-index:100;visibility:hidden;width:250px;text-align:center;background-color:silver;border: black 1px solid;cursor:hand" onmouseout="SetHideSub(this)" onmouseover="CancelHideSub()">
  <table style="width:100%;" border="1">
    <tr><td>ARGH2</td></tr>
    <tr><td>ARGH2</td></tr>
    <tr><td>ARGH2</td></tr>
  </table>
</div>
    <div id="menu3" onmouseover="ShowMenu(this,'sub3')" onmouseout="SetHideSub(document.getElementById('sub3'))" style="display:inline;width:150px;text-align:center;background-color:gray;border: black 1px solid;cursor:hand">MENU 3</div>
    <div id="sub3" style="position:absolute;top:0px;left:0px;z-index:100;visibility:hidden;width:250px;text-align:center;background-color:silver;border: black 1px solid;cursor:hand" onmouseout="SetHideSub(this)" onmouseover="CancelHideSub()">
  <table style="width:100%;" border="1">
    <tr><td>ARGH3</td></tr>
    <tr><td>ARGH3</td></tr>
    <tr><td>ARGH3</td></tr>
    <tr><td>ARGH3</td></tr>
    <tr><td>ARGH3</td></tr>
    <tr><td>ARGH3</td></tr>
    <tr><td>ARGH3</td></tr>
    <tr><td>ARGH3</td></tr>
    <tr><td>ARGH3</td></tr>
  </table>
</div>
  </body>
</html>

Eric

Hey Eric,
Just wanted to thank you for giving me a hand on the problem I was having. Everything worked out really well. Thanks again.

Rob

Glad I could help...

Actually one last thing Eric. I've put that code in but once the sub-menu pops up it extends downward so far. Well I have a drop down list (i.e. select list) on the page and the sub-menu extends over itBUT the select list actually shows through the sub-menu. I tried fooling with the z-order of the select list but that did nothing. Any suggestions? Thanks again.

Rob

That is one problem with using select elements. There are a few things you can try.

What I do on my application is hide the select elements that I know get in the way. It is ugly, but it gets the job done.

Other people say that there is a way to do it with writing content dynamicaly into iframes, but this has issues with secure sites (https)

The third option is to move the box.

Eric

What? Are you kidding? God javascript and HTML are pretty crappy with no more control than this. I didn't realize doing such tasks were so complicated and, sometimes, to some degree impossible. I guess thats why Swing is being used so often. I'll try giving the moving the element(s0 or hiding the elements. Thanks again.

Rob

The problem is not with JavaScript, but the way the browser renders the elements. The select element is rendered on the highest level of all browser elements. Because of this, there is no way to get layers over it properly. It really sucks, but you see this happening with flash documents and other things.

I have a function on my one application that has pop up calendars in a layer that maps all of the select elements on the page. When the calendar is rendered, it depermines the space it takes up and looks for the collision of the elemenets. It is messy and a pain in the rear!

Eric

Great talking to you Eric. Thanks for the help.

Rob

About popus and select elements:
Actually, in IE 5.5+ (and NS 6+, I think too), if you wrap your popup div into iframe, it will show up correctly, with no need to hide select element.
The idea is, you popup an iframe, the same way you popup you div, than obtain a handle to that iframe's document and use document.write to put whatever you need there. One note - you need add a link to your css since it is a separate page from browser point of view

Hey Yuriy,
You wouldn't happen to know a good example of this would you? Thanks for the response.

Rob