Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7

Thread: Cursor Follower

  1. #1
    gwf
    gwf is offline
    Junior Member
    Join Date
    Oct 2017
    Posts
    8
    Member #
    57607

    Cursor Follower

    The second "problem of the day."

    My client also wanted an image that follows your cursor. I found another page online with instructions on how to do this, but it isn't following the cursor. (Rather, when it is "enabled", it remains static and affects the positioning of other elements.)

    I'm not sure what is wrong, and I have no real knowledge in JavaScript so I can't check the JavaScript. The JavaScript script is located in the header, rather than a separate (include) file.

    Header JavaScript:
    Code:
    <script type="text/javascript">
    $(document).ready(function(){
      $(document).mousemove(function(e){
        $('cptr').css('left',e.pageX+"px");
        $('cptr').css('top',e.pageY+"px");
      });
    });
    </script>
    HTML Code:
    Code:
    <div class="cptr"><img src="images/cptr.png" alt="CPTR" width="75" height="47" border="0"/></div>
    CSS Code:
    Code:
    .cptr{
    	position: absolute;
    	display:none;
    	transform: translate(-50%, -50%);
    	z-index:3;
    }
    Is the code not being implemented properly, or is there something I'm missing?

    Any help would be greatly appreciated.

    P.S. I thought there was an easier way to implement an image following the cursor in CSS? But I couldn't find it anywhere.

  2.  

  3. #2
    Junior Member SoftLink's Avatar
    Join Date
    Sep 2017
    Location
    Central Florida
    Posts
    24
    Member #
    57480
    OK, I can help you here
    First off, you don't need to put the mouse move function inside the onload.
    Second, in the JQuery selector you never specify whether you're querying for a class or id or . . .
    You needed to add a . to the beginning of the query selector. Better yet, because there is only one, use an id instead.
    In the css you've got display:none . I'm guessing you change that somewhere in Javascript?
    You also have a transform in there. It looks like you're putting it off screen.
    You didn't need to use a transform for that.

    Here is some code that works.
    Code:
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>mousemove demo</title>
      <style>
      #divCPTR {
        position: absolute;	
    	z-index:3;
      }
     
      </style>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
     
    <div id="divCPTR"><img src="images/cptr.png" alt="CPTR" width="75" height="47" border="0"/></div>
     
    <script>
    var oDiv = $("#divCPTR");
    $( document ).mousemove(function( event ) {
      oDiv.css({"left":event.pageX + "px", "top": event.pageY + "px"});
    });
    </script>
     
    </body>
    </html>

  4. #3
    gwf
    gwf is offline
    Junior Member
    Join Date
    Oct 2017
    Posts
    8
    Member #
    57607
    Quote Originally Posted by SoftLink View Post
    OK, I can help you here
    First off, you don't need to put the mouse move function inside the onload.
    Second, in the JQuery selector you never specify whether you're querying for a class or id or . . .
    You needed to add a . to the beginning of the query selector. Better yet, because there is only one, use an id instead.
    In the css you've got display:none . I'm guessing you change that somewhere in Javascript?
    You also have a transform in there. It looks like you're putting it off screen.
    You didn't need to use a transform for that.

    Here is some code that works.
    Code:
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>mousemove demo</title>
      <style>
      #divCPTR {
        position: absolute;	
    	z-index:3;
      }
     
      </style>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
     
    <div id="divCPTR"><img src="images/cptr.png" alt="CPTR" width="75" height="47" border="0"/></div>
     
    <script>
    var oDiv = $("#divCPTR");
    $( document ).mousemove(function( event ) {
      oDiv.css({"left":event.pageX + "px", "top": event.pageY + "px"});
    });
    </script>
     
    </body>
    </html>
    Should the Javascript code be placed in the header with the rest of the Javascript (there is additional Javascript for another element I'm running), or should it be placed near the bottom?

    The code provided has also made the Javascript for my other element not work. Possibly there is something that didn't get closed properly? (Once again, I know next to nothing about JavaScript and can't check for the error.)

  5. #4
    Junior Member SoftLink's Avatar
    Join Date
    Sep 2017
    Location
    Central Florida
    Posts
    24
    Member #
    57480
    The code should be at the bottom of the page (after all the html is written) or you can put it as you did previously, in the onload event $(function () { . . . });

    I can't see how the code I provided could interfere with your other code unless the $ is being used by something else or you're using the mouse move event proc for something else.


    ------------------------------------------------------------------------------------------------------------------------------
    Business Software Database Internet Websites
    Web Designers: Need some heavy lifting done?
    softlinksys.com

  6. #5
    gwf
    gwf is offline
    Junior Member
    Join Date
    Oct 2017
    Posts
    8
    Member #
    57607
    I had wrote a response to this topic and it never got posted, despite me clicking "Post" several times. Bug? (This isn't the first time I've had a post go missing on this site.)

    I found that there was a missing set of quotation marks in the second line of the JavaScript code around the "event.pageXtop" section.
    Code:
    var oDiv = $("#divCPTR");
    $( document ).mousemove(function( event )) {
      oDiv.css({"left":event.pageXtop: event.pageY + "px"});
    });
    Adding the quotation marks allows the other element to function properly.
    Code:
    var oDiv = $("#divCPTR");
    $( document ).mousemove(function( event )) {
      oDiv.css({"left":"event.pageXtop": event.pageY + "px"});
    });
    However, it still is not working. If it helps anything, I'll post the HTML and CSS codes being used presently.
    HTML:
    Code:
    <div id="cptr"><img src="images/cptr.png" alt="CPTR" width="75" height="47" border="0"/></div>
    CSS:
    Code:
    #cptr {
        position: absolute;	
    	z-index:3;
      }
    The element just remains in the top left corner of the webpage, rather than following the mouse cursor.

  7. #6
    Junior Member SoftLink's Avatar
    Join Date
    Sep 2017
    Location
    Central Florida
    Posts
    24
    Member #
    57480
    That's very strange. I tested the code and it worked fine.
    I still have the file. I just tested it again. It works great.
    I looked at the code and it doesn't have the syntax problems you show here.

    I must have broken it when copying it here.
    I'll post it again here. I'll look a little closer this time and make sure what I paste is what gets published here.

    Code:
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>mousemove demo</title>
      <style>
      #divCPTR {
        position: absolute;	
    	z-index:3;
      }
     
      </style>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
     
    <div id="divCPTR"><img src="http://www.webdesignforums.net/forum/images/cptr.png" alt="CPTR" width="75" height="47" border="0"/></div>
     Delete this: http://www.webdesignforums.net/forum/  <-- this Forum software is adding it.
    <script>
    var oDiv = $("#divCPTR");
    $( document ).mousemove(function( event ) {
      oDiv.css({"left":event.pageX + "px", "top": event.pageY + "px"});
    });
    </script>
     
    </body>
    </html>

    ------------------------------------------------------------------------------------------------------------------------------
    Business Software • Database • Internet • Websites
    Web Designers: Need some heavy lifting done?
    softlinksys.com
    Last edited by SoftLink; Oct 23rd, 2017 at 12:35 PM.

  8. #7
    gwf
    gwf is offline
    Junior Member
    Join Date
    Oct 2017
    Posts
    8
    Member #
    57607
    I sent a PM. It still isn't working, although your example works.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:03 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com