Division of text follow the cursor via Javascript/Jquery

Question

Dear experts,

I wanted have a dynamic division of content follow you with the cursor in the web browser space.

I am not a pro at JS so I spent 2 hours to finally debugged a very stupid way to accomplish this.

$(document).ready(function () {
    function func(evt) {
        var evt = (evt) ? evt : event;
        var div = document.createElement('div');

        div.style.position = "absolute";

        div.style.left = evt.clientX + "px";

        div.style.top = evt.clientY + "px";
        $(div).attr("id", "current")

        div.innerHTML = "CURSOR FOLLOW TEXT";

        $(this).append($(div));

        $(this).unbind()
        $(this).bind('mousemove', function () {
            $('div').remove("#current");

        });

        $(this).bind('mousemove', func);

    }

    $("body").bind('mousemove', func)
});

As you can see this is pretty much Brute force and it slows down the browser quite a bit. I often experience a lag on the browser as a drag my mouse from one place to another.

Is there a way to accomplish this easier and faster and more intuitive.

I know you can use the cursor image technique but thats something I'm looking to avoid.

Thanks in advance.

Answer 1

The performance issue comes from the fact that you're creating/destroying the div every time the mousemove event fires (and also binding/unbinding the event). You can simplify it greatly by creating the div once, attaching it to the document and then just moving it on the mousemove event like follows:

$(document).ready(function () {
    //create the div
    var div = $("<div></div>").css("position", "absolute").text("CURSOR FOLLOW TEXT").appendTo("body");

    //attach the mousemove event
    $("body").bind('mousemove', function(evt) {
        div.css({
            "left": evt.pageX + "px",
            "top": evt.pageY + "px"
        });
    });
});

Answer 2

Based on answer by Alconja, this might work better:

$(document).ready(function () {
    //create the div
    var div = $("<div/>",{
        'css': {
            "position": "fixed"
        },
        'text': "CURSOR FOLLOW TEXT"
    }).appendTo("body");

    //attach the mousemove event
    $(window).bind('mousemove mouseover', function(evt) {
        div.offset({left:evt.pageX, top: evt.pageY});
    });
});

Answer 3

do you know how I can get an iframe to follow instead of text?