aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Positioning DIVs Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Positioning DIVs" Watch "Positioning DIVs" New topic
Author

Positioning DIVs

Rob Hunter
Ranch Hand

Joined: Apr 09, 2002
Posts: 826
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
the mouse event is attached to area where the div resides
Rob Hunter
Ranch Hand

Joined: Apr 09, 2002
Posts: 826
"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

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Apr 09, 2002
Posts: 826
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

Joined: Apr 09, 2002
Posts: 826
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
--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

Joined: Apr 09, 2002
Posts: 826
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Apr 09, 2002
Posts: 826
Hey Eric,
Still doesn't work with the mosueout taken out.
Rob
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
The problem is wioth the table inside the div, it sees it as leaving the div...
Rob Hunter
Ranch Hand

Joined: Apr 09, 2002
Posts: 826
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
Play with this code and adjust the closePause variable to different numbers to see what you like.



Eric
Rob Hunter
Ranch Hand

Joined: Apr 09, 2002
Posts: 826
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
Glad I could help...
Rob Hunter
Ranch Hand

Joined: Apr 09, 2002
Posts: 826
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Apr 09, 2002
Posts: 826
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Apr 09, 2002
Posts: 826
Great talking to you Eric. Thanks for the help.

Rob
Yuriy Fuksenko
Ranch Hand

Joined: Feb 02, 2001
Posts: 413
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

Joined: Apr 09, 2002
Posts: 826
Hey Yuriy,
You wouldn't happen to know a good example of this would you? Thanks for the response.

Rob
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: Positioning DIVs