SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member vood002's Avatar
    Join Date
    Nov 2007
    Location
    San Diego
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting mouse coordinates without event

    I've been trying to solve this problem and after extensive searching i'm not sure if it's possible. It also might be a very simple fix that I haven't found yet.

    Building a menu w/ mootools, the development page can be seen here: http://www.heliopower.com/dev/

    The menu slides up when user mouses over, but I was having a ton of problems with it sliding back down when user mouses off. Correct me if I'm wrong, but the mouseOut function is very finicky. I experimented with a function I found online to make sure mouseOut was detecting the mouse moving out of the right div (in a layered setup) but it didn't work well, and didn't work at all in IE6. I've included the function below this text--

    Thus, I decided the best way to deal with this was to have the script check to see if the cursor is not over the menu, and if it's not, to lower the menu. I set an interval to fire a function every second that will (theoretically) check the mouse coordinates, then check to see if it is currently hovering above the menu. My problem is that i'm not sure if it's possible to find the mouse coordinates without clicking. I've found a ton of functions that will detect the coordinates of an event, but this isn't optimal. I don't want the function to fire on mouseMove, b/c that will slow everything down. An example of one of these functions is here:

    http://www.w3schools.com/js/tryit.as...event_screenxy

    Does anyone have any advice? Is there a way to detect the cursor location in JS w/out using an event?

    Here is the aforementioned mouseOut code, which I got from http://www.quirksmode.org/js/events_mouse.html. The author has a description of the function there, it essentially checks and rechecks that the mouse is moving out of the correct layer and terminates the function if it is not.

    //------------------

    function menuOut(e) {

    if (!e) var e = window.event;
    var tg = (window.event) ? e.srcElement : e.target;
    if (tg.nodeName != 'DIV') return;
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
    while (reltg != tg && reltg.nodeName != 'BODY')
    reltg= reltg.parentNode
    if (reltg== tg) return;

    //If it gets this far, the mouse has moved out of the correct object
    console.log("MouseOut!");

    }



    Thanks in advance-

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    does mootools not give you simulated 'enter' and 'leave' mouse-events to make such things easier?

  3. #3
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,157
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)

    events

    Hi vood002, welcome to the forums,
    I would say that there is always at least 1 event at all times, it's just a matter of using the best one for your needs.
    Have you tried focus() and blur()?

  4. #4
    SitePoint Member vood002's Avatar
    Join Date
    Nov 2007
    Location
    San Diego
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for the responses.

    GJones -> you prompted me to look through mootools once more and sure enough, there was a function. Ugh so much wasted time, but I've learned a valuable lesson.

    Mittineague -> Your comment got me started on writing a function that fired on a delay after the mouseOut that then checked the coordinates. I'm confident it would have worked. Not sure how I would have implemented focus() and blur(), but fortunately I won't need to.


    Thanks for the advice even when faced with a dumb question. I suppose this happens often enough, I just had to look at it differently.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •