Uncaught TypeError: Cannot read property 'top' of undefined (offset().top)

Question

i have un error

Uncaught TypeError: Cannot read property 'top' of undefined

at this line

if(scroll >= content.eq(0).offset().top - headertop)

the full code is here

/* quickMenu */
//position of quickMenu
var t = $(window).height()/2 - $(".quickMenu").height()/2;
var headertop = $(".header").height();
$(".quickMenu").stop().animate({top:t + headertop},700,"linear");

//quickMenu li.on when window scrolls
$(window).scroll(function(){
var scroll = $(this).scrollTop();
var content = $(".mainWrap > .container > div");
var headertop = $(".header").height();
if(scroll >= content.eq(0).offset().top - headertop){//slide_banner
$(".quickMenu li").removeClass("on");
$(".quickMenu li").eq(0).addClass("on");
}
if(scroll >= content.eq(1).offset().top - headertop){//content1
$(".quickMenu li").removeClass("on");
$(".quickMenu li").eq(1).addClass("on");
}
if(scroll >= content.eq(2).offset().top - headertop){//content2
$(".quickMenu li").removeClass("on");
$(".quickMenu li").eq(2).addClass("on");
}
if(scroll >= content.eq(3).offset().top - headertop){//content3
$(".quickMenu li").removeClass("on");
$(".quickMenu li").eq(3).addClass("on");
}       

}); //scroll

it has to be work on the main page and it works very well but, the problem is when i move to sub pages on my site, it keep undefined on the sub pages(but there is not quickMenu on sub pages)... i really don't know why it's become a error... and other 'offset().top' don't have any error.... i hope that someone could help me..!!

One of your `content.eq(X)` calls is not finding an element. I'd suggest a condition which checks this, and also using a loop to DRY up your code. — Rory McCrossan, Mar 29 '18 at 08:14
Please add a working example of your problem in codepen or something similar. — Marko Letic, Mar 29 '18 at 08:14
@MarkoLetic hi,i added my site links on my questions, can you help me with this problem?? — Lia Hyun CHO, Mar 29 '18 at 08:26
Easy fix: wrap the problematic part in a condition that checks if the element exists: `if(content.eq(0).length)` — Balázs Varga, Mar 29 '18 at 08:30
External site links are of no use. Are you really never going to change that code from the current broken state? SO is not a Q&A site, it's a repository for future users that have your same problem. — freedomn-m, Mar 29 '18 at 08:53
Check: https://stackoverflow.com/questions/31044/is-there-an-exists-function-for-jquery. — freedomn-m, Mar 29 '18 at 08:54
@freedomn-m Thanks for your comment. I solved my problem! I seperate that code from main.js and i make new js just for that and now it wokrs on just MAIN PAGE..!!(thats what i want)... — Lia Hyun CHO, Mar 30 '18 at 04:52

Marko Letic · Accepted Answer · 2018-04-02T08:50:03.763

0

It's pretty clear why this happens. Your content variable is undefined on all views except for the main page (home page).

var content = $(".mainWrap > .container > div");

You don't have the .container class on all sub views so this jQuery lookup fails and doesn't return a proper element.

Just check your HTML on sub-views and you will see the problem.

edited Apr 02 '18 at 08:50

answered Mar 29 '18 at 08:37

Marko Letic

2,460
2
28
34

thank you so much!! i already solve the problem, but your answer help me to understand why it dose not work before!! thanks!!:> – Lia Hyun CHO Apr 04 '18 at 12:15

Uncaught TypeError: Cannot read property 'top' of undefined (offset().top)

1 Answers1