I am trying to get the position of the click when the user click whatever part of the window. I found this code in many tutorials but it seems not to work.
(function( $ ) {
$( document ).ready(function() {
$( window ).click(function( e ) {
var offset = $(this).offset(),
relativeX = (e.pageX - offset.left),
relativeY = (e.pageY - offset.top);
alert("X: " + relativeX + " Y: " + relativeY);
});
});
})( jQuery );
Firefox console tells me "TypeError: offset is undefined" and I don't understand why it does not work.
Which is the right way to retrieve the click position on the window?
That code is really close to working. It will work correctly if you replace $(this) with $(e.target). This will get the left and top offsets of the click event, not the window itself.
(function($) {
$(document).ready(function() {
$(window).click(function(e) {
var relativeX = (e.pageX - $(e.target).offset().left),
relativeY = (e.pageY - $(e.target).offset().top);
alert("X: " + relativeX + " Y: " + relativeY);
});
});
})(jQuery);
http://jsfiddle.net/IronFlare/7wsamt87/
If you're clicking on the window like that, you don't really need an offset.
$(window).click(function (e) {
alert("X: " + e.pageX + " Y: " + e.pageY);
});
Your code is assuming the wrong this;
In your listener, this will be window, but $(window).offset(); makes no sense, which is why the method returns null or undefined.
Perhaps you meant to use document.documentElement, document.body or e.target which would be the <html>, <body> or the clicked node, respectively.
$(document.body).offset();
I hope to have find a solution
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coords;
}
<!DOCTYPE html>
<html>
<body>
<h2 onclick="showCoords(event)">Click this heading to get the x (horizontal) and y (vertical) coordinates of the mouse pointer when it was clicked.</h2>
<p><strong>Tip:</strong> Try to click different places in the heading.</p>
<p id="demo"></p>
</body>
</html>
Related
I want to read position relative to clicked element e.target instead of eventObject.pageX and eventObject.pageY.
var eventObject = null;
$(document).click(function(e){
eventObject = e;
//how to get position relative to e.target ??
});
Have you tried:?
var posX = $(this).position().left, posY = $(this).position().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
There are 2 methods of getting the position of an element depending on what you want.
This returns the position relative to the element's parent
$(eventObject.target).position().top;
$(eventObject.target).position().left;
And this is for the position relative to the document
$(eventObject.target).offset().top;
$(eventObject.target).offset().left;
The implementation differs depending on the position the element has (absolute or relative)
var targetRelativeX = eventObject.pageX - eventObject.target.offsetLeft;
var targetRelativeY = eventObject.pageY - eventObject.target.offsetTop;
i think it can your see here
$(document).ready(function(){
$("button").click(function(){
var x = $("p").position();
alert("Top position: " + x.top + " Left position: " + x.left);
});
});
I want to read the coordinates of a <div> while it is being dragged and compare it to a static <div> and if at all their positions intersect each other while dragging, it should show some message. I want to accomplish this on web using jquery or javascript. Thanks in advance.
code might be something like this (just a random code)
function onDivDragged(e){
var elemOffset=$("#"+e.target.id).offset();
var elem2Offset=$("#elem2Id").offset();
if(parseInt(elem2Offset.top.replace("px",""))==parseInt(elemOffset.top.replace("px","") && parseInt(elem2Offset.left.replace("px",""))==parseInt(elemOffset.left.replace("px","")))
{
alert("intersection occurred");
}
}
If using jQuery UI is an option then you can use jQuery UI Draggable to achieve this.
Further details are available here http://jqueryui.com/draggable/#events
During drag event get cordinates of div getting dragged and compare it to the static div and compute intersection.
use below javascript code to get the coordinate position of the element
var elemant = document.getElementById('elementID'),
left = element.offsetLeft, // returns X coords
top = element.offsetTop; // returns Y coords
You can use "ondragover" event instead of manually checking coordinates.
http://www.w3schools.com/html/html5_draganddrop.asp
You can get offset of any element using jquery.
var offset = $("#some-element").offset();
// log the values
console.log("top: " + offset.top+ "left: " + offset.left);
try this code.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/jquery-wp-content/themes/jquery/css/base.css?v=1">
<style>
#myDiv
{
width: 20px;
height: 20px;
background-color: Red;
}
</style>
<script>
$(document).ready(function () {
$("#myDiv").draggable({
start: function (e, ui) {
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$("#start").html(" x: " + relX + ", y: " + relY);
},
stop: function (e, ui) {
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$("#end").html(" x: " + relX + ", y: " + relY);
},
drag: function (e, ui) {
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$("#current").html(" x: " + relX + ", y: " + relY);
}
});
});
</script>
</head>
<body>
start Position:<span id="start"></span>
<br />
End Position:<span id="end"></span>
<br />
Dragging Position<span id="current"></span>
<div id="myDiv">
</div>
</body>
</html>
I have been trying for a while now to get a simple pan of a div to work, I however can not seem to get it to 100%. It partially works with bugs.
$("#view_point").mousedown(function(e) {
start_x = e.pageX;
start_y = e.pageY;
e.preventDefault()
//On Click set start x and y vars
}).mousemove(function(e) {
temp_x = e.pageX;
temp_y = e.pageY;
e.preventDefault();
}).mouseup(function(e) {
temp_x = Math.abs(temp_x - start_x);
temp_x = Math.abs(temp_y - start_y);
console.log(temp_x + " - " + temp_y);
//Animate the map
$("#tiles").animate({
marginTop: '-' + temp_x,
marginLeft: '-' + temp_y
}, 50);
});
How do I go about making a pan script that will pan inside a div that has its overflow property set to hidden.
I have the following event handler for my html element
jQuery("#seek-bar").click(function(e){
var x = e.pageX - e.target.offsetLeft;
alert(x);
});
I need to find the position of the mouse on the #seek-bar at the time of clicking. I would have thought the above code should work, but it gives incorrect result
Are you trying to get the position of mouse pointer relative to element ( or ) simply the mouse pointer location
Try this Demo : http://jsfiddle.net/AMsK9/
Edit :
1) event.pageX, event.pageY gives you the mouse position relative document !
Ref : http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/
2) offset() : It gives the offset position of an element
Ref : http://api.jquery.com/offset/
3) position() : It gives you the relative Position of an element i.e.,
consider an element is embedded inside another element
example :
<div id="imParent">
<div id="imchild" />
</div>
Ref : http://api.jquery.com/position/
HTML
<body>
<div id="A" style="left:100px;"> Default <br /> mouse<br/>position </div>
<div id="B" style="left:300px;"> offset() <br /> mouse<br/>position </div>
<div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
</body>
JavaScript
$(document).ready(function (e) {
$('#A').click(function (e) { //Default mouse Position
alert(e.pageX + ' , ' + e.pageY);
});
$('#B').click(function (e) { //Offset mouse Position
var posX = $(this).offset().left,
posY = $(this).offset().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
$('#C').click(function (e) { //Relative ( to its parent) mouse position
var posX = $(this).position().left,
posY = $(this).position().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
});
$('#something').click(function (e){
var elm = $(this);
var xPos = e.pageX - elm.offset().left;
var yPos = e.pageY - elm.offset().top;
console.log(xPos, yPos);
});
Try this:
jQuery(document).ready(function(){
$("#special").click(function(e){
$('#status2').html(e.pageX +', '+ e.pageY);
});
})
Here you can find more info with DEMO
In percentage :
$('.your-class').click(function (e){
var $this = $(this); // or use $(e.target) in some cases;
var offset = $this.offset();
var width = $this.width();
var height = $this.height();
var posX = offset.left;
var posY = offset.top;
var x = e.pageX-posX;
x = parseInt(x/width*100,10);
x = x<0?0:x;
x = x>100?100:x;
var y = e.pageY-posY;
y = parseInt(y/height*100,10);
y = y<0?0:y;
y = y>100?100:y;
console.log(x+'% '+y+'%');
});
If MouseEvent.offsetX is supported by your browser (all major browsers actually support it), The jQuery Event object will contain this property.
The MouseEvent.offsetX read-only property provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.
$("#seek-bar").click(function(event) {
var x = event.offsetX
alert(x);
});
see here enter link description here
html
<body>
<p>This is a paragraph.</p>
<div id="myPosition">
</div>
</body>
css
#myPosition{
background-color:red;
height:200px;
width:200px;
}
jquery
$(document).ready(function(){
$("#myPosition").click(function(e){
var elm = $(this);
var xPos = e.pageX - elm.offset().left;
var yPos = e.pageY - elm.offset().top;
alert("X position: " + xPos + ", Y position: " + yPos);
});
});
This question already has answers here:
How to get mouse position in jQuery without mouse-events?
(7 answers)
Closed 3 years ago.
In Javascript, within the Javascript event handler for onMouseMove how do I get the mouse position in x, y coordinates relative to the top of the page?
if you can use jQuery, then this will help:
<div id="divA" style="width:100px;height:100px;clear:both;"></div>
<span></span><span></span>
<script>
$("#divA").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});
</script>
here is pure javascript only example:
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
document.Show.MouseX.value = tempX;//MouseX is textbox
document.Show.MouseY.value = tempY;//MouseY is textbox
return true;
}
This is tried and works in all browsers:
function getMousePos(e) {
return {x:e.clientX,y:e.clientY};
}
Now you can use it in an event like this:
document.onmousemove=function(e) {
var mousecoords = getMousePos(e);
alert(mousecoords.x);alert(mousecoords.y);
};
NOTE: The above function will return the mouse co-ordinates relative to the viewport, which is not affected by scroll. If you want to get co-ordinates including scroll, then use the below function.
function getMousePos(e) {
return {
x: e.clientX + document.body.scrollLeft,
y: e.clientY + document.body.scrollTop
};
}
It might be a bit overkill to use d3.js just for finding mouse coordinates, but they have a very useful function called d3.mouse(*container*). Below is an example of doing what you want to do:
var coordinates = [0,0];
d3.select('html') // Selects the 'html' element
.on('mousemove', function()
{
coordinates = d3.mouse(this); // Gets the mouse coordinates with respect to
// the top of the page (because I selected
// 'html')
});
In the above case, the x-coordinate would be coordinates[0], and the y-coordinate would be coordinates[1]. This is extremely handy, because you can get the mouse coordinates with respect to any container you want to by exchanging 'html' with the tag (e.g. 'body'), class name (e.g. '.class_name'), or id (e.g. '#element_id').
Especially with mousemove events, that fire fast and furious, its good to pare down the handlers before you use them-
var whereAt= (function(){
if(window.pageXOffset!= undefined){
return function(ev){
return [ev.clientX+window.pageXOffset,
ev.clientY+window.pageYOffset];
}
}
else return function(){
var ev= window.event,
d= document.documentElement, b= document.body;
return [ev.clientX+d.scrollLeft+ b.scrollLeft,
ev.clientY+d.scrollTop+ b.scrollTop];
}
})()
document.ondblclick=function(e){alert(whereAt(e))};