nav dot indicator query selector seems wrong

To put a dot indicator on the according nav menu when scrolling, how should the
querySelector
querySelector
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
Jochem
Jochem•2y ago
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 much
redtypoOooOo
redtypoOooOo•2y ago
Hi 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
const sections
const sections
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.
Chris Bolson
Chris Bolson•2y ago
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"
redtypoOooOo
redtypoOooOo•2y ago
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
Jochem
Jochem•2y ago
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) catergory
Chris Bolson
Chris Bolson•2y ago
This 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
Jochem
Jochem•2y ago
this is a very good suggestion, this is what the intersection observer was made for
redtypoOooOo
redtypoOooOo•2y ago
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)
Jochem
Jochem•2y ago
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
redtypoOooOo
redtypoOooOo•2y ago
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
redtypoOooOo
redtypoOooOo•2y ago
oops forget to give the link i did a console log of document.querySelector it returns all the sections
Want results from more Discord servers?
Add your server