Оповещение для отображения расстояния между элементами

Question

У меня есть обертка. Внутри этой обертки у меня есть внутренняя обертка. Внутри этой внутренней оболочки у меня есть промежуток. На указателе мыши этого диапазона я хотел бы, чтобы предупреждение показывало расстояние между серединой этого диапазона и правой границей обертки (основной: #wrapper). Я пробовал несколько вещей с помощью position (), но мне не удалось добиться того, что я только что упомянул.

http://jsfiddle.net/ZP7Lt/

Мой HTML:

<div id="wrapper">
    <div id="inner-wrapper">
        <span id="me">It's me</span>
    </div>
</div>​

Мой css:

#wrapper{
    width:400px;
    height:300px;
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    background-color:yellow;}

#inner-wrapper{
    position:absolute;            
    width:100px;
    margin-left:100px;
    margin-top:50px;
    background-color:blue;}

#me{
    background-color:pink;}

Мой JS:

$('#me').mouseenter(function(){


    alert("distance from middle of span till right border of #wrapper???");

})​

Answer 1

$('#me').mouseenter(function(){
    var $wrapper = $("#wrapper"), $this = $(this);
    alert("distance from middle of span till right border of #wrapper is " + ($wrapper.width() - ($this.offset().left - $wrapper.offset().left + $this.width()/2)));
})​;

Рабочая демонстрация - http://jsfiddle.net/ShankarSangoli/NxhWk/

Answer 2

Попробуйте, надеюсь, это поможет

var spanLeft = $("#me").offset().left;
var wrapper = $("#wrapper").offset().left;                 
alert("distance from middle of span till right border of #wrapper???");
alert(spanLeft - wrapper);

Answer 3

Вы можете использовать комбинацию offset () и width ()

$('#me').mouseenter(function(){
    var middle = $(this).offset().left + $(this).width()/2;
    var wrapperRight = $("#wrapper").offset().left+$("#wrapper").width();

    alert( wrapperRight - middle);

})​

EDIT: Исправлена ​​математическая ошибка

Демо