Guide to aligning the center of a div with the mouse cursor using JavaScript during mouse movement

Question

Guide to aligning the center of a div with the mouse cursor using JavaScript during mouse movement

I've been trying to center a div element with the mouse cursor, following its movement. However, the current code I have offsets the positioned div from the cursor instead of aligning it perfectly.

PROCESS

The concept behind my code is to display and track the .pointer element within the .post-entry div when the mouse enters, moving along with the cursor, and hiding when the cursor leaves the div.

SOURCE CODE

HTML post item:

<article class="col-md-4 col-sm-6 post-entry">
    <a href="#" title="">
        <figure class="post-thumb">
            <img src="http://placehold.it/300x300" alt="">
            <div class="pointer" style="background: red;"></div>
        </figure><!-- End figure.post-thumb -->
    </a>
</article><!-- End article.col-md-4 post-entry -->

JavaScript:

$('.entry .post-entry').each(function() {
  $(this).on("mouseenter", mouseEnter);
  $(this).on("mousemove", mouseMove);
  $(this).on("mouseleave", mouseLeave);
});


function mouseEnter(event) {

  console.log('enter');

  var target = $(this);
  var dot = target.find('.pointer');

  var mX = (event.clientX);
  var mY = (event.clientY);

  set(
    dot, {
      x: mX,
      y: mY,
      force3D: !0
    }
  );

};

// Remaining JavaScript functions

ISSUE / PREVIEW

Although the span follows the mouse cursor, it does not align at the center but rather appears offset. View live demo here

I attempted adjusting the mX and mY variables in different ways, but without success. Likewise, @hiEven's suggested solution did not resolve the issue either.

The challenge lies in properly dividing the position for the .pointer by half, which I am struggling to implement effectively.

UPDATE

I've created two new Codepen projects showcasing the issue:

Without images: http://codepen.io/anon/pen/GqGOLv. The brown pointer correctly tracks the cursor over the first item but behaves strangely with the red pointer on the second item.

With images: http://codepen.io/anon/pen/QExOkx. Similar issues persist, especially when hovering over specific areas of the items.

The objective is to ensure that both pointers accurately follow the mouse cursor, particularly when an image is involved.

In addition, adding a margin-left disrupts the alignment of the pointer with the cursor, highlighting the complexity of achieving perfect positioning.

I'm puzzled as to why it works flawlessly in certain instances but encounters glitches with other scenarios.

javascript jquery css

Answer 1

Answer №1

Give this code a try

<html>
  <head>
    <style>
          #mouse_div{
            position: absolute;
            background-color: black;
          }
    </style>
    <script>
          var div_width = 100;
          var div_height = 100;
          var div_x, div_y;
          function mouse_position(event){
            var mouse_x = event.clientX;
            var mouse_y = event.clientY;
            document.getElementById("mouse_div").style.width = div_width + "px";
            document.getElementById("mouse_div").style.height = div_height + "px";
            div_x = mouse_x - (div_width / 2);
            div_y = mouse_y - (div_height / 2);
            document.getElementById("mouse_div").style.left = div_x + "px";
            document.getElementById("mouse_div").style.top = div_y + "px";
          }
    </script>
  </head>
  <body onmousemove="mouse_position(event)" onload="mouse_position(event)">
    <div id="mouse_div"></div>
  </body>
</html>

This script tracks your mouse's coordinates and adjusts the size and position of a specified div. It calculates the x-coordinate by subtracting half of the div's width from the mouse's x value to center it horizontally. The same calculation is done for the y-coordinate. Finally, the script uses JavaScript to set the CSS properties of the div element to position it correctly based on the mouse movements.

Important: Ensure that the div element's position is set to absolute for the script to work correctly.

Answer 2

Give this code a try

<html>
  <head>
    <style>
          #mouse_div{
            position: absolute;
            background-color: black;
          }
    </style>
    <script>
          var div_width = 100;
          var div_height = 100;
          var div_x, div_y;
          function mouse_position(event){
            var mouse_x = event.clientX;
            var mouse_y = event.clientY;
            document.getElementById("mouse_div").style.width = div_width + "px";
            document.getElementById("mouse_div").style.height = div_height + "px";
            div_x = mouse_x - (div_width / 2);
            div_y = mouse_y - (div_height / 2);
            document.getElementById("mouse_div").style.left = div_x + "px";
            document.getElementById("mouse_div").style.top = div_y + "px";
          }
    </script>
  </head>
  <body onmousemove="mouse_position(event)" onload="mouse_position(event)">
    <div id="mouse_div"></div>
  </body>
</html>

This script tracks your mouse's coordinates and adjusts the size and position of a specified div. It calculates the x-coordinate by subtracting half of the div's width from the mouse's x value to center it horizontally. The same calculation is done for the y-coordinate. Finally, the script uses JavaScript to set the CSS properties of the div element to position it correctly based on the mouse movements.

Important: Ensure that the div element's position is set to absolute for the script to work correctly.

Answer 3

Answer №2

Do you want the circle to follow your mouse cursor?

Try this:

transform: `translate(calc(${mx}px - 50%), calc(${my}px - 50%))

Check out the demo here

Answer 4

Do you want the circle to follow your mouse cursor?

Try this:

transform: `translate(calc(${mx}px - 50%), calc(${my}px - 50%))

Check out the demo here

Answer 5

Answer №3

After reviewing my latest update, I realized that I had not followed the correct formula required to center the element .pointer to the mouse.

To achieve this effect in the mouseMove function, the calculation should be as follows:

var height = dot.height();
var width = dot.width();

var offset = target.offset();
var w = target.width();
var h = target.height();
var top = offset.top;
var left = offset.left;

var mX = (event.clientX - left) - width / 2 - 15; // 15 = padding
var mY = (event.clientY - top) - height / 2;

This formula ensures that the DOM element .pointer will accurately track the movement of the user's mouse. Although I do not fully understand why it works, subtracting the offset from the previous item from the current clientX coordinates resets the position of the second item to zero, effectively causing the pointer to align with the left side of each item.

You can view a demonstration of the code in action here: http://codepen.io/anon/pen/AXdxZO?editors=0110

Answer 6

After reviewing my latest update, I realized that I had not followed the correct formula required to center the element .pointer to the mouse.

To achieve this effect in the mouseMove function, the calculation should be as follows:

var height = dot.height();
var width = dot.width();

var offset = target.offset();
var w = target.width();
var h = target.height();
var top = offset.top;
var left = offset.left;

var mX = (event.clientX - left) - width / 2 - 15; // 15 = padding
var mY = (event.clientY - top) - height / 2;

This formula ensures that the DOM element .pointer will accurately track the movement of the user's mouse. Although I do not fully understand why it works, subtracting the offset from the previous item from the current clientX coordinates resets the position of the second item to zero, effectively causing the pointer to align with the left side of each item.

You can view a demonstration of the code in action here: http://codepen.io/anon/pen/AXdxZO?editors=0110

Guide to aligning the center of a div with the mouse cursor using JavaScript during mouse movement

UPDATE

Answer №1

Answer №2

Answer №3

Similar questions

Setting a fixed data value within a div for subsequent retrieval through a function

Tips on implementing a circular progress bar with locomotive scroll functionality

Email address string loses the '+"' when using AJAX

Avoid having logs displayed on the server end when utilizing console.log commands

Integrate the dForm plugin with a convenient time picker widget

Error: JSON parsing failed due to an unexpected character, resulting in null data

How can you notice when a DOM element is deleted from the page?

Surprising outcomes when using Mongoose

Issue encountered: Cannot locate module: Error message - Unable to find 'stream' in 'C:devjszip-test ode_modulesjsziplib' folder

Using Express JS to implement a post method for multipart form data transmission

Building a Meteor query in MongoDB using $in operator while handling duplicate values

Cease processing ajax requests on the server side

What is the best way to retrieve a linked filter in Vue from another?

Emit Observables within deeply nested callback functions

The battle between dynamic PDF and HTML to PDF formats has been a hot

Obtaining the client's IP address using socket.io 2.0.3: a comprehensive guide

Discovering the true width of elements that have overflow hidden in IE7 using jQuery

Obtain the value of a URL parameter on a webpage without needing to refresh the

The function DataTable is not defined in jQuery(...)

Display a division upon choosing an option