We Keep Coding

Show position where is clicked

Can someone tell me how to show position on mouse click. I am not asking for on click show div position... I am asking for this if I have :
<div id="div123" style="width: 300px; height: 300px;"></div>
And jquery :
$("#div123").click(function(){
var x = $("WHERE MOUSE CLICKED INSIDE #div123").position();
});

I have not tried, but this should work
$('#div123').click(function(e) {
var posX = $(this).position().left
var posY = $(this).position().top;
alert( (e.pageX - posX) + ' , ' + (e.pageY - posY));
});

You need to process the event object in the function.
$("#div123").click(function(e){
e.pageX;
e.pageY;
});
event.pageX
The mouse position relative to the left edge of the document.
event.pageY
The mouse position relative to the top edge of the document.
check the doc:
https://api.jquery.com/category/events/event-object/

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?

Getting mouse coordinates relative to jQuery dialog window and not viewport?

I have the following bit of code which is responsible for displaying a tooltip. I am unhappy with this code for two reasons:
I use pageXOffset and pageYOffset 'magic numbers' to correct the visual state per-browser.
The dialog window must remain stationary for the numbers to be correct.
I have tried binding to the dialog window's mousemove event instead of the document. The results were identical to my current implementation which binds to document's mousemove.
var shouldDisplay = false;
$(document).mousemove(AdjustToolTipPosition);
function DisplayTooltip(tooltip_text) {
shouldDisplay = (tooltip_text != "") ? true : false;
if (shouldDisplay) {
$('#CustomTooltip').html(tooltip_text);
$('#CustomTooltip').show();
}
else {
//Sometimes the tooltip hasn't finished fading in before we ask to hide it. This causes it to hide, then fade back in.
$('#CustomTooltip').hide();
}
}
function AdjustToolTipPosition(e) {
if (shouldDisplay) {
//msie e.page event should be standardizes, but seems to go awry when working inside of a modal window.
var pageYOffset = $.browser.msie ? 260 : 572; //-314
var pageXOffset = $.browser.msie ? 474 : 160; //+314
$('#CustomTooltip').css('top', e.pageY - pageYOffset + 'px');
var offsetLeft = e.pageX - pageXOffset;
var isOutsideViewport = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width() - offsetLeft < 0;
//Prevent the tooltip from going off the screen by changing the offset when it would go off screen.
if (isOutsideViewport) {
offsetLeft = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width();
}
$('#CustomTooltip').css('left', offsetLeft + 'px');
}
}
// Initialize the Historical Chart dialog.
$('#HistoricalChartDialog').dialog({
autoOpen: false,
buttons: {
'Close': function() {
$(this).dialog('close');
}
},
hide: 'fold',
modal: true,
draggable: false,
resizable: false,
position: 'center',
title: 'Historical Charts',
width: 700,
height: 475
});
I provide the jQuery dialog initializer just for the sake of it. The tooltip only displays inside of this dialog window -- but the coordinates are for the entire page. Is it possible to retrieve coordinates relative to the dialog window so that I can leverage the fact that jQuery's mousemove standardizes coordinates with the pageX and pageY properties?
EDIT solution:
//Seperate file because the offsets are different for the image under MVC.
var shouldDisplay = false;
$("#HistoricalChartDialog").mousemove(AdjustToolTipPosition);
function DisplayTooltip(tooltip_text) {
shouldDisplay = (tooltip_text != "") ? true : false;
if (shouldDisplay) {
$('#CustomTooltip').html(tooltip_text);
$('#CustomTooltip').show();
}
else {
//Sometimes the tooltip hasn't finished fading in before we ask to hide it. This causes it to hide, then fade back in.
$('#CustomTooltip').hide();
}
}
function AdjustToolTipPosition(e) {
if (shouldDisplay) {
var xPos = e.pageX - $(this).closest('.ui-dialog').offset().left + 15;
var widthDifference = $(this).width() - $("#CustomTooltip").width();
//Prevent the tooltip from going off the screen by changing the offset when it would go off screen.
xPos = (widthDifference - xPos < 0) ? widthDifference : xPos;
$('#CustomTooltip').css('left', xPos + 'px');
var yPos = e.pageY - $(this).closest('.ui-dialog').offset().top - 10;
$('#CustomTooltip').css('top', yPos + 'px');
}
}

To get the position of the mouse relative to a specific div, not the viewport, you take the eventX/Y and subtract the left/top position of the div:
$("#example").mousemove(function(e) {
var xPos = e.pageX - $(this).position().left;
var yPos = e.pageY - $(this).position().top;
$("#pos").text("x: " + xPos + " / y: " + yPos);
});
Example fiddle
Given your example, this should work. You may need to look at your isOutsideViewport logic though.
function AdjustToolTipPosition(e) {
if (shouldDisplay) {
var xPos = e.pageX - $(this).position().left;
var yPos = e.pageY - $(this).position().top;
var isOutsideViewport = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width() - xPos < 0;
if (isOutsideViewport) {
offsetLeft = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width();
}
$('#CustomTooltip').css({
'top': yPos + 'px',
'left': xPos + 'px'
});
}
}

Creating handle feature for my drag and drop plugin bugging

I'm creating a drag and drop plugin and trying to get the handler feature to work...
I'm trying this code:
$(o.handle).mousedown(function(event) {
down = true;
var dx = event.pageX - $(this).position().left,
dy = event.pageY - $(this).position().top;
$(oj).css({
cursor: 'move',
}).mousemove(function(event) {
if (down == true) {
$(oj).css({
cursor: 'move',
left: event.pageX - dx,
top: event.pageY - dy + 110
});
}
});
o.handle is the ID of the handler
oj is referring to this
The Problem is that once you click the handler it moves the element its suppose to drag, but, then once you try to drag it again it goes all haywire. As you can see here. I don't know why it works the first time thought. But not any other time.

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);
};