How to open own context menu at cursor coordinates? - javascript

I have own my contextmenu which I want to call and set its coordinates to X and Y coordinates. How can I do that?
https://jsfiddle.net/coolerprinter/xg10vzeL/
This code isn't valid and does not work:
$("body").on("contextmenu", function(e){
var x = function(e) {
return e.pageX
};
var y = function(e) {
return e.pageY
};
$(".contextmenu").css({
"display": "block",
"left": x,
"top": y
});
return false;
});

Firstly you need to hook the event to the document, not the body. Secondly you need to provide the actual values of pageX and pageY to the left and top CSS properties, not functions. Try this:
$(document).on("contextmenu", function(e) {
e.preventDefault();
$(".contextmenu").css({
"display": "block",
"left": e.pageX,
"top": e.pageY
});
});
Updated fiddle
To expand this to behave like a normal context menu, where it disappears when a click occurs outside it, then you need an additional click handler on the document:
$(document).on({
contextmenu: function(e) {
e.preventDefault();
$(".contextmenu").css({
"display": "block",
"left": e.pageX,
"top": e.pageY
});
},
click: function(e) {
var $target = $(e.target);
if ($target.is('.contextmenu') || $target.closest('.contextmenu').length) {
e.preventDefault();
} else {
$(".contextmenu").hide();
}
}
});
Example fiddle

Related

Click trigger with pass X, Y coordinates value

When we are click in any HTML element we can get X, Y coordinate in our mouse.
Is it possible in jquery or javascript trigger click event with pass X, Y Coordinates value of HTML element and also pass element z-index value.
Only call #block2 not call #block1.
JS
$(document).ready(function(){
$('#block1 div').on('click', function(e)
{
console.log(document.elementFromPoint(e.pageX, e.pageY));
var X = e.pageX;
var Y = e.pageY;
$('#block1').css({'pointer-events':'none'});
$('#block1 div').css({'pointer-events':'none'});
var eobj = new jQuery.Event("click");
obj.pageX = X;
obj.pageY = Y;
$('#time_slice').trigger(obj);
});
});
$('#block2').on('click', function(e){
console.log(document.elementFromPoint(e.pageX, e.pageY));
$('#block1').css({'pointer-events':'auto'});
$('#block1 div').css({'pointer-events':'auto'});
});
Jsfiddle
You can create a MouseEvent and set clientX and clientY values.
Then dispatch that event.
window.addEventListener("click", function (event) {
console.log(`you clicked at ${event.x},${event.y}`);
});
const event = new MouseEvent('click', {
'clientX' : 200,
'clientY' : 500
});
window.dispatchEvent(event);

Passing data between mouse events

How can one pass events between mousedown and mouseup specifically? In my mousedown event I create a circle and add it to the DOM, in my mouseup I want to animate the circle. I was hoping to do this by referencing the node without attaching an ID, if possible.
Here's a snippet of my code:
// Mouse down
hitArea.addEventListener('mousedown', function(e) {
var el = new createCircle();
mask.appendChild(el);
TweenMax.set(el, {
transformOrigin: '50% 50%',
x: e.clientX - hitDimensions.left,
y: e.clientY - hitDimensions.top
});
});
// Mouse up
hitArea.addEventListener('mouseup', function(e) {
// Reference to el needed
animateCircle(el, e);
});
You can view my in progress code here: http://codepen.io/getreworked/pen/VjzyLL
You can just use closures:
var el;
hitArea.addEventListener('mousedown', function(e) {
el = new createCircle();
mask.appendChild(el);
TweenMax.set(el, {
transformOrigin: '50% 50%',
x: e.clientX - hitDimensions.left,
y: e.clientY - hitDimensions.top
});
});
// Mouse up
hitArea.addEventListener('mouseup', function(e) {
if(el)
animateCircle(el, e);
});

Right Click - Getting the menu appears next to the Cursor

I have script below, in which when I do right click on the cursor, a menu will appear. A problem is a menu appears elsewhere instead of next to the cursor.
What I am missing here. Please take a look.
Thanks.
menu.show = function (e) {
if (menu.visible) {
menu.close();
} else {
var pos = $(this).offset();
pos.top = e.pageX - this.offsetLeft;
pos.left = e.pageY - this.offsetTop;
panel.css({ width: '100%', height: $(document).height(), 'background-color': 'transparent' }).show();
menu.data('trigger', $(this));
menu.css(pos).fadeIn('fast');
menu.visible = true;
}
return false;
};
I also try this, but it doesn't work, either.
menu.show = function (e) {
if (menu.visible) {
menu.close();
} else {
var pos = $(this).offset();
top = e.pageX;
left = e.pageY;
panel.css({ width: '100%', height: $(document).height(), 'background-color': 'transparent' }).show();
menu.data('trigger', $(this));
menu.css(pos).fadeIn('fast');
menu.visible = true;
}
return false;
};

cursor with a following div

I have a div that follows the cursor around the screen.
How can I tell the script to act like that only in a specific area of the page?
$(document).bind('mousemove', function(e){
$('.galleria-counter').css({
left: e.pageX,
top: e.pageY
});
});
JSFIDDLE — https://jsfiddle.net/83k4ahdm/1/
Thanks.
Don't mind me posting another answer of what I would consider most 'correct' :
$('#here').hover(function() {
$(this).on('mousemove', function(e) {
$('.galleria-counter').css({
left: e.pageX,
top: e.pageY
});
});
},
function() {
$(this).off('mousemove');
});
https://jsfiddle.net/83k4ahdm/5/
bind your script to only div instead of document
$('#here').bind('mousemove', function(e){
$('.galleria-counter').css({
left: e.pageX,
top: e.pageY
});
});
updated fiddle : fiddle
First, try not to use left and top properties when you want to move something and prefere translate:transform
Second, you can delimited your call by trying something like this:
if( e.pageX >= div.offset().left &&
e.pageX <= div.offset().left + div.width ||
e.pageY >= div.offset().top &&
e.pageY <= div.offset().top + div.height ) {
$('.galleria-counter').css({
left: e.pageX,
top: e.pageY
});
}
Hope it's help :)

hover effect after bind an image with mouse

I have this code to bind an image with mouse,
$(function(){
var $i = $('#gg');
$( "#gg" ).click(function() {
$(document).bind('mousemove',function(e){
$i.css({
left: e.pageX -42,
top: e.pageY -60
});
});
});
});
after bind i want to hide another image on mouseover.
Look at this FIDDLE
please give me any idea.
$(function () {
var $i = $("#gg")
$i.click(function () {
$i.css('pointer-events','none');
$(document).on('mousemove', function (e) {
$i.css({
left: e.pageX - 42,
top: e.pageY - 60
});
});
$('#gg1').one('mouseenter', function() {
$(this).hide();
});
});
});
FIDDLE

Categories

Resources