Develop Reference

e.pageX and pageY puts tooltip in an odd area

I've been looking for a way for a tooltip to sort of hover just above the cursor, I've seen a lot of posts recommending using the event pageX and pageY coordinates something like this:
const showToolTip = (evt, text) => {
let tooltip = document.getElementById("tooltip");
tooltip.innerHTML = text;
console.log(evt)
tooltip.style.visibility = "visible";
tooltip.style.left = evt.pageX +'px';
tooltip.style.top = evt.pageY + 'px';
}
However, when I do this the tooltip is generally like 400 pixels right of the mouse and 300 pixels below the mouse.
Something to note I'm doing this on an SVG:
<div id="tooltip" style="position: absolute; visibility: hidden;"></div>
<svg id="calendar" width="636px" height="84px"></svg>
....
// SVG is made up of several boxes and when one is hovered over the tooltip should appear:
box.addEventListener("mouseenter", (e) => {showToolTip(e, day)})
box.addEventListener("mouseout", () => {hideToolTip()})
svg.appendChild(box);
}
Again all this functionality works and the tooltip appears and moves around but it's just super far away from where the mouse is. I've tried to offset this by writing something like tooltip.style.left = (event.pageX - 300) + 'px' which sort of works but feels hacky and sometimes at different sizes it will do weird things.

Make sure your tooltip is not in a relative container, as that'll make the absolute position relative to that element.

Location of cursor image

i have the following code to use a "cursor trail" in wordpress.
once inserted, the "cursor trail" is visible, however the image location cannot be found
$(document).ready(function() {
$(document).mousemove(function(e) {
//create img elements having pointer.png in their src
pointer = $('<img>').attr({'src':'pointer.png'});
//and append them to document
$(document.body).append(pointer);
//show them at mouse position & fade out slowly
pointer.css({
'position':'absolute',
top: e.pageY +2 , //offsets
left: e.pageX +2 //offsets
}).fadeOut(1500);
});
});
I have edited the path to the image cursor as follows:
$(document).ready(function() {
$(document).mousemove(function(e) {
//create img elements having pointer.png in their src
pointer = $('<img>').attr({'wp-content/uploads/2012/07/':'meerkat2.gif'});
//and append them to document
$(document.body).append(pointer);
//show them at mouse position & fade out slowly
pointer.css({
'position':'absolute',
top: e.pageY +2 , //offsets
left: e.pageX +2 //offsets
}).fadeOut(1500);
});
});
Please can someone perhaps point out why the path to the image source is incorrect?

Animating an Image to Position of Mouse Click

I am attempting to use JQuery to animate an image to the point where I click my mouse on a div.
The div of the html has an id of "stage" and the image has an id of "player". I have successfully gotten the header to update when the user clicks on the stage, but once I add in the other JQuery to have the image move to my mouseclick on the stage, neither works.
Perhaps its something obvious since I'm new at JQuery but hopefully someone can spot my error.
Here's my code for the JQuery:
$(document).ready(function(){
//alert('It works');
$('#stage').click(function() {
$('#header').html('Image is moving!');
});
$('#stage').click(function(e){
$('#player').animate({
top: e.pageY + 'px';
left: e.pageX + 'px';
}, 800);
});
});
In summary, when someone clicks in the stage div the header above it should change, and the image should move to where the person clicked on the stage.

Two things:
$('#player').animate({
top: e.pageY + 'px';
left: e.pageX + 'px';
}, 800);
Has syntax errors. It should be:
$('#player').animate({
top: e.pageY,
left: e.pageX
}, 800);
Notice I left off 'px' since it isn't necessary.
You can see it working here: http://jsfiddle.net/VBzUw/

How to force positioned elements to stay withing viewable browser area?

I have a script which inserts "popup" elements into the DOM. It sets their top and left css properties relative to mouse coordinates on a click event. It works great except that the height of these "popup" elements are variable and some of them extend beyond the viewable area of the browser window. I would like to avoid this.
Here's what I have so far
<script type="text/javascript">
$(function () {
$("area").click(function (e) {
e.preventDefault();
var offset = $(this).offset();
var relativeX = e.pageX - offset.left;
var relativeY = e.pageY - offset.top;
// 'responseText' is the "popup" HTML fragment
$.get($(this).attr("href"), function (responseText) {
$(responseText).css({
top: relativeY,
left: relativeX
}).appendTo("#territories");
// Need to be able to determine
// viewable area width and height
// so that I can check if the "popup"
// extends beyond.
$(".popup .close").click(function () {
$(this).closest(".popup").remove();
});
});
});
});
</script>

You would compare the window width/height to the window's scrollTop, scrollLeft, etc.
Here are some methods for you to take a look at:
$(window).width()
$(window).height()
$(window).scrollTop()
$(window).scrollLeft()
$(window).scrollWidth()
$(window).scrollHeight()
Take a look at the jQuery documentation on these methods. Depending on exactly the behavior you want, you'll need to compare the width and position of your popup with the currently visible area of the window, determined with the scroll dimensions.
http://api.jquery.com/scrollTop/ .. etc

I figured out a solution. I added the following code in the place of my 4 line comment in the original question.
var diffY = (popup.offset().top + popup.outerHeight(true)) - $(window).height();
if (diffY > 0) {
popup.css({ top: relativeY - diffY });
}
var diffX = (popup.offset().left + popup.outerWidth(true)) - $(window).width();
if (diffX > 0) {
popup.css({ left: relativeX - diffX });
}
#liquidleaf pointed me in the right direction, so +1 and thanks for that.

Get accurate position for a click on a linked image using jquery

I'm working on an app that allows tagging directly on photos via clicking (like Facebook, flickr, et al). However, I can't seem to register the right coordinates for a click on a photo. The problem is the x coordinates seem to be absolute x distance of a click within the browser window(rather than within the photo), while the y coordinates are often negative or incredibly small (negative near the top, small near the bottom). These are the values I get when clicking near the top left corner (which should register as being at or near 0: "x"=>"219", "y"=>"-311"... 219 seems about right when measuring the distance from the left side of the browser window, but the distance should be within the photo area)
I'm currently capturing click events and coordinates on a photo using a regular link (the link contains other relevant photo data) and doing the math (same calculations used in the jquery docs) before passing it along to my rails app. I doubt the method has much to do with the erroneous values, though I suspect the math or some css quirk could be at fault. In either case, I'm absolutely boggled.
JS:
$(document).ready(function(){
clickTag();
});
function clickTag(){
$("#taggable").click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var url = $(this).attr("href");
courl = url + '&x=' + x + '&y=' + y;
$.ajax({
type:"GET",
url: courl,
dataType:"script"
});
return false;
});
}
CSS:
`<div class="content">
<div id="image_container" style="position:relative;width:405px;float:left;height:600px;>
<img alt="taggable_image" src="taggable_image.jpg" />
<div class="tags" id="tags"></div>
</div>
</div>`

for your x and y try using this:
var x = e.pageX - $(this).offset().left;
var y = e.pageY - $(this).offset().top;
let me know if that doesn't work
EDIT: to clarify - you are getting the left and top offset from the dom element directly. the reason i suggest you use the jQuery offset() function is that jQuery is more likely to calculate the correct position cross browser.
EDIT 2: Can you please try to assign the click event to the image as opposed to the link. I have a sneaking suspicion that the link is reporting its top offset as the bottom of the element it encapsulates...

My function is:
function getCoords(target, event)
{
var $target = $(target);
var offset = $target.offset();
var bordersize = $target.attr('border');
return {
x: (event.pageX - offset.left - bordersize) | 0,
y: (event.pageY - offset.top - bordersize) | 0
}
}
call:
$("#image").on('click', function(event){
var coords = getCoords(this, event);
console.log('X: ', coords.x);
console.log('Y: ', coords.y);
});
Note: used fast float2int.