Finding the position of an Element in a html page using javascript

Question

I am trying to get the position of an element in a html page using $document.find. But, it is always undefined.

Here is my code.

angular.module('MyApp', []).
controller('myController', function($scope, $document) {

var element = $document.find('my_element');
console.log(element.prop('offsetTop'));
console.log(element.offsetTop);
});

And this is html page.

<div ng-app="MyApp" ng-controller="driversController">
  <div id="my_element">Looping with ng-repeat:</div>
  .......
</div>

I do not want to use jquery along with angularjs. P;ease suggest a way to do this in angularjs.Thanks

@PankajParkar But I did not want to use jquery along with angularjs.How can I do this in angularjs? — Mukund Gandlur, Mar 15 '16 at 19:26
AngularJS jqLite find() - Limited to lookups by tag name. See [Angulars jqLite](https://docs.angularjs.org/api/ng/function/angular.element#angular-s-jqlite) — georgeawg, Mar 15 '16 at 21:15

score 5 · Accepted Answer · answered Mar 15 '16 at 19:22

5

Use jquery .offset() to find the position.

var offSet = $("#my_element").offset();
console.log(offSet.top);

Example : https://jsfiddle.net/o9krfznt/1/

answered Mar 15 '16 at 19:22

DinoMyte

8,737
1
19
26

It works. But I did not want to use jquery along with angularjs. How can I do this in strict angularjs? – Mukund Gandlur Mar 15 '16 at 19:24
@MukundGandlur you tagged angularjs, also perhaps you should append your question to say specifically not to use angularjs – Tyler Cowan Mar 15 '16 at 19:27
1

@MukundGandlur: If you are looking for pure angular solution , you might wanna take a look at this : http://stackoverflow.com/questions/18953144/how-do-i-get-the-offset-top-value-of-an-element-without-using-jquery. Also remove the tag jquery from the question tag. – DinoMyte Mar 15 '16 at 19:29
Marked this as answer because, the post in your comment helped me. – Mukund Gandlur Mar 16 '16 at 05:59

score 2 · Answer 2 · answered Mar 15 '16 at 19:28

2

By having vanilla JavaScript, you could access offset values from DOM by doing element[0].

var element = $document.find('my_element');
console.log(element.prop('offsetTop'));
console.log(element[0].offsetTop);
console.log(element[0].offsetLeft);

answered Mar 15 '16 at 19:28

Pankaj Parkar

134,766
23
234
299

Its printing "undefined". I will add a plunkr. – Mukund Gandlur Mar 15 '16 at 19:40
Here is my plunkr - https://plnkr.co/edit/vKD8DSSdw95WtPq4kUwp. – Mukund Gandlur Mar 16 '16 at 04:06

score 0 · Answer 3 · answered Mar 15 '16 at 19:29

You can loop through each element in page until you get to the element you want.

        function left_on(el)
        {    
                for (var lx=0, ly=0;
                     el != null;
                     lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
            return lx  ;// or ly 
        }

Finding the position of an Element in a html page using javascript

3 Answers3