2

What I'm trying to do here is to show a loading box that follows cursor after submitting a form using MooTools. However, I've simplified the problem into just 1 div and 1 form.

script:

document.addEvent('domready', function(){

    $('test_form').addEvent('submit', function(){
        var box = $('box');

        document.addEvent('mousemove', function(e){
            box.setStyles({
                top: e.page.y,
                left: e.page.x
            });
        });


        box.setStyle('display', 'block');

        return false;
    });
});

html:

<div id="box">
</div>

<form id="test_form" action="">
    <label>Name: </label><input type="text" name="name" /><br/>
    <input type="submit" value="Submit" />
</form>

css:

#box {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;
    display: none;
}

#test_form {
    margin-left: 150px;
}

When the form is submitted, it will show the hidden blue div and it will follow the cursor. However, I can't make the div appear at mouse position when the form is submitted. The 'mousemove' will not fire until we move the mouse; thus, the blue div appears at position (0,0) immediately after showing. Is there a way to get the mouse position right after the form is submitted? Or is there an alternative way to do it?

Any suggestions is greatly appreciated!

Updated:

I don't want to add mouse event (mousemove) before the form is submitted. The reason is simply because I don't want the javascript to keep on checking the mouse position when it's not necessary. Just try to avoid performance issue!

Davuth
  • 555
  • 3
  • 9
  • 16

1 Answers1

1

basically, the submit is an event but its event.type is submit and it won't contain mouse info.

your bet is to re-arrange your javascript so it moves the box quietly all the time and just shows the box by changing display when submitted. something like that:

http://jsfiddle.net/jtLwj/

(function() {
    var box = $('box');

    document.addEvent('mousemove', function(e) {
        box.setStyles({
            top: e.page.y,
            left: e.page.x
        });
    });

    $('test_form').addEvent('submit', function(ev) {
        ev.stop();
        box.setStyle('display', 'block');
        var sizes = box.getPosition();
        box.set("html", [sizes.x, ' x ', sizes.y].join("<br/>"));
    });
})();

reading the box position after submit will return your cursor :)

downside: latency of changing css for the invis box before submit.

edit better version w/o the change to dom all the time:

(function() {
    var lastEventObject, eventListener = function(e) {
        // keep a scoped referene of the last known mouse event object
        lastEventObject = e;
    };

    document.addEvent('mousemove', eventListener);

    document.id('test_form').addEvent('submit', function(e) {
        e.stop();
        // not needed anymore...
        document.removeEvent("mousemove", eventListener);

        // show the box at last known mouse loc
        document.id("box").setStyles({
            display: 'block',
            left: lastEventObject.page.x,
            top: lastEventObject.page.y
        });

        // attach to mousemove or whatever....

    });
})();

this is as good as it will get, I'm afraid. the footprint of the reference to the event object is minimal at best.

fiddle: http://jsfiddle.net/dimitar/jtLwj/1/

Dimitar Christoff
  • 26,147
  • 8
  • 50
  • 69
  • Dimitar, thank you for the comment. I forget to mention one point but you already addressed it in the "downside". That's exactly why I don't want to add mouse event at the beginning. The javascript keeps on checking the position of the mouse movement even though it's not necessary. – Davuth Feb 16 '11 at 01:11
  • well, not a problem - i did say it came at a cost. however, there's no 'checking' just blind setting. a setter is not _that_ expensive. nevermind though, check the edited version instead which just stores the last triggered event object that contains the mouse position. – Dimitar Christoff Feb 16 '11 at 10:10
  • actually, the problem is related to the 'mousemove', not the setter. yes, the setter is not that expensive but mousemove is. Ur 2nd solution is better than the 1st one but by adding 'mousemove' to the document, it means that there will be hundreds of events generated whenever the mouse is moved even though it's not necessary - we don't want the box to show at all. – Davuth Feb 21 '11 at 02:05
  • sorry, but that's just utter nonsense. `mousemove` listener here is NOT expensive at all. check for yourself - http://jsfiddle.net/dimitar/jtLwj/1/show/ - run a javascript profiler. i tried it by moving the mouse for 15 seconds randomly and then submitting the form and stopping the profile. total cost of calls: `Profile (107.183ms, 7896 calls)`. If it were that expensive, neither google analytics nor any of the heatmapping tools like clicktale would have any success or business. anyway, I stand by what I wrote and still don't think there's a better solution possible. – Dimitar Christoff Feb 21 '11 at 09:55
  • also, read this: http://stackoverflow.com/questions/2601097/how-to-get-the-mouse-position-without-events-without-moving-the-mouse – Dimitar Christoff Feb 21 '11 at 10:11
  • I'm a little confused. Could you take a look at this? "Keep in mind that the mousemove event is triggered whenever the mouse pointer moves, even for a pixel. This means that hundreds of events can be generated over a very small amount of time. If the handler has to do any significant processing, or if multiple handlers for the event exist, this can be a serious performance drain on the browser. It is important, therefore, to optimize mousemove handlers as much as possible, and to unbind them as soon as they are no longer needed." ref: http://api.jquery.com/mousemove/ – Davuth Feb 22 '11 at 06:29
  • yep. the event is as small as possible. it does not do anything but store the object and it unbinds it when done so it follows what you posted :) – Dimitar Christoff Feb 22 '11 at 08:47