We Keep Coding

repeat call of javascript function is creating conflict

I am using the following JS function to have hover tooltip effect. The function works excellent. Problem happens after loading certain area with ajax. I need to call this function to work on the data collected through ajax (Jquery). That is OK as well. Problem is while I close the area called through ajax, I see unexpected behavior at the base page. The previous tooltip effects now show bubble within self (image is given below).
Any idea how to prevent this conflict?
function tooltip(){
$('.master_tooltip').hover(function(){
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
});
}

Call that function only once, otherwise the event handlers will be bound multiple times for the already existing elements.
What you need to do is rewrite it so it delegates the mouse events and works with dynamically inserted elements, like this
function tooltip(){
$(document).on({
mouseenter : function() {
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>').text(title)
.appendTo('body')
.fadeIn('slow');
},
mouseleave : function() {
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
},
mouseover : function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip').css({ top: mousey, left: mousex })
}
}, '.master_tooltip');
}

Stop one event by another - Javascript/jQuery

I'm implementing drag and drop with jQuery.
So, after mousedown, event starts working:
On mousemove selected element moves with mouse.
Now, I want it to stop working on mouseup.
here's my code:
$(document).on("mousemove", widget, function() {
var newMouseX = event.pageX - mouseX;
var newMouseY = event.pageY - mouseY;
var newElemX = elemX + newMouseX;
var newElemY = elemY + newMouseY;
$(widget).offset({ top: newElemY , left: newElemX });
$(document).on("mouseup", widget, function(widget) {
// what to do here?
});
});
any suggestions?

Panning DIV element around using javascript

I am trying to have a div in a container which when the user clicks and drags somewhere in the document area, the .room element pans around inside the .viewport element by holding down the middle click button.
Here is the issue: (Hold right click for this one, middle click didn't work for some reason)
http://jsfiddle.net/JeZj5/2/
JS
var mouseX = 0;
var mouseY = 0;
var scale = 1.0;
$(document).mousemove(function (e) {
var offset = $('.room').offset();
//relative mouse x,y
mouseX = parseFloat((e.pageX - offset.left) / scale, 2);
mouseY = parseFloat((e.pageY - offset.top) / scale, 2);
//absolute mouse x,y
mouseXRaw = e.pageX;
mouseYRaw = e.pageY;
$(".room").html(mouseX + ', ' + mouseY + '<br />Right click document and pan');
switch (e.which) {
case 3:
$('.room').css({
left: mouseX,
top: mouseY
});
break;
}
return true;
});
$(document).on('contextmenu', function () {
return false;
});

This should be more along the lines of what you're looking for. Key change:
delta.x = e.pageX - drag.x;
delta.y = e.pageY - drag.y;
Using the delta to change the position. The .room's position should be moving with respect to it's current location, minus the mouse drag position (not the other way around).
http://jsfiddle.net/X2PZP/3/

Mouse coordinates not working correctly,

On the following page I have a popup that is supposed to show beside the image, depending on the window size the pop-up displays further/closer to the mouse. I don't understand what is wrong with the code, that makes the pop-up not display in the same proximity to the mouse?
http://www.hughgrice.com/test/
jQuery(document).mousemove(function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
follow();
});
function follow(){
d = document.getElementById("thumbTT");
if(openToolTip){
d.style.display = "block";
d.style.left = mouseX+5 + "px";
d.style.top = mouseY-100 + "px";
}else{
d.style.display = "none";
}
}
http://www.hughgrice.com/test/

This should work:
var $elem = $( '#thumbTT' );
$( document ).on( 'mousemove', function ( e ) {
follow( e.pageX, e.pageY );
});
function follow ( x, y ) {
if( openToolTip ) {
$elem.css({ left: x + 5, top: y - 100 }).show();
} else {
$elem.hide();
}
}
I'm assuming that the #thumbTT element is static, so I'm caching the reference to it beforehand.

As your wrapper DIV is relative positioned that's why it is not positioned correctly. Either you have to remove the position:relative from your wrapper div or you have to write your mousemove function like
jQuery(document).mousemove(function (e) {
var offset = jQuery(this).css('offset');
mouseX = offset.left;
mouseY = offset.top;
follow();
});
maybe you have to adjust your code

determining mouse position on a window focus event

I've attached a focus listener to window (using prototype syntax):
Event.observe( window, 'focus', focusCb.bindAsEventListener( this ) );
I want to determine the mouse position when the window is focused. Unfortunately, in my focusCb method, I don't seem to have access to pageX, pageY, clientX or clientY.
Using quirksmode code:
function doSomething(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// posx and posy contain the mouse position relative to the document
// Do something with this information
}
I always get 0, 0.
I thought the focus event would have the mouse position information.
Why doesn't the focus event have this information?
More importantly, how should get I get the mouse position when the window is focused?

IE has clientX and clientY in the event object; though it may be the only one.
Yeah, this is looking pretty horrible. See the section on this page about Mouse Position. I think he does a pretty thorough job of examining it.
Okay, I see you're actually already using his script. Sigh.

Depending on the circumstances, it might not exactly be what you're looking for, but you could, after the focus, wait for the next mousemove event and use that coordinates, something along this line:
var x = 0, y = 0, window_got_focus = false;
window.onfocus = function () { window_got_focus = true };
document.onmousemove = function (event) {
if (window_got_focus) {
window_got_focus = false;
x = event.clientX;
y = event.clentY;
}
};
Drawback is, of course, that you get the coordinates only as soon as the user moves the mouse after focussing.

You can capture the window onclick event and throw the position into a globally scoped variable.
EDIT: Also if you're using prototype you should have access to the pointerX and pointerY methods of the event object.

call doSomething() function on mouse move
document.onmousemove = function (e)
{
doSomething(e);
};