How to add a marker and show a div relative to a mouse click in vanilla Javascript

user_3692313 0
Viewed 495

I'm trying to add a marker and a div next to the mouse click in vanilla Javascript.

Basically if the user clicks anywhere on the page, I want to add a marker where the click was made (a circular small div) and show a div next to the marker.

If the user presses somewhere else, the previous marker and div disappears and they basically appear in the new location of the click

  • What I did:
  • I created the div and I set the display to none, and now I'll try to make it appear when the user clicks anywhere on the page
  • for the marker, I have this Jquery code that I will convert to vanilla JS:
  $(function(){
    $('body').click(function(e){
      var x = e.clientX;
      var y = e.clientY;
    
      var circle=$('<div class="circle"></div>');
          circle.css('top',e.pageY - 15);
          circle.css('left',e.pageX - 15)
          $('body').append(circle);
    })
  })

my goal is to have something like this (picture below) enter image description here

css html javascript
1 Answers

Enable onClick
Set body element to the full size of the page so the onClick is received. Add a width: 100%; and height: 100%; to the body. If this handled by appending content to the body, this step can be skipped.

Moveable Blue Circle
In order to move the cursor on the screen you need to create a singular DOM element, then move it during the onclick event. This is achieved by creating a circle outside of the onclick and updating the CSS properties inside the onclick.

Add White Box
As for the white box container, you can use the same code as for the circle; just offset the top and left css styling.

Example 

$(function(){
  
    // Create a new circle once.
    var circle=$('<div class="circle"></div>');
    var container=$('<div class="container"></div>');
    
    // Retrieve the body and add on click parameter.
    var body = $('body');
    body.append(circle);
    body.append(container);
    body.click(function(e){
    
          // Move circle here.
          circle.css('top', e.pageY - 15);
          circle.css('left', e.pageX - 15)
          if (circle.css('display') == 'none')
            circle.css('display', 'block');
          
          // Move container here.
          container.css('top', e.pageY + 20);
          container.css('left', e.pageX - 15);
          if (container.css('display') == 'none') {
            container.css('display', 'block');
            container.click(function(e) {
              e.stopPropagation(); // Prevents moving circle when clicking on the container.
            })
          }
    })
  })
html, body {
  width: 100%;
  height: 100%;
  background-color: grey;
}

.circle {
  display: none;
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: blue;
  border-radius: 20px;
}
.container {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid black;
  height: 200px;
  width: 300px;
  border-radius: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

user_145784340
Related