Right click javascript context menu appears in wrong place - javascript

I have a very simple right click context menu in javascript using jquery, implemented using some ul elments.
The menu appears but always in the wrong place on the page. I have tried using offsets etc when setting the X and Y but it always appears out of place.
The blue square is where the right click took place but the menu appears below and right:
This is my snippet:
timelineRef.on('contextmenu', function(props) {
props.event.preventDefault();
var e = props.event;
var x = e.pageX;
var y = e.pageY;
// var x = e.pageX - e.currentTarget.offsetWidth;
// var y = e.pageY - e.currentTarget.offsetHeight;
// var y = e.clientY - e.currentTarget.offsetTop;
// var x = e.clientX - e.currentTarget.offsetLeft;
console.log(x);
console.log(y);
// Show contextmenu in the right position (the mouse)
$wnd.jQuery('#custom-menu-id').finish().toggle(100).css({
//position: "absolute",
top: y + "px",
left: x + "px"
}).addClass("show");
});
The HTML is like this:
<ul class="{style.custom-menu}" id="custom-menu-id">
<li data-action="abc">Edit</li>
<li data-action="ayz">Select All</li>
</ul>
As you see I have tried many variations of setting x and y. I have the feeling it has to do with where the ul is in the page. It has many parents. If I make a simple jfiddle it works ok but then inside this complicated layout it doesn't.
Any help would be great.
Thanks

Old problem, but for me it was because of a relative position of a div.

Related

AngularJS - draggable bootstrap modal

I am using an AngularJS directive for modals, to make them draggable.
This is the directive.
In the demo, you can clearly see that if you drag it (especially left and right) it is slower than your mouse. I understand why this happens (the JavaScript calculates position relative to it's starting position, so in my 1920x1080 screen it goes from -1200px to 1920px on the x axis). And I understand there is a need to use offset instead of position, but after many tries I failed to make it that.
This is the relevant JavaScript code:
element.on('mousedown', function (event) {
// Prevent default dragging of selected content
event.preventDefault();
startX = event.screenX - x;
startY = event.screenY - y;
$document.on('mousemove', function mousemove(event) {
y = event.screenY - startY;
x = event.screenX - startX;
element.css({
top: y + 'px',
left: x + 'px'
});
});
});
How can I make it rely on the offset and move together with the mouse and not slower?
Try this one: http://plnkr.co/edit/QxIdGj . I have hardcoded 2 values, which you shouldn't do. Your "mistake" was that you were putting the draggable directive in the wrong element. I added the draggable directive to <div class="modal-content"> which is what I believe is the element that you want moved.
I also changed your element.css({ to
element.css({
top: event.clientY - 30 + 'px',
left: event.clientX - 10 + 'px'
});
It's using .clientX/Y which is the actual position of the mouse, without the need of further calculations.

Unable to draw in canvas after moving its position in the page [duplicate]

I am trying to use getBoundingClientRect to get the coordinates of my click on canvas, but am always getting the same result.
My code is here: http://fiddle.jshell.net/nH74F/1/
As you can see i always get 8,8
No idea why, is there another way to get this info?
That's because you always use the absolute position of the element returned by getBoundingClientRect, and not the mouse position.
Try this instead:
canvas.addEventListener('click', function(e) { // use event argument
var rect = canvas.getBoundingClientRect(); // get element's abs. position
var x = e.clientX - rect.left; // get mouse x and adjust for el.
var y = e.clientY - rect.top; // get mouse y and adjust for el.
alert('Mouse position: ' + x + ',' + y);
...
Modified fiddle

Change position of div based on mouse pointer

I am trying to position a div based on mouse position, I managed to get it to work 50%.
The problem is that DIV always seems to be much lower than the actual mouse position, I try to minus the offset, no luck.
Basically what I want is to float the div(the NEXT link in jsfiddle) vertically, but the DIV should not be able to go outside of the container it is in(the div that has the image in the jsfiddle)
here is the jsfiddle: http://jsfiddle.net/LYmVH/7/
below is the JS, which is also in the jsfiddle:
$('.post-single-content').mousemove(function(e){
var height=e.pageY,
height1 =$('.content-top').height();
$('.btnNext').css({top: (e.pageY + 50) + "px"});
});
You need measure against the top of the parent element since it's absolutely positioned in it.
Try changing your JS to:
$('.post-single-content').mousemove(function(e){
var top = (e.pageY - $(this).offset().top) + 'px';
$('.btnNext').css({ top: top });
});
Upon reading some comments lemme update, by making use some basic math and create "collision". Somthing like:
$('.post-single-content').mousemove(function(e){
var y = e.pageY, // mouse y axis position
tHeight = $(this).height(), // container height
bHeight = $('.btnNext').height(), // button height
oTop = $(this).offset().top, // offset top position of container
abBot = tHeight - $('.btnNext').height(), // absolute top of button when at bottom
bHalf = bHeight / 2, // half button height
top = y - oTop - bHalf, // initial top pos of button
bot = y - oTop + bHalf; // bottom of button while moving
if (top < 0) top = 0; // ensure button doesn't go to far north
else if (bot > tHeight) top = abBot; // ensure it cant go past south
$('.btnNext').css({ top: top }); // 'px' not neccesary
});
jsFiddle

How to center a new div based on mouse cursor

Hi I am trying to place a div in the center of my mouse course when I click a link
I have something like
<a id='btn' href='#' ><img src='test.png' /></a>
I want to see the new div overlay on my test.png and I want my mouse curse be the center vertically and horizontally of the new div.
My js
var contentDiv = document.createElement('div');
var img = document.createElement('img');
contentDiv.setAttribute('class','test1');
img.src='newimg.png';
contentDiv.appendChild(img);
$("#btn").on('click', function(e){
$('body').append(contentDiv)
var w = $(contentDiv).width()/2
var h = $(contentDiv).height()/2
var x = e.pageX - h //- $(this).offset().left;
var y = e.pageY - w //- $(this).offset().top;
$(contentDiv).css({top: y, left: x, 'transform': 'scale(.2)'})
e.preventDefault();
})
My code won't put my mouse cursor as the center of the new div. Can anyone help me about it? Thanks so much!
Try
var x = e.pageX - w
var y = e.pageY - h
Example
That's the jQuery way to get the mouse position (e.pageX), so you could also do:
var x = e.clientX - w;
var y = e.clientY - h;
Example
That's the pure-JS way.
Your problem was you were subtracting height from x and width from y, while it should be the other way around. Remember, x is left and right, y is up and down. In computer science, up decreases y, and down increases y, right increases x, left decreases x.
Don't get them mixed up.

Why is dragging with css translate jumping?

I am trying to drag a container using transform translate but something is causing a jumpy behavior and I can't figure out what is the cause.
UPDATE: This must work on elements when their container is not always positioned at 0,0 from the document.
http://jsfiddle.net/dML5t/2/
HTML:
<div id=container style="position:absolute;left:50px;top:50px;width:500px;height:500px;background-color:red;">
<div id=tcontainer style="position:relative;left:50px;top:50px;width:400px;height:400px;background-color:green;">
<div id=move style="position:relative;left:20px;top:20px;height:150px;width:150px;background-color:lightgray;">
</div>
</div>
Javascript:
obj = {startPositionX:0,startPositionY:0};
$('#move').on("mousedown",function(){
var move = $(this);
obj.startPositionX=event.offsetX+$('#tcontainer').offset().left;
obj.startPositionY=event.offsetY+$('#tcontainer').offset().top;
$(document).on("mousemove",function(e){
console.log("dragging", e.pageX-obj.startPositionX, e.pageY-obj.startPositionY);
move.css('transform','translate('+(e.pageX-obj.startPositionX)+'px, '+(e.pageY-obj.startPositionY)+'px)');
});
});
$(document).on("mouseup",function(){
$(this).off("mousemove");
});
OffsetX and OffsetY may give you cursor pos relative to an element which is hovered now. You saved initial coordinates in mousedown. When mousemove was triggered your this coordinates changed a little, so when you subtract one from initials you got zeros (or 1px of difference) and your div went to top left corner. After it happaned your cursor hovered body element and in mousemove you get coordinates related to body. So when you subtract your zeros from the new coordinates you get real coordinates and your div go to the right place. Then you will get coordinates related to dragging div and will get zeros again, then real coords and so on.
Use pageX and pageY instead! fiddle
$('.move').on("mousedown",function(me){
var move = $(this);
var lastOffset = move.data('lastTransform');
var lastOffsetX = lastOffset ? lastOffset.dx : 0,
lastOffsetY = lastOffset ? lastOffset.dy : 0;
var startX = me.pageX - lastOffsetX, startY = me.pageY - lastOffsetY;
$(document).on("mousemove",function(e){
var newDx = e.pageX - startX,
newDy = e.pageY - startY;
console.log("dragging", e.pageX-startX, e.pageY-startY);
move.css('transform','translate(' + newDx + 'px, ' + newDy + 'px)');
// we need to save last made offset
move.data('lastTransform', {dx: newDx, dy: newDy });
});
});
$(document).on("mouseup",function(){
$(this).off("mousemove");
});
You need save original coords of your div (move.offset()) and use mouse offset (e.pageX-startX, e.pageY-startY) to get new coords.

Categories

Resources