I am building a Cordova app which uses a live camera preview and I need the position (relative to the entire page) to place that preview. I have played with jQuery offset, position, and a slew of other posts' suggestions to no avail.
var position = $("#liveCamera").offset();
or
$("#liveCamera").html(position.top);
$("#liveCamera").html(position.left);
I'me expecting something in the neighborhood of {top: 250, left: 300}, but I'm getting {top: 50, left: 1313.806884765625} no matter what I try! What's truly odd is that left of 1313 is actually off of the screen...
Other stuff I've tried
Per other suggestions I tried to look at scroll positions but both are equal to 0.
$(document).scrollTop() // = 0
$(document).scrollLeft() // = 0
If I try to use $("#liveCamera").position() instead of offset() then I get {top: 1, left: 0}, which is obviously incorrect
I saw another post suggesting adding up the parents' offsets as the below code, but the results are just as bad:
console.log($("#liveCamera").offset());
console.log($("#liveCamera").parent().offset());
console.log($("#liveCamera").parent().parent().offset());
console.log($("#liveCamera").parent().parent().parent().offset());
console.log($("#liveCamera").parent().parent().parent().parent().offset());
Which results in
{top: 50, left: 1313.806884765625}
{top: 50, left: 1313.806884765625}
{top: 0, left: 1013.760009765625}
{top: 0, left: 1013.760009765625}
{top: -1, left: 1013.760009765625}
1) How can I get the true position of an element relative to the entire page?
Update
Still no luck and I have tried everything I can think of. I am thinking that due to the depth of where this element is located it's awkward to find its location; but I don't understand how it can be so difficult to find an element's true position on the page! I don't mind using extra libraries or any way to get the job done.
I am using AngularJS and Ionic Framework, so the element in question is located in a template view a few levels deep into the app.