Mouse Following Contol Box

by blowsie

HTML

<div class="wysiwyg" contenteditable="true">
    <div>
        <h1>2 PURPOSE AND RESPONSIBILITIES</h1>
    </div>
    <div>
        <h2>2.1 PURPOSE OF A BUILDING LOG BOOK</h2>
        <p>The Health and Safety File provides information on the building elements, its structure and services including any systems
            installed to assist in access to maintaining plant or equipment. </p>
        <p>It is expected that the Maintenance Contractor will provide their own site specific assessments based on the works that will
            be carried out at the time. </p>
        <p>There are provisions in connection with Health, Safety and Welfare, which are legal requirements. In addition, there are
            many official recommendations. For full details, reference should be made to the appropriate official publications.
        </p>
        <p>The information relating to certain Health and Safety information has been partly referenced from the HSE Website and is
            contained in freely available leaflets. </p>
        <p>IT IS VERY , VERY IMPORTANT THAT NO OTHER TYPES OF ELEMENTS ARE INSERTED WITHIN THE ANOTES.</p>
    </div>
</div>

<div id="wysiwyg-control">A | B | C | D | E</div>

CSS

.focus {background: pink}
#wysiwyg-control { display:none; background: #000; color: #fff; position:fixed; padding:30px; opacity:0.5}
#wysiwyg-control.hover { opacity:1.0}
body {position:absolute; top:0; bottom:0; left: 0 ; right: 0;}

JavaScript

$('.wysiwyg').focus(function() {
    $(this).addClass('focus');
    $('#wysiwyg-control').show();
});

$('.wysiwyg').blur(function() {
    $(this).removeClass('focus');
    $('#wysiwyg-control').hide();
});

var $menu = $('#wysiwyg-control');

function MouseMove(e) {
    var posY = e.pageY + 15;
    var posX = e.pageX + 15;
    $menu.stop().animate({
        top: posY,
        left: posX
    }, 2000, "easeOutCirc");
}

function MoveMenu() {
    $("body").bind("mousemove", function(event) {
        MouseMove(event);
    });
}
MoveMenu();

$menu.hover(function() {
    var $this = $(this);
    $("body").unbind("mousemove");
    $menu.addClass("hover");
}, function() { //menu mouse out
    var $this = $(this);
    $menu.removeClass("hover");
    MoveMenu();
});