Jquery - Follow The Cursor with a Div

jQuery - Follow the cursor with a DIV

You can't follow the cursor with a DIV, but you can draw a DIV when moving the cursor!

$(document).on('mousemove', function(e){
    $('#your_div_id').css({
       left:  e.pageX,
       top:   e.pageY
    });
});

That div must be off the float, so position: absolute should be set.

jQuery - How to make a div follow a cursor... within its center

Use this code instead

 $(document).bind('mousemove', function(e){
   $('.box').css({
     top: e.pageY - $(".box").height()/2, // just minus by half the height
     left:  e.pageX - $(".box").width()/2 // just minus by half the width
   });
 });

jQuery div that follows cursor movement only within another div

Can't you use css? Something like this: http://jsfiddle.net/felipemiosso/3964w/30/

Just added display:none; on #follower and created a new style .centerdiv:hover #follower { display:block; }

To get the pointer fixed when the cursor stops, add margin-left:-8px; margin-top:-8px; to the #follower.

Updated fiddle http://jsfiddle.net/felipemiosso/3964w/35/

Updated fiddle 2 http://jsfiddle.net/felipemiosso/3964w/41/

JQuery follow mouse curser within in a div centered on page

You can use jQuery's .offset() to get the position of the element relative to the document, then subtract its left and top from the e.pageX and e.pageY values, respectively.

To ensure it stays within the box, you need a lower bound on the mouseX and mouseY values. You could use Math.max or the ifs like I used below.

$(window).mousemove(function(e){
  var offset = $('.container').offset();
   mouseX = Math.min(e.pageX - offset.left, limitX);
   mouseY = Math.min(e.pageY - offset.top, limitY);
   if (mouseX < 0) mouseX = 0;
   if (mouseY < 0) mouseY = 0;
});

JSFiddle demo

Follow mouse position with div (jQuery) - issue when scrolling

why not better use CSS cursor property itself?.As far as i know it's impossible to get cursor position without any mouse-event

 body {
 cursor:url(http://mayadufeu.github.io/img/cursor-auto.svg), auto;
 }

https://jsfiddle.net/0chzmhrd/

UPDATE:I think you can get mouse coordinates by using the code below but no clue how to animate the cursor nicely as the scroll event updates position in steps and not in continuous values.

<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {cursor:none;}
#content {height: 1200px;}
#cursor {position: absolute;}
#counter {position:fixed;margin:1px 0px 0px 100px;}
</style>
</head>
<body>

<p id="counter">counter</p>
<img id="cursor" src="http://mayadufeu.github.io/img/cursor-auto.svg"/>
<div id="content">
  content
</div>

</body>  
<script type="text/javascript">
var a;var b;
$(document).ready(function(){
  $(document).mousemove(function(e){
      a = e.pageX;
      b = e.pageY;
  });

  $(document).mousemove(function(e){
    $("#cursor").css({left:e.pageX, top:e.pageY});
    $('#counter').text('Mouse -> X : '+a+ '  ' + 'Y: '+b);
  });

  $(document).scroll(function (e) { 
    $('#counter').text('Mouse -> X : '+a+ '  ' + 'Y: '+b);
    //can animate here
  });

});
</script>
</html>

Unfortunately doesn't run on JSfiddle idk why so try it out in a HTML file.

How to make a div follow the cursor?

On mousemove get the mouse event coordinates pageX and pageY

var $tooltip = $("#tooltip");

$(document).on("mousemove", function(evt) {
  $tooltip.css({left: evt.pageX, top: evt.pageY});
});

#tooltip{position:absolute;background:red;width:20px;height:20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tooltip"></div>

jQuery: Follow cursor with delay

You can achieve this effect with CSS transitions. In JavaScript you only have to update the position of the div.

$(document).on('mousemove', (event) => {  $('.follower').css({    left: event.clientX,    top: event.clientY,  });});

.follower {  width: 20px;  height: 20px;  background-color: grey;  border-radius: 10px;  transition-duration: 200ms;  transition-timing-function: ease-out;  position: fixed;  transform: translate(-50%, -50%);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="follower"></div>

jQuery Follow the cursor horizontaly with a DIV

$("#da-thumbs li").hover(function () {
     $(this).find("div").show();
 }, function () {
     $(this).find("div").hide();
 });

 $('#da-thumbs li').mousemove(function (e) {
     var $this = $(this);
     $this.find("div").css({
         left: e.pageX - $this.position().left - 120
     });
 });

Here is a JSFiddle with working code.

But with this you will totally lack the "easing"/animation that the demo you linked has. If that's something you want you would have to use a different approach. If so, maybe that's something I can help you with too.

Multiple Divs follow cursor all with variable speeds

Let's start with why it isn't too random. First off these calculations are run for each dot every 40ms. This has interesting consequences.

x_pixels += (mouseX - x_pixels) / randomIntFromInterval(min, max);
y_pixels += (mouseY - y_pixels) / randomIntFromInterval(min, max);

Say the blue dot gets a set of random numbers {1, 4, 7, 8, 4, 3, 10, 6, 6} and the red dot gets a set of random numbers {8, 7, 5, 4, 5, 7, 9, 4, 3}. The problem is the average of these is going to be the same (5.44 and 5.77 respectively). Because the movements are happening so fast they have a little jitter but their bigger movements tend to be the same.

The second problem is that you are using the same x_pixels and y_pixels for each dot. You declare this on top:

var x_pixels = 0,
y_pixels = 0;

But then you don't ever go get the current value back from the dot. You recycle them by += but each dot shares the same position.

I have two solutions for you as this problem is fairly broad and could be interpreted multiple ways. Both of these solutions address the problems listed above by assigning a friction coefficient that stays with the dot. The first example keeps the random friction for the lifetime of the dot, the second changes the friction coefficient every so often.

jsfiddle.net/e3495jmj/1 - First solution

jsfiddle.net/e3495jmj/2 - Second solution

Cheers!

Jquery - Follow The Cursor with a Div