Question

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!

Answer 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/