0

I am trying to use jQuery's position method to obtain the position of a div. The div has default property for the position property. For some reason it returns Object {top: 0, left: 0}

The HTML for the particular div is shown below:

<div class="col-xs-3" id="increased-width">
            <div id="standards">
                <label><strong>My Energy Standards</strong></label>
                <a class="btn" data-toggle="modal" data-target="#energyStandardModal"><span class="glyphicon glyphicon-info-sign"></span></a>
                <br />
            </div>
            <div id="years">
                <h5><strong>My Study Periods (in years)</strong></h5>
                <div id="col-1" class="altStudyPeriod"></div>
                <div id="col-2" class="altStudyPeriod"></div>
                <div id="col-3" class="altStudyPeriod"></div>
                <div id="col-4" class="altStudyPeriod"></div>
            </div>
        </div>

The jQuery code is also shown here:

$(document).ready(function () {
    standardDiv = $("#standards").position();
    console.log(standardDiv);
});

I also tried using the offset() method but it returns the same values. However, this particular is not located at the origin of the webpage (0,0)

Huangism
  • 16,278
  • 7
  • 48
  • 74
Tarang Hirani
  • 560
  • 1
  • 12
  • 43
  • I think we're going to need to see your css. The div #standards has a parent div .col-xs-3, and we'd need to know if you want the position based on the parent div, or on the page/window. From jQuery "Get the current coordinates of the first element in the set of matched elements, relative to the offset parent." – TimSPQR Sep 09 '14 at 18:12
  • I need to get the position relative to the window since a modal will be covering that div when the user interacts with it. I have tried offset, but `offset.top()` returns 0. The parent div .col-xs-3 has `position: relative` – Tarang Hirani Sep 09 '14 at 18:15

2 Answers2

0

Here's a FIDDLE that might help explain things.

I've used your code, but added some CSS to clarify things.

Borders have been added so your divs can be seen, and a spacer div above your col-xs-3 div to push everything down.

The col-xs-3 parent/holder div needs to have css position: relative.

Note that using .position() on the #standards div gives its position relative to its container div with position: relative - "0" from top (of container div).

Using .offset() on the #standards div gives its position relative to the window - "59" from top (of the window).

JS

$('.putmehere').html( "#standards position.top using .position(): " + $("#standards").position().top );

$('.putmehere2').html( "#standards position.top using .offset(): " + $("#standards").offset().top );

Edit: If you wish, you can add a .spacerdiv10 above your #standards div and see what happens to the top measurements.

Community
  • 1
  • 1
TimSPQR
  • 2,964
  • 3
  • 20
  • 29
-1

duplicate: jQuery get the location of an element relative to window basically, position returns the css values ( which are correct ), but you seem to want the offset from window.

Edit: Position property denotes the offset from the closest parent container, which has relative positioning. If offset().top returns 0, try comparing it to window's offset as is done in the previously referenced question:

var eTop = $('element').offset().top; //get the offset top of the element
console.log(eTop - $(window).scrollTop()); //position of the ele w.r.t window
Community
  • 1
  • 1
MSTannu
  • 1,033
  • 1
  • 6
  • 14