Prototype 'mouseover' Event

[Troy Harvey]

My goal is to show a div and have it follow the mouse while the mouse is over an element.

It seems to work perfectly in Win IE. However, in Firefox it blinks horribly. Please take a look. I don't have anything against Stephen King, but "It" was on while I was trying to figure this bugger out.

<div id="floater">hi</div>
<div id="hoverbox">
<p>stephen king is a huge dork</p>
</div>
 
<script type="text/javascript" language="javascript">
var floater = $("floater");
 
var obj = {
followMouse: function(event) {
floater.style.left = Event.pointerX(event) + "px";
floater.style.top = Event.pointerY(event) + "px";
}
};

obj.bFollowMouse = obj.followMouse.bindAsEventListener(obj);
 
Event.observe(window, 'load', function() {
Event.observe($("hoverbox"), 'mouseover', function() {
floater.style.display = "block";
});
Event.observe($("hoverbox"), 'mouseout', function() {
floater.style.display = "none";
});
});
 
Event.observe(document, 'mousemove', obj.bFollowMouse);
 
</script>

[David C. Crane]

Hi Troy,

I figured it out! Here's how - add an extra style in your code like so:

#dbg{ position: absolute; width: 300px; left: 450px; top: 32px; height: 500px; overflow: auto; }

Add an empty DIV tag with id='dbg', and modify the JS as follows:

function dbg(str){
new Insertion.Top('dbg',str+'<hr/>');
}

var floater = $("floater");

var obj = {
followMouse: function(event) {
floater.style.left = Event.pointerX(event) + "px";
floater.style.top = Event.pointerY(event) + "px";
}
};

obj.bFollowMouse = obj.followMouse.bindAsEventListener(obj);

Event.observe(window, 'load', function() {
Event.observe($("hoverbox"), 'mouseover', function() {
floater.style.display = "block";
dbg('mouseover');
});
Event.observe($("hoverbox"), 'mouseout', function() {
floater.style.display = "none";
dbg('mouseout');
});
});

Event.observe(document, 'mousemove', obj.bFollowMouse);

You'll see that whenever the floater appears, it is grabbing the focus in FF, hence triggering a mouseout event on the hoverbox. This causes the floater to vanish, triggering another mouseover, and so on. IE is interpreting the event model spec differently, and doesn't generate so many events.

Not sure of a fix, but that's the source of your flickering.

BTW, see how easy it is to build a quick debug panel using Prototype Insertions?

HTH

Dave

[Troy Harvey]

Fantastic! Very helpful response. I just needed to scoot the floater away from the cursor a little. This prevents Firefox from triggering focus/mouseover events on the floater element when it appears.