Userscripts.org

Great script. But one bug... if you hover out over the popped up div, it doesn't close. And I don't know how I did it but when I hovered over a gravatar just now, the popup div overlapped the original gravatar and I couldn't close it.
I did a dirty fix like this for now: box.addEventListener('mouseover', leave, false);

I find this works better:
box.addEventListener('mouseout', leave, false);

This still wasn't working right for me so I took another look. Actually there was two problems.

First, if I would move the mouse quickly onto and off of a gravatar, quite often the div would remain showing and not go away. The fix I wrote in my previous message only made it easier to force it to hide, but the problem still remained. After trying a couple of ideas, I finally realized I just needed to add box.firstChild.removeEventListener to the leave() function. Then I don't need the line I mentioned in my previous message.

Second, if the gravatar was within the leftmost 512 pixels in the window, the div kept appearing over top of it, forcing the div to flash as it would "get in the way" of the gravatar, forcing repeated mouseover, mouseout events. I figured the easiest solution was to just make the div show next to the mouse instead of at X=0, but when I looked at the code, it was already trying to do that. A few GM_logs later I found the problem was the code was using screenX to get the mouse position, which on my dual-monitor system was returning the wrong value. Switching to clientX fixed the problem.

I also added a calculation to make the div position better when the mouse is near the right-hand side of the window.

My resulting functions are below.

function show() {
	 box.style.visibility="";
}

function enter(A) {
	if(A.shiftKey)
		return;
	if ((A.clientX+20+box.offsetWidth) > window.outerWidth) {
		box.style.left='';
		box.style.right=(window.outerWidth-A.clientX)+"px";
	} else {
		box.style.left=(A.clientX+20)+"px";
	}
	box.firstChild.src=this.src.replace(/&/g,"&").replace(/&default=[^&#]+/,"").replace(/s(?:ize)?=\d+/,"s=512");
	box.firstChild.addEventListener("load", show ,false);
}

function leave(A) {
	box.firstChild.removeEventListener("load", show ,false);
	if(!A.shiftKey)
		box.style.visibility="hidden";
}