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
– Pointy, Commented Nov 9, 2014 at 21:44

Kichrum · Accepted Answer · 2014-11-09 22:23:38Z

1

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.

answered Nov 9, 2014 at 22:23

Kichrum

6077 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using a JavaScript file to inject HTML into a page

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related