I want to detect where in the div with id clickdetectiondiv have i clicked. The code that I am using gives me the position with respect to the top left of the body of the HTML page. I have spent lot of time in figuring out how this could be done but am unable to find the answer.
One solution i have is to subtract the position of this absolutely positioned div. But not always will I get the position of the div, as the screen sizes may vary. Please tell me an alternate method to do this.
Thanks in advance,
<html>
<head>
<script type="text/javascript">
function clicked(event){
var x=event.clientX
var y=event.clientY
document.getElementById("outputdiv").innerHTML= "X coords: " + x + ", Y coords: " + y;
}
</script>
<style type="text/css">
#clickdetectiondiv{
position: absolute;
top: 100px;
left: 100px;
height: 100px;
width: 500px;
background: gray;
}
#outputdiv{
position: absolute;
top: 300px;
left: 100px;
height: 100px;
width: 500px;
background: #eee;
text-align: center;
}
</style>
</head>
<body>
<div id="clickdetectiondiv" onmousedown="clicked(event);"></div>
<div id="outputdiv"></div>
</body>
</html>
You want to use a javascript framework like jquery or mootools, they have functions to get relative position of an element to any other element you want already written in a cross-browser manner. Why reinvent the wheel?
If you can use jquery
$('#A').click(function(e) { //Default mouse Position
alert(e.pageX+ ' , ' + e.pageY);
});
I suppose this can be solution:
function clicked(event){
var x = event.x;
var y = event.y;
var divClicked = document.getElementById("clickdetectiondiv");
x -= divClicked.offsetLeft;
y -= divClicked.offsetTop;
document.getElementById("outputdiv").innerHTML= "X coords: " + x + ", Y coords: " + y;
}
Related
I'm trying to make text that follows my mouse pointer, but getting some troubles.
I'm using fullscreen div to take available space on page to make mouse event working for entire page.
Also using position: absolute to place one div on another. date-and-time is used to create text that follows the mouse.
I've tried almost anything I can but it didn't work and now I'm here.
html
<body>
<div id="fullscreen"></div>
<div id="date-and-time"></div>
<script src="./script.js"></script>
</body>
javascript
const dateAndTime = document.getElementById('date-and-time');
dateAndTime.innerText = new Date();
document.addEventListener("mousemove", function(e) {
dateAndTime.style.left = e.clientX;
dateAndTime.style.top = e.clientY;
});
css
div {
position: absolute;
}
#fullscreen {
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: yellow;
}
Problem is that text just ignores my mouse, but if I move pointer to left corner text gets moved to X=0 (maybe it's not actually but it worked that way before)
You are missing px for the postion values.
You are assigning the left and right position values to the node without px.
What happens when you move to left most position? Simple at that time the value will be 0. That will work without any unit.
div {
position: absolute;
}
#fullscreen {
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: yellow;
}
<body>
<div id="fullscreen"></div>
<div id="date-and-time"></div>
</body>
<script>
const dateAndTime = document.getElementById("date-and-time");
dateAndTime.innerText = new Date();
document.addEventListener("mousemove", function(e) {
dateAndTime.style.left = e.clientX + 'px';
dateAndTime.style.top = e.clientY + 'px';
});
</script>
https://jsfiddle.net/m0zwwav4/
html:
<div id="container"></div>
<div id="tooltip">Tooltip!</div>
css:
#container {
width: 500px;
height: 500px;
border: solid 1px red;
}
#tooltip {
position: absolute;
}
js:
var container = document.getElementById('container')
var tooltip = document.getElementById('tooltip')
container.onmousemove = function(event) {
tooltip.style.left = (event.pageX + 20) + 'px'
tooltip.style.top = event.pageY + 'px'
}
When I move cursor inside red box, tooltip seems to be little bit laggy (there is a little delay) - testing in chrome on max os. Is there any trick to make it faster to make it look like moving exactly fast as mouse cursor?
You can do this without JavaScript.
Change the container's cursor to a URL, which is an image containing the tooltip text:
You can do this using a Data URI:
#container {
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAAAZCAIAAAAZqC9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIPSURBVFhH5Zg7csIwEIZxzgKp0kCH6KCCg0BBAQV0KdOFwpTQ5QapcAUdLqFhUgB3cX5Ji2T5IRNjBsb5ZjLj1YqVPz1sT5wgCCrl5QV/jDHHcfb7vWwqE1wP7Ha7yWRSPkPSA+v1ejgclsxQ6wHf90u2hoYewBqWyTCqBx5l6A3wgHOcgUdxESToAYuhvIckWvMz9bkfNAVXD5WsB/6+hm+vVboqhoTVPB8PdHUlqXog0XCB7wDBqi/i/oriYNEVDfekOtqKobajK2fSpgfynMPzvCWmXRLdR/bsBb5yvaW4XPZCHc0VlbWQChU1K6bqdTod2X+z2TQaDWrNgo9TG/sUcfxxTe0vezYvqBEqiihUMKoHK7VW+JQRW4EjW7LwPuU4lx17chkPlx9iSu1Zgy7OgLH77duRuSfeiX4RKmjowQ1rRUEOvG+xn5g7pWNYHb2LEf2fU1b2Bpj7JeW7UzlhuqDWg9tsNsMcyMN2w9vP/ggt+gFrhfRwuuBWr9dleBuHo9psCU9ye7ZosFzNZjN8zEC73ZYt6iJO7MWgDpNupD4ytmfjBSmmcyUx+6iK5tnTJQKuFyennh7AQN3gVVldMNzdFIjqmYRuKVkPZBrG7oaIjBnJW7IJBbWgTY+5K13VHC+/3hOg9Gj946TqAYjhx8/qBrL1Ur9aAN4N6FHQ4/Qx/IP/lJWYUutVKr8O6jUK23d1QgAAAABJRU5ErkJggg==), auto;
}
Fiddle
This is the edit of the question to add the following....
animating an object with jquery simply as follows.....
$("div").animate({left: '250px'});
But it would be ideal if instead of left:'250'px it could be the target
div/class something like this....
$("div").animate({'.title-area-main'});
So this question relates to a bit of html , I have a this class within a div called wrapper ....
<div class="logo"><img src="images/mthc/logo-main.png" height="150px" width="420px"></div>
it is defined in css as ....
#wrapper {
left: 50%;
top: 50%;
width:720px;
height:300px;
position:fixed;
margin-top: -50px;
margin-left: -100px;
transform: translate(-25%, -25%);
z-index : 5001;
}
.logo{
float:left;
width:60%;
z-index : 5005;
}
the destination of the class "logo" is to this part of the html page....
<img src="images/mthc/logo.png">
and the css styling for this comes with the class "title-area-title" as per the a href link ....
.metro .tile-area .tile-area-title {
position: fixed;
top: 0;
left: 260px;
border: 0 ;
height: 120px;
width: 800px;
}
I know I could use some really cool css3 animation tween to move the logo into place of the a tag. that would be great if I am using internet explorer version 50000 ... so I am basically looking for a jquery way of doing this and currently have no experience of jquery animation if even possible. Any advice would be really helpful.
To get an element's position :
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while (element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
Then you call it like this :
var y = getPosition(document.getElementById('mydivID')).y;
var x = getPosition(document.getElementById('mydivID')).x;
I have an iframe
<iframe id="EXAMPLE"></iframe>
edited:
How can I make the iframe to get the mouse cordinaes on real time with javascript?
In HTML you have this:
<iframe src="http://example.com" id="test"></iframe>
Set some CSS styles:
body {
width: 500px;
height: 500px;
background-color: black;
}
#test {
left: 10px;
top: 10px;
position: absolute;
}
Now, you have to get the mouse position on document. You can use jQuery mousemove handler:
$("body").on("mousemove", function(e) {
console.log("X: " + e.clientX + "px Y: " + e.clientY + "px");
});
Then, set the iframe position on document:
function update(e) {
$("#test").css("left", e.clientX + 10 + "px");
$("#test").css("top", e.clientY + 10 + "px");
}
Now, just simply call update function inside of mousemove.
See live preview here.
If you want to detect mousemove on iframe, too, add pointer-events:none to iframe styles. Tested here.
According to w3schools, the relative position value is defined as follows.
relative - The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position.
I know that I can get the DOM object of whatever I positioned relatively and using that, I can get the left or top position w/ respect to the origin.
My question is, how can I get the "normal" position?
Thanks,
mj
Maybe, I misunderstand your question, but wouldn't this just be simple subtraction of the relative offset?
"normal" position is where the element will be positioned with left:0; top:0;. You can get this position by substracting the offset from the current position (tested in Chrome):
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
#container { width: 100px; height: 100px; margin: 100px auto; border: 1px solid red; }
#item { position: relative; top: 10px; left: 10px; width: 80px; height: 80px; border: 1px solid green; }
</style>
<script type="text/javascript">
window.onload = function () {
var container = document.getElementById('container');
var item = document.getElementById('item');
var computed = window.getComputedStyle(item);
item.innerHTML = 'Normal: (' + (item.offsetLeft - parseInt(computed.left))
+ ', ' + (item.offsetTop - parseInt(computed.top) + ')');
};
</script>
</head>
<body>
<div id="container"><div id="item"></div></div>
</body>
</html>
to normal position just set position value to: static
position:static