[thelist] Javascript -- getting mouse position

Bill Moseley moseley at hank.org
Mon Mar 27 11:32:07 CST 2006


First, please let me know if there's a better place to ask javascript
questions.


Two questions really.  I'm playing with javascript popup menus -- I'm
trying to learn a little, I'm not just trying to find some code to
copy that works.


I have a <div> popup menu that I change from display: none to display:
block using onmouseover and onmouseout.

And also on the <div> I also have mouseover and mouseout events.

(I've only tested in Firefox, so may not work in other clients)

Here's the javascript:

    http://hank.org/demos/js/menu_popup.js



First question is about events:

    http://hank.org/demos/menu3.html

(Hover over the "Second menu..." link.)


Again, I set mouseover and mouseout on the popup <div>, yet when the
menu is displaying as I move my mouse around *on* the menu I see
mouseout events begin called ("menuout" in the debug panel on the
right).  I expected only to see the event when moving outside the
<div>, but perhaps I'm not understanding how (or when) events are
suppose to be triggered.  Is that the expected behavior?


Second quesiton:

I'm using Prototype to fetch the mouse position, which uses the
method that is often recommended if you google around:

  pointerX: function(event) {
    return event.pageX || (event.clientX +
      (document.documentElement.scrollLeft || document.body.scrollLeft));
  },

  pointerY: function(event) {
    return event.pageY || (event.clientY +
      (document.documentElement.scrollTop || document.body.scrollTop));
  },

The problem is when I use a floating centered layout that method to
determine the mouse location is off by how much the page is indented:

Make your screen wide and notice how the popup is moved over to the
right the amount the page content is moved over to the right.

    http://hank.org/demos/menu4.html

The results in the menu not popping up next to the mouse pointer.

Anyone know what I'd need to add in to get the position correct?



BTW, yes, I'd rather do CSS-only menus -- these two are css only menus:

    http://hank.org/demos/menu.html
    http://hank.org/demos/menu2.html

But I'm having a harder time getting IE to work with those.


-- 
Bill Moseley
moseley at hank.org




More information about the thelist mailing list