Can anyone help me determine the precise position of an element on the current visible screen using jQuery?
My element has a relative position, so the offset() function only gives me the offset within the parent.
Unfortunately, I have hierarchical divs, making it difficult to calculate the absolute position using $("#me").parent().offset() + $("#me").offset()
I need the position in the window that changes as the document is scrolled.
While adding up all the parent offsets is one solution, I prefer a cleaner alternative.
var top = $("#map").offset().top +
$("#map").parent().offset().top +
$("#map").parent().parent().offset().top +
$("#map").parent().parent().parent().offset().top;
Any suggestions?
Update: I require the exact gap in pixels between my div's top and the document's top, factoring in padding, margins, and offset.
This is my code:
HTML
<div id="map_frame" class="frame" hidden="hidden">
<div id="map_wrapper">
<div id="map"></div>
</div>
</div>
CSS
#map_frame{
border:1px solid #800008;
}
#map_wrapper {
position:relative;
left:2%;
top:1%;
width:95%;
max-height:80%;
display:block;
}
#map {
position:relative;
height:100%;
width:100%;
display:block;
border:3px solid #fff;
}
jQuery to resize the map to fill the screen*
var t = $("#map").offset().top +
$("#map").parent().offset().top +
$("#map").parent().parent().offset().top +
$("#map").parent().parent().parent().offset().top;
$("#map").height($(window).height() - t - ($(window).height() * 8 / 100));
Thank you for your assistance...