1

Using element.offset().left gets you the element's offset position from its parent. Is there any way to get the offset position from another element? For example, here's my html:

<div id="tile_id_579" class="product_tile">  
<div class="selectContainer">
    <table style="width:100%;">
        <tbody>
            <tr>
                <td>        
                <div id="select-undefined" class="tzSelect">
                    <div id="options-undefined" class="tzOptions" style="max-height: 500px; width: 250px; display: none; min-width: 118px;">
                        <ul class="dropDown" id="dropdown-undefined">
                            <li><div class="header">Hand-Tossed Style Pizza</div>
                                <div class="subheader">The crowd-pleasing pizza that everyone can agree on.</div>
                                <div class="optkey">0</div>
                            </li>
                            <li><div class="header">Pan Pizza</div>
                                <div class="subheader">Our Pan Pizza is America's favorite!</div>
                                <div class="optkey">1</div>
                            </li>
                        </ul>
                    </div>
                </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</div>

It's generated from a database. Using offset().left gets me the offset from the #selecct-undefined div, but I need to get how far the #options-undefined div is from the .selectContainer div. Is this possible?

EDIT TO ADD

Tried both of these, and both return the same thing: top: 381, left: 0. But left is NOT 0 in relation to the document; it can't be.

var tip = $('#tile_id_579 #options-undefined .header');
tip.first().position();

and

var tip = $('#tile_id_579 #options-undefined .header');
tip.first().offset();

How is it possible that left is 0 for both when this is where the div is? Doesn't 0 left imply that it's all the way at the left of the browser window?

enter image description here

2
  • 1
    .offset() is relative to the document, .position() is relative to the offset parent.
    – j08691
    Dec 11, 2012 at 17:58
  • I've tried both, and they both return the same values. I'm not sure how this is possible when the parent isn't the document itself... Adding example to OP.
    – EmmyS
    Dec 11, 2012 at 18:55

1 Answer 1

0

Since your element is indeed within that parent you specified you can use .position() instead of .offset(). But if .selectContainer is not the closest relative parent you will need to get the position of both your element and that "other" element and calculate the difference.

var myPos = $('#options-undefined').offset();
var otherPos = $('#options-undefined').closest('.selectContainer').offset();//if #options-undefined wasn't a child of .selectContainer you would do $('.selectContainer').offset();

var _offset = {
    top: otherPos.top - myPos.top,
    left: otherPos.left - myPos.left
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.