How to get position of mouse pointer in JavaScript

Zaid Hassan — Sun, 21 Jan 2024 10:03:26 +0000

By tracking the mouse pointer, we can increase interactivity of our website.

Some things which we can do :-

Dynamic Cursor: We can change our cursor's appearance based on its position.
User-driven animation: We can animate elements based on how the user moves the cursor.
Games: We can track the mouse to move the character according to the movement of the cursor.

... and there are endless possibilities.

Let us not learn how to do it.

We will make a div change its position according to our cursor and make it follow our cursor.

Note: In this tutorial I have only included those parts of the code that are required to move the mouse pointer and not the parts which displays its position on screen

<div id="follower"></div>

Here we have our div with id="follower", we will change its position to make it follow our cursor.

#follower {
  position: absolute;
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  background: whitesmoke;
  transition: 0.1s;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

First thing we do is we give our id a position of absolute. Which will enable us to change its position with respect to its container, in this case it is the view-port (the visible area of the webpage), because we have not explicitly mentioned position: relative in its container which is the body of our HTML. You can also add some transition, box-shadow, border-radius etc to make it look good.

let follower = document.querySelector("#follower");

let mouseFollower = (e) => {
    let x = e.clientX;
    let y = e.clientY;
    follower.style.top = y + "px";
    follower.style.left = x + "px";
        console.log(x + " " + y);
}

document.addEventListener("mousemove", (e) => {
    mouseFollower(e);
})

Now we will write some JavaScript.

Select the HTML element with the id attribute set to "follower" and assign it to the variable follower.

let follower = document.querySelector('#follower');

Make a function mouseFollower that accepts an event parameter e.

const mouseFollower = e => {};

Save the value's of X and Y coordinates to 'x' and 'y' variables, e.clientX represents the X-coordinate, and e.clientY represents the Y-coordinate.

let x = e.clientX;
let y = e.clientY;

Change the position of the div 'follower', for top we will use Y coordinates and for left we will use X coordinates.

follower.style.top = y + "px";
follower.style.left = x + "px";

And we will console.log our x and y coordinates to see what is the position of our cursor. You can modify this code to even display it on your webpage.

console.log(x + " " + y);

You can use the position of your cursor to do more thing's. tag me on X showing somethings you make using this.

And we are done!

We have our cursor being tracked and a div following it.

Follow me on X and join me on my journey. // Detect dark theme var iframe = document.getElementById('tweet-1745250569214910532-620'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1745250569214910532&theme=dark" }

Different ways to center a div

Zaid Hassan — Sat, 20 Jan 2024 03:50:36 +0000

Different ways to center a div demonstrates how we can center a div using different css properties. It discusses use of 'flex box', 'css grid' and a third way which is not very conventional, i.e by using 'position'.

To center a div using Flex.

Centering a div using flex box is really simple. Here is how.

<div class="flex-container">
    <div class="item"></div>
</div>

.flex-container {
    display: flex;
    justify-content: center; //center item horizontally
    align-items: center; //center item vertically
    height: 100vh;
}
.item {
    height: 100px;
    width: 100px;
    background: black;
}

Note: You need to give the container a height to center the item vertically.

To center a div using Grid.

Centering a div using grid is even simpler. Here is how.

<div class="grid-container">
    <div class="item"></div>
</div>

.grid-container {
    display: flex;
    place-items: center; // center's item horizontally and vertically
    height: 100vh;
}
.item {
    height: 100px;
    width: 100px;
    background: black;
}

To center a div using Position.

Centering a div using position is not something you will normally do. Here is how to center a div using `position: absolute;`.

<div class="container">
    <div class="item"></div>
</div>

.container {
    position: relative;
    height: 100vh;
}
.item {
    position: absolute;
    height: 100px;
    width: 100px;
    background: black;
}

const container = document.querySelector('.container');
const item = document.querySelector('.item');


// clientHeight/clientWidth gives us the height/width of the element in pixels

item.style.top = (container.clientHeight/2) - (item.clientHeight/2) + 'px';

item.style.left = (container.clientWidth/2) - (item.clientWidth/2) + 'px';

Follow me on X to join me in my tech journey. // Detect dark theme var iframe = document.getElementById('tweet-1748337857746383178-326'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1748337857746383178&theme=dark" }