CODEWITHSUNDEEP
javascripthtmlcss
Wandrille
Wandrille

Reputation: 6811

Center an element (Absolute) on the click

So, when I click on my screen, i want display a circle (centered verticaly and horizontaly) where I click.

My poblem is that I get all the time the corner top left of my element.

Here is a Plunker: https://plnkr.co/edit/DLeQuK0IKxHwUM1sWk0T

I have tried with

margin-left:-50%

but without success.

Edit: I got answers very quickly, thanks!

The Answer is to add to my class:

transform:translate(-50%, -50%);
display: block;


// Code goes here

function printMousePos(event) {
  var element = document.getElementById("body");
  var para = document.createElement("div");
  para.className = "circle";
  para.setAttribute("style", "position : absolute;left:" + event.clientX + "px;top:" + event.clientY + "px");

  element.appendChild(para);
  console.log(event.clientX, event.clientY);
}

document.addEventListener("click", printMousePos);
/* Styles go here */

body {
  position: relative;
  height: 1000px;
}

.circle {
  color: blue;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 20px;
  border-color: blue;
  border-radius: 50%;
}
<body id="body">
  Click Everywhere
</body>

Upvotes: 1

Views: 153

Answers (5)

Andrew Bone
Andrew Bone

Reputation: 7291

As we know the total width of the element will be 240 we can take half of that off the x and y coords like so.

function printMousePos(event) {
  var element = document.querySelector("body");
  var para = document.createElement("div");
  para.className = "circle";
  para.setAttribute("style", "position : absolute;left:" + (event.clientX - 120) + "px;top:" + (event.clientY - 120) + "px");

  element.appendChild(para);
  console.log(event.clientX, event.clientY);
}

document.addEventListener("click", printMousePos);
body {
  position: relative;
  height: 1000px;
}

.circle {
  color: blue;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  border: solid 20px blue;
  border-radius: 50%;
}
Click anywhere

Upvotes: 1

&#193;lvaro Touz&#243;n
&#193;lvaro Touz&#243;n

Reputation: 1230

hre is a plunker, but there is something i cantundersand. Why the delay is more than the radus?

// Code goes here

function printMousePos(event) {
  var element = document.getElementById("body");
  var para1 = document.createElement("div");
  para1.className = "circle";
  para1.setAttribute("style", "position : absolute;left:" + (event.clientX-125) + "px;top:" + (event.clientY-140) + "px");
  element.appendChild(para1);
  var para2 = document.createElement("div");
  para2.className = "point";
  para2.setAttribute("style", "position : absolute;left:" + (event.clientX-20) + "px;top:" + (event.clientY-30) + "px");

  element.appendChild(para2);
  console.log(event.clientX, event.clientY);
}

document.addEventListener("click", printMousePos);

Upvotes: 1

Bellian
Bellian

Reputation: 2140

You can setup a additional container and place it exactly on the click location and set it to 0 width and height.

Then you place the message container in it and use the css transform property to translate it half way back: https://www.w3schools.com/cssref/css3_pr_transform.asp

<div class="container">
    <div calss="circle">
        Your text.
    </div>
</div>
<style>
    .container{
        position:absolute;
        top: XXXpx;
        left: XXXpx;
        width: 0;
        height: 0;
        overflow: show;
    }
    .circle {
        transform: translateX(-50%) translateY(-50%);
        width: 100px;
        height: 50px;
        background: #aaa;
    }
</style>

No need for tricky JavaScript tricks.

You can also add a fixed offset to the box by adding:

.circle {
    transform: translateX(-50%) translateY(-50%);
    width: 100px;
    height: 50px;
    background: #aaa;
    position: absolute;
    top: <XOFFSET>px;
    left: <YOFFSET>px;
}

Upvotes: 1

Andrii Starusiev
Andrii Starusiev

Reputation: 7764

Left, top of the div are in your cursor position. You need to move your circle for 50% left and top.

function printMousePos(event) {
  var element = document.getElementById("body");
  var para = document.createElement("div");
  para.className = "circle";
  para.setAttribute("style", "transform:translate(-50%, -50%); position : absolute;left:"+event.clientX+"px;top:"+event.clientY+"px");

  element.appendChild(para);
  console.log(event.clientX, event.clientY);
}

document.addEventListener("click", printMousePos);

Upvotes: 1

Daniele Dolci
Daniele Dolci

Reputation: 884

add

transform: translate(-50%,-50%);
display: block;

to .circle class

Upvotes: 3

Related Questions