Using a JavaScript file to inject HTML into a page

Question

I recently decided that I want an icon to follow the mouse on my web site. So I added the following to a JavaScript file that every page on my site uses

$(document).ready(function() {
    var mouseFollowerHTML = "<img class='mouse-follower' src='/images/space_needle_icon.png' alt='space needle'/>";
    $('.maincontent').append(mouseFollowerHTML);    
});

$(document).mousemove(function(e) {
    $('.mouse-follower').offset({
        left: e.pageX,
        top: e.pageY + 20
    });
});

with the intention that it would inject an image into the maincontent element (which is on every page) and then have the image follow the mouse. But it's not working. I've tried adding an alert to the $(document).ready(...) function, but nothing happened.

Please correct me in the error(s) of my ways.

What exactly does "not working" mean? Have you checked for errors in the console? — Pointy, Nov 09 '14 at 21:44
possible duplicate of [Make an image follow mouse pointer](http://stackoverflow.com/questions/7143806/make-an-image-follow-mouse-pointer) — Kolban, Nov 09 '14 at 21:45

score 1 · Answer 1 · answered Nov 09 '14 at 22:23

Check that you connected jQuery to the of the page:

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

And check out this jsbin: http://jsbin.com/sipaxaqipo/1/edit?html,js,console,output (it works fully with your code), so your code is correct. Mistake is somewhere in another part of site, hope you just forgot to connect jQuery.

Using a JavaScript file to inject HTML into a page

1 Answers1