Calc Distance Between Mouse and Element

by igos

HTML

<link rel="stylesheet" href="https://rawgithub.com/marvelapp/devices.css/master/assets/style.css">
<p id="distance">Distance: <span>0</span>m</p>

<section id="iphone5s" class="gold" style="background:none;">
    <div class="wrap" style="background:none;">
        <div class="device">
            <div class="inner"></div>
            <div class="sleep"></div>
            <div class="volume"></div>
            <div class="camera"></div>
            <div class="top-bar"></div>
            <div class="sensor"></div>
            <div class="speaker"></div>
            <div id="element" class="screen">
                <div class="middle">
                    
                            <div class="container">
                <div  class="attendance">

                    <div class="attendance-bar">
                        <div class="attendance-level">
                            <div class="bar-1"></div>
                            <div class="bar-2"></div>
                            <div class="bar-3"></div>
                            <div class="bar-4"></div>
                            <div class="bar-5"></div>
                            <div class="bar-6"></div>
                            <div class="bar-7"></div>
                            <div class="bar-8"></div>
                            <div class="bar-9"></div>
                        </div>
                        <div class="attendance-cage-css"></div>
                    </div>
                </div>
            </div>
                </div></div>
            <div class="bottom-bar"></div>
            <div class="home"></div>
        </div>
    </div>
</section>

CSS

body {
    font: 11px helvetica, arial, sans-serif;
    text-align: center;
    background-image:  url('http://socalcolleen.files.wordpress.com/2010/08/101_0222.jpg');
    background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
}

#distance {
    font-size: 16px;
    font-weight: bold; 
    margin-top: 10px;
    background-color:white;
}


.device .screen {
	width: 100%;
	position: relative;
	height: 100%;
	z-index: 2;
	text-align: left;
	text-indent: -999px;
	display: block;
	-webkit-border-radius: 1px;
	border-radius: 1px;
	-webkit-box-shadow: 0 0 0 3px #111;
	box-shadow: 0 0 0 3px #111;
}

.device .screen:before {
	content: '';
	display: block;
	text-indent: -9999px;
	height: 34px;
	display: inline-block;
	text-align: left;
	width: 96px;
	position: absolute;
	top: 50%;
	margin-top: -17px;
	left: 50%;
	margin-left: -48px;
	background-image: none;
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

.container{
    width:100px;
    height:350px;
    position: absolute;
}
.middle{
    padding-top:100px;
    margin:auto;
    width:100px;
}

.attendance{
	width:90%;
    float:left;
	background-color:#1f1f1f;
	margin:7px 5% 5px 5%;
	padding-bottom:10px;
	border-style:solid;
	border-color: #111111 #4e4e4e #4e4e4e #111111;
	border-width:2px;
}

.attendance .title{
    font-family:"Arial";
	color:white;
	font-size:9pt;
    font-weight:bold;
	text-align:center;
	padding:15px 0px 5px 0px;
}

.attendance-bar{
    float:left;
	width:90%;
	margin:0px 5% 0px 5%;
	height:260px;
	background-color:#2f2f2f;
}

.attendance-cage-css{
	width:80px;
    float:left;
    background-color:#6ae719;
    height:5px;
    position: absolute;
    bottom: 40px;
    z-index: 1;
}

.bar-1,.bar-2,.bar-3,.bar-4,.bar-5,.bar-6,.bar-7,.bar-8,.bar-9{
	float:left;
	width:100%;
	background-color:#1f1f1f;
	height:10px;
    z-index:...

JavaScript

(function() {
    
    var mX, mY, distance,
        $distance = $('#distance span'),
        $element  = $('#element');

    function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }

    $(document).mousemove(function(e) {  
        mX = e.pageX;
        mY = e.pageY;
        distance = calculateDistance($element, mX, mY);
        $distance.text(distance/10);
        $('.attendance-cage-css').css('height',$('.attendance').height() - $('.attendance').height() * (distance / 1000));
    });

})();