Win a copy of Mesos in Action this week in the Cloud/Virtualizaton forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Positioning DIVs

 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
the mouse event is attached to area where the div resides
 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
"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
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
--Use code further down page -- this has problems...

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



Eric
[ January 11, 2005: Message edited by: Eric Pascarello ]
 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
just a quick glance:

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

why are you hiding it there? I would remove that onmosueout line....
 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hey Eric,
Still doesn't work with the mosueout taken out.
Rob
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The problem is wioth the table inside the div, it sees it as leaving the div...
 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Play with this code and adjust the closePause variable to different numbers to see what you like.



Eric
 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Glad I could help...
 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Great talking to you Eric. Thanks for the help.

Rob
 
Yuriy Fuksenko
Ranch Hand
Posts: 413
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hey Yuriy,
You wouldn't happen to know a good example of this would you? Thanks for the response.

Rob
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic