Why the div doesn't appear where I right-click?

Question

Could you please tell me why the div not appearing right where I click? It appears on top-left only.

CSS:

#palette {
    display: none;
    width: 20px;
    height: 20px;
    background-color: red;
}

HTML:

<div id="palette"></div>

Javascript:

window.addEventListener('contextmenu', function(ev) {
  ev.preventDefault();
  document.getElementById('palette').setAttribute('left', ev.pageX);
  document.getElementById('palette').setAttribute('top', ev.pageY);
  document.getElementById('palette').setAttribute('position', 'absolute');
  document.getElementById('palette').style.display = 'block';
  return false;
}, false);

Here's the fiddle:

https://jsfiddle.net/0rL9neeL/

EDIT: Sorry, seems like I haven't explained an issue: Yes, it is the right click. That's where the div should appear.

Answer 1

You can get the coordinates using ev.clientX, ev.clientY for example(which returns the coordinates relative to the viewport in CSS pixels), and then just set the styles with javascript. You can do it this way:

var element = document.getElementById('palette');

window.addEventListener('contextmenu', function(ev) {
  ev.preventDefault();
  var x = ev.clientX;
  var y = ev.clientY;
  element.style.display = 'block';
  element.style.left = x + "px";
  element.style.top = y + "px";

  return false;
}, false);

#palette {
  display: none;
  width: 20px;
  height: 20px;
  background-color: red;
  position: absolute;
}

<div id="palette"></div>

The problem with your code was that you were using setAttribute which sets atributtes to DOM elements, and not inline CSS.

Answer 2

Right-click on the window will display the red square on top-left. You've added event listener for context menu and that's the right-click.

I would suggest trying ev.clientX and ev.clientY to get the mouse coordinate.

https://jsfiddle.net/0rL9neeL/3/

Answer 3

You were attempting to set the left, top, position and display properties of the element itself, rather than the style property (which returns an object) of the element. Also, you need to append your unit of measurement (pixels in this case) on to the value for the left and top properties.

window.addEventListener('contextmenu', function(ev) {
  ev.preventDefault();
  
  // Just get a reference to the DOM element once:
  var pal = document.getElementById('palette');
  
  // Every DOM element has a style property, which exposes
  // a style object that, itself, exposes the various CSS
  // properties. Also, remember, CSS requires units of measurement
  pal.style.display = 'block';
  pal.style.position = 'absolute';
  pal.style.left = ev.pageX + "px";
  pal.style.top = ev.pageY + "px";

  // No need to return false here, that wasn't doing anything for you
  
});

#palette {
    display:none;
    width: 20px;
    height: 20px;
    background-color: red;
}

<div id="palette"></div>

Answer 4

You are setting styling as attribute while in fact you should set it on the style object

window.addEventListener('contextmenu', function(ev) {
  ev.preventDefault();

  var style = {
    left: ev.pageX + 'px',
    top: ev.pageY + 'px',
    position: 'absolute',
    display: 'block'
  }
  Object.assign(document.getElementById('palette').style, style)

  return false;
}, false);

#palette {
  display: none;
  width: 20px;
  height: 20px;
  background-color: red;
}

<div id="palette"></div>