jQuery cant find element on ngView loaded elements [AngularJS]

Question

I m trying to get offset().top of an element <div class='profile'></div> present in a ngView controlled by app.js but the console displays an error:

Uncaught TypeError: Cannot read property 'top' of undefined

jQuery code :

var topOfOthDiv = $('.profile').offset().top;

index.ejs

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="main/js/main.js"></script>
    ...
</head>
    <body>
       <div class="ui inverted top fixed nbar hidden menu">...</div>
       <div class="ui main container " ng-view>
       </div>
    </body>

main.js

$(document)
    .ready(function() {

        var topOfOthDiv = $('.profile').offset().top;
        $(window).scroll(function() {
                if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
                    $('.fixed.menu').transition('fade in'); //reached the desired point -- show div
                }
                if($(window).scrollTop() < topOfOthDiv) { //scrolled past the other div?
                    $('.fixed.menu').transition('fade out'); //reached the desired point -- show div
                }
            });
    })
  ;

In ng-view i load my different view which has .profile clss div The code works fine if .profile class is in index.ejs

have you loaded jquery correctly?

Michelangelo
– Michelangelo

2015-12-22 15:36:16 +00:00
Commented Dec 22, 2015 at 15:36 — Michelangelo
– Michelangelo, Commented Dec 22, 2015 at 15:36
Can you provide sample plunkr?

Grundy
– Grundy

2015-12-22 15:57:48 +00:00
Commented Dec 22, 2015 at 15:57 — Grundy
– Grundy, Commented Dec 22, 2015 at 15:57
yes i loaded it correctly.

Karan
– Karan

2015-12-22 16:03:43 +00:00
Commented Dec 22, 2015 at 16:03 — Karan
– Karan, Commented Dec 22, 2015 at 16:03
jsfiddle.net/joshdmiller/NEuJ6 not working :|

Karan
– Karan

2015-12-22 16:16:36 +00:00
Commented Dec 22, 2015 at 16:16 — Karan
– Karan, Commented Dec 22, 2015 at 16:16

John Bell · Accepted Answer · 2015-12-22 15:38:53Z

1

Well, without looking at the entire code we can't really tell why, because this could be a number of reasons, however the most likely reason is:

You're loading the Javascript file after you declare your HTML. This means the script is looking for something that is written to the browser after execution.
You've not loaded jQuery properly.

answered Dec 22, 2015 at 15:38

John Bell

2,3501 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Karan Over a year ago

I am loading main.js and jquery in head and the code works fine if i use .profile class in index.ejs but not in ng-views. I added few more codes!

Collectives™ on Stack Overflow

jQuery cant find element on ngView loaded elements [AngularJS]

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related