Canvas Support

Dots menu follow sections while scrolling

6 replies · opened May 9, 2022

Mmbostwick1May 9, 2022

Hi,

I am looking to have the dots menu respond to the user scrolling. Currently, it will highlight when clicked but if you scroll to another section, the dot clicked remains highlighted.

Is this possible? This is what I got specifically from my client.

"Could you add the functionality to highlight the (menu) dot as the user scrolls through each section - to tell the user where they are? Currently, the dot only highlights if the user selects it. Once a user selects a dot, that dot stays highlighted even if the user leaves that section."

Best,
Melanie

SSemicolon WebSTAFFMay 10, 2022

Hello,

This is already built-in and works well on our Demos: https://themes.semicolonweb.com/html/canvas/op-dots.html . We can see multiple issues with your Codes which might be causing this to not work correctly:

  1. There are a Lot of Invalid HTML on your Page: https://validator.w3.org/nu/?doc=https%3A%2F%2Fogcreativelab.com%2FOG%2FFA%2FTest%2Findex.html like Duplicate IDs and Unclosed Tag which can cause Javascript Issues which is required for the One-Page Scrolling Highlighter to work correctly.

  2. Make sure to add the .page-section Class to the One-Page Sections as this is required to identify the One-Page Sections and their position on the Page so that the Active Section can be properly highlighted in the One-Page Menus.

Consider fixing the above first and let us know if you are facing any further issues.

Hope this Helps!

Mmbostwick1May 17, 2022

Hi,

I have worked through all the errors and I am still not having luck with the dot menu. Would you mind taking another look? There are still a few warnings but I wouldn't think warnings would affect this.

Please let me know!

Best,
Mel

Mmbostwick1May 17, 2022

I noticed back from where I pulled the source code, it doesn't function the way I need it to. I used index-onepage-3.html. Is there updated source code for this?

SSemicolon WebSTAFFMay 20, 2022

Hello,

Thanks for your Kind Patience!

We have checked out the Codes and it appears to be okay, however, we are still not sure as to what is causing this issue as the Live Previews and the Files from the Packages appear to be working fine for us. For further debugging, we would recommend:

  1. Please re-upload these JS Files: js/functions.js and js/plugins.min.js Files to your Servers.

  2. Allow us to access your Servers with FTP Credentials so that we can manually check the issues, run tests and fix these issues.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard