Page 2 of 2 FirstFirst 12
Results 11 to 13 of 13

Thread: How to position an animated cursor

  1. #11
    Join Date
    Jun 2011
    Posts
    55
    Thanks
    32
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much! It looks great on the site.

  2. #12
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,251
    Thanks
    75
    Thanked 3,395 Times in 3,356 Posts
    Blog Entries
    12

    Default

    Does look pretty good. I was playing around with this a bit more and realize that I probably made the margins too large:

    Code:
    #anicursor {position: fixed; background-image: url(ani.gif); width: 32px; height: 32px; visibility: hidden; z-index: 10000; margin-left: 5px; margin-top: 5px;}
    It has to have some margin, otherwise it will cover links, making them unclickable. But using 5px seems to offset it more than necessary from the links. I'm using 2px now, and that seems better:

    Code:
    #anicursor {position: fixed; background-image: url(ani.gif); width: 32px; height: 32px; visibility: hidden; z-index: 10000; margin-left: 2px; margin-top: 2px;}
    Also, though this is less important, I made the script code more efficient. This doesn't change the functionality, but may make it more responsive to the user moving the mouse:

    Code:
    <script>
    (function(){
    	var cur = document.getElementById('anicursor').style, lcur = new Image(), w = window, d = document;
    	lcur.src = 'ani-on.gif'; // path to link cursor
    	d.addEventListener('mouseover', function(e){
    		var linktarget = e.target.tagName === 'A' || e.target.parentNode.tagName === 'A';
    		cur.backgroundImage = linktarget? 'url(' + lcur.src + ')' : '';
    		}, false
    	);
    	d.addEventListener('mousemove', function(e){
    		var x = e.x, y = e.y;
    		cur.visibility = x > w.innerWidth - 4 || y > w.innerHeight - 4? '' : 'visible';
    		cur.left = x + 'px';
    		cur.top = y + 'px';
    		}, false
    	);
    	w.addEventListener('mouseout', function(e){
    		cur.visibility = '';
    		}, false
    	);
    })();
    </script>
    Edit: On second thought, played with it a bit more and changed 2 to 4 within the script (red, two places), seems better. This controls how quickly and efficiently the custom cursor disappears at the right edge and bottom edge of the browser when the mouse is leaving the page.
    Last edited by jscheuer1; 08-04-2017 at 07:54 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    balki (08-05-2017)

  4. #13
    Join Date
    Jun 2011
    Posts
    55
    Thanks
    32
    Thanked 0 Times in 0 Posts

    Default

    Thank you again! I've applied the fixes and everything looks great.

Similar Threads

  1. Cursor position in designMode IFrame
    By Jas in forum JavaScript
    Replies: 18
    Last Post: 05-08-2009, 08:37 PM
  2. Cursor Position
    By sugan in forum CSS
    Replies: 0
    Last Post: 07-16-2007, 09:30 AM
  3. Changing the cursor position using JavaScript
    By codeexploiter in forum JavaScript
    Replies: 1
    Last Post: 02-13-2007, 08:05 AM
  4. How to get cursor's position in textarea
    By costas in forum JavaScript
    Replies: 3
    Last Post: 02-03-2007, 07:32 AM
  5. Insert text in cursor(keyboard) position.
    By shachi in forum JavaScript
    Replies: 5
    Last Post: 09-09-2006, 02:59 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •