1

I am using jQuery to track the movement of my cursor on screen (Both for X & Y), I am creating a border of 100px by 100px on a div with an id, and I am making the border change position so it can follow the cursor. I know I can change the cursor to an image in CSS, but I believe there are size restrictions on that.

Basically, for the end product, I would like for the cursor to stop moving after a certain point in the window. (for example if you look at the fiddle below, and quickly move your cursor out of the 'result' window, you will see the border box is not at the edge of the window) So I am looking for a way to make this more responsive, and have the box at the edge of the window when scroll out of the window.

The Fiddle below should help you understand what I need help with.

http://jsfiddle.net/tygbkvyr/1/

The JS I am using is as shown.

jQuery(document).on("mousemove", function(event) {
    jQuery('#theImage').css({left: event.pageX, top: event.pageY});
});

Thank you for all the help

DevStacker
  • 675
  • 10
  • 23
  • something like this? http://jsfiddle.net/tygbkvyr/2/ –  Oct 30 '15 at 15:28
  • That is working better than mine, I don't mean to be picky, but when you move the cursor out of the window, not much of the border is left showing (as shown in the image http://imgur.com/Dc4D080) I would like for the edge of the border to be touching the edge of the window if possible. Thank you – DevStacker Oct 30 '15 at 15:35

1 Answers1

0

Do you have to use jQuery? see this SO post regarding changing the cursor with CSS: Using external images for CSS custom cursors

Community
  • 1
  • 1
imdaveho
  • 101
  • 8