Question

I’m using twitter bootstrap to try and lock the first column in a table by cloning the table like so:

$('#dashboardtab').load('load_table.php', function() {  

    $('#scroller #testcase').each(function(){
        var table = $(this),
        fixedCol = table.clone(true),
        fixedWidth = table.find('th').eq(0).width(),
        tablePos = table.position();

        alert("LEFT: " + tablePos.left);

        ...
    });
});

My HTML looks like this:

<div class="row">
<div id="scroller">

    <table id="testcase" class="table table-striped table-bordered table-condensed">
    <thead>
        <tr>
           <th>TEST 1</th>
           <th>TEST 2</th>
           <th>TEST 3</th>
        </tr>
    </thead>
    <tbody>
    ...
    </tbody>
    </table>
</div>
</div>

Any idea why the position is always 0? When viewing the page it’s clearly not in this position.

Answer 1

I think the problem is that position() returns the position of the element relative to its parent element; whereas you seem to want, in this case, the position on the page, which would be offset() (but otherwise used the same, so far as I can tell). From the API (for position()):

The .position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document. When positioning a new element near another one and within the same containing DOM element, .position() is the more useful.

Therefore, I’d suggest:

tablePos = table.offset();

References:

• offset().
• position().