nav dot indicator query selector seems wrong
To put a dot indicator on the according nav menu when scrolling, how should the be? ( i think this is where the problem is? bc the code below is not working and console showed error is included in the link below)
plz help thank you in advance
https://codepen.io/codedkk/pen/Baqxzjg
11 Replies
your pen doesn't have any section tags. there's a couple things I could think going wrong. Are you loading your script at the bottom of your body? Do the sections exist in HTML before you're running the
const sections = document.querySelectorAll('section[id]') line? Do the sections have ID's?
I appreciate the codepen and the minimized example, but I think you might've minimized a bit too muchHi there, thanks for the response. I upload the files to github. Would you mind check? https://github.com/Codedkk/Hallow-Inc-website/tree/main/Hallow%20Inc%20website/assets I have checked the code according to your questions. The answers are positive except I am not sure how to check if the sections exist in html before is run but the script is at the bottom at the body if this is what decides the above.
GitHub
Hallow-Inc-website/Hallow Inc website/assets at main · Codedkk/Hall...
Contribute to Codedkk/Hallow-Inc-website development by creating an account on GitHub.
I have not looked at the github that you have just added but on the codepen, along with the fact that there aren't any sections and a couple of other issues, one of the errors is that in the css you have ".active__link" whereas in the JavaScript you are adding ".active-link"
shoot, a bad habit of mine. I just change it. but still the dot is not working. if you could check the github, it would be greatly appriciated
when you scroll past the section with id
catergory it can't find a link with a corresponding href, so document.querySelector returns null
either put a check in to see if document.querySelector returned something before accessing it, or add a link for (misspelled or corrected) catergoryThis is not related to your issue (which you may well have fixed now with @jochemm 's comment, but you are currently checking the positioning of each section continually as you scroll.
This means that each time the user scrolls the page you are looping through all the sections to compare their position with the current scroll position. You are also retrieving data such as "sectionHeight", "sectionTop" and "sectionId" all of which don't change so you really don't need to be retrieving them every time the user scrolls.
As a suggestion, you might want to take a look at the JavaScript intersection observer https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API.
By the way, I forked your original codepen and added some sections to test out the code. Once I fixed the css name it worked correctly (I had all the right section ids 😉 )
I also did a console log to show the amount of checks that the code is making. I'l share it just for reference https://codepen.io/cbolson/pen/LYgmZJX
this is a very good suggestion, this is what the intersection observer was made for
may I ask why in the original project's code, the dot indicator still works when the section is not corresponding (not all the sections has a place on the nav)
what do you mean by "original project"?
regardless of that, if you want it to work without all sections having a corresponding link, you'll need to do the null check I was talking about @redtypokk
GitHub
responsive-halloween-website/assets at main · bedimcode/responsive-...
Responsive Halloween Website Design Using HTML CSS & JavaScript - responsive-halloween-website/assets at main · bedimcode/responsive-halloween-website
oops forget to give the link
i did a console log of
document.querySelector it returns all the sections