473,320 Members | 1,884 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Opera mouse leaves element

7
Having an odd issue that I didn't have with Opera until the most recent update to 9.22. I have a DHTML menu that I thought I was done with until yesterday. I have a root node that when a user enters the submenu, the following function is called:
Expand|Select|Wrap|Line Numbers
  1. function mouseLeaves(element, evt) 
  2. {
  3.  
  4.     if (typeof(evt.toElement)!="undefined" && evt.toElement && typeof(element.contains)!="undefined") {
  5.         return !element.contains(evt.toElement);
  6.     }
  7.     else if (typeof(evt.relatedTarget)!="undefined" && evt.relatedTarget) {
  8.         return !contains(element, evt.relatedTarget);
  9.     }
  10. }
The problem is that Opera thinks the mouse has left a child node when it hasn't. As I recall, this worked on the previous version of Opera btw. The structure is the following:

root cell > div > div > table

The div is where the sub-menu resides and where Opera thinks the mouse has left the root cell even though those are child nodes. I thought that the mouseLeaves function was soild, but I obviously have some issue here. Opera will hit element.contains btw.

Any ideas? I'm stuck at the moment on this, and have no idea why Opera 9.22 is having issues here.
Aug 8 '07 #1
10 1758
epots9
1,351 Expert 1GB
how are u calling that function?
what is the html element that is calling it?
Aug 8 '07 #2
rush2
7
On the table that contains all the elements of the menu I have the following:

onmouseout="evaluateMouse(this,event)"
Expand|Select|Wrap|Line Numbers
  1. <table class="tblMenuBar" onmouseover="doHighlight(event)" onmouseout="evaluateMouse(this,event)">
Which calls the following function:
Expand|Select|Wrap|Line Numbers
  1. function evaluateMouse(element, e) {
  2.  
  3.     if (mouseLeaves(element, e)) {
  4.         // work
  5.     }
  6. }
  7.  
I've tried leveraging the following function instead of using .contains, but that made no diff.

function contains(container, containee) {
while(containee && (container!=containee) && (containee!=null))
containee = containee.parentNode;
return container == containee;
}
Aug 8 '07 #3
rush2
7
Here's a segment of the html where the problem exists. Once the mouse is over the divs, Opera 9.22 thinks that the mouse has left the table cell that Test4 resides in even though the div and child nodes are children of the cell that contains Test4.
Expand|Select|Wrap|Line Numbers
  1. <td nowrap="nowrap" onclick="MM_Navigate('http://www.google.com',event)" class="root">Test4
  2.  
  3. <div class="select-free"><div class="bd"><table border="0" cellpadding="0" cellspacing="0" class="tblSub">
  4.             <tr>
  5.                 <td nowrap="nowrap" onclick="MM_Navigate('main/',event);" class="tdSub">Sub Item 3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
  6.             </tr>
  7.             <tr>
  8.                 <td nowrap="nowrap" onclick="MM_Navigate('main/',event);" class="tdSub">Sub Item 4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
  9.             </tr>
  10.         </table>
  11.         </div></div>
  12. </td>
Aug 8 '07 #4
pbmods
5,821 Expert 4TB
Heya, Rush.

Please use CODE tags when posting source code. See the REPLY GUIDELINES on the right side of the page next time you post.
Aug 8 '07 #5
rush2
7
Sorry about that.

I did figure out at least part of my issue with Opera 9.22. When the mouse pointer moves from table cell to table cell in the submenu, Opera does not seem to consider this a mouseout for some reason.

Expand|Select|Wrap|Line Numbers
  1. onmouseout="evaluateMouse(this,event)"
onmouseout is only fired when moving from the root table cell to the submenu's div. When moving the mouse from cell to cell in the submenu, onmouseout is not fired. I guess b/c all is within the parent table cell. Anyway this seems very odd, and this did work in the previous version of Opera. Not sure if this is some event bubble or what.
Aug 8 '07 #6
pbmods
5,821 Expert 4TB
Heya, Rush.

Thanks for using CODE tags. Use [/code] to close a code block.
Aug 8 '07 #7
rush2
7
Well the Opera 9.22 problem is rooted in the browser not firing mouse events on any of the submenu elements.

Am I crazy or should the following apply to all children of the following table?

Expand|Select|Wrap|Line Numbers
  1. <table class="tblMenuBar" onmouseover="doHighlight(event)" onmouseout="evaluateMouse(this,event)">
onmouseover or onmouseout won't fire for any of the submenus even though they are children of the previous table. This makes no sense to me. Does it to anyone else?
Aug 8 '07 #8
epots9
1,351 Expert 1GB
Well the Opera 9.22 problem is rooted in the browser not firing mouse events on any of the submenu elements.

Am I crazy or should the following apply to all children of the following table?

Expand|Select|Wrap|Line Numbers
  1. <table class="tblMenuBar" onmouseover="doHighlight(event)" onmouseout="evaluateMouse(this,event)">
onmouseover or onmouseout won't fire for any of the submenus even though they are children of the previous table. This makes no sense to me. Does it to anyone else?
it won't for the submenus because u added a onmouseover/out for a whole table and not for each submenu.

if u had the onmouseover/out event on each row (tr) it would fire everytime u went from one row to another, or if u applied it to each cell (td) it would fire whenver u entered and left a cell.
Aug 8 '07 #9
rush2
7
it won't for the submenus because u added a onmouseover/out for a whole table and not for each submenu.

if u had the onmouseover/out event on each row (tr) it would fire everytime u went from one row to another, or if u applied it to each cell (td) it would fire whenver u entered and left a cell.
Well I was about to test that out & figured that Opera 9.22 wanted it that way, but your reason could only be partly true. Otherwise the mouse events wouldn't fire as the mouse moves from cell to cell which it does. The events just won't fire on any child elements of a given cell in the parent table. It works on all other browsers they way I have it, and worked on previous versions of Opera. In my mind the mouse events should fire as the mouse moves from node to node in the parent table. Not just when the mouse enters or leaves the table. Seems that Opera is not being consistent here.
Aug 8 '07 #10
rush2
7
it won't for the submenus because u added a onmouseover/out for a whole table and not for each submenu.

if u had the onmouseover/out event on each row (tr) it would fire everytime u went from one row to another, or if u applied it to each cell (td) it would fire whenver u entered and left a cell.
epots9

Consider that my code hinges on event bubbling. For what ever reason Opera 9.22 seems to be now preventing event bubbling for the cells child nodes. This is the first time I've come across a browser that does this. Now I'm trying to think of a way to capture the events without totally reworking my code.
Aug 8 '07 #11

Sign in to post your reply or Sign up for a free account.

Similar topics

10
by: tony kulik | last post by:
This code works fine in ie and opera but not at all in Mozilla. Anybody got a clue as to how to get it right? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <script...
7
by: Pete | last post by:
I'm working (playing) on a mouse following script. Yes, the sort no one likes but I'm having great fun tinkering with it - sad. Anyway, if there's enough page content to cause scrolling and I...
7
by: TheMartian | last post by:
Opera is driving me nuts, I am trying to get it to actually render a table the full width of the browser window sounds easy, but no, Opera and only Opera leaves a 16px margin on the right edge ...
4
by: cb.brite | last post by:
Hello, I have tried this using the MouseEnter/MouseLeave events. However these events do not really refer to the rectangular shape of the form, but the client area (form area minus children...
25
Atli
by: Atli | last post by:
Hi. I've created this little window that is shown when I roll the mouse over elements I specify in my html code. Like a nubbin I test this in IE while I'me writing it, thinking it can hardly be...
5
by: Zaxxon21 | last post by:
I'm basically trying to implement a simple drop down menu list for a button that I have. When the user hovers over the button, I want a list of button options to appear below the button. If the...
8
by: Candoer | last post by:
I am new to both HTML and CSS. Several months ago my High School Alumni association web master died and they asked me to take over the web site. I had never worked with CSS but had some experience...
15
by: dhtml | last post by:
Title says it. If I use a for in loop on an HTML collection, I get length twice. <!DOCTYPE HTML> <html lang="en"> <head> <title>length twice</title> </head> <body> <form...
0
by: Frank Rizzo | last post by:
I have a form with a lot of controls on it. How can I detect when the mouse leaves the form? I've tried wiring up a MouseLeave event for every single control, but that does not work because those...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.