search

ndabas / toc

Table of Contents jQuery Plugin - A minimal, tiny jQuery plugin that will generate a table of contents, drawing from headings on the page.
https://ndabas.github.io/toc/
Apache License 2.0
84 stars 24 forks source link

Other unsupported characters in text should be replaced with underscores in generateUniqueId() function #15

Closed samhere17 closed 4 years ago

samhere17 commented 4 years ago

I am facing problem with parenthesis '(' and ')'

ndabas commented 4 years ago

Could you please elaborate on:

samhere17 commented 4 years ago

I faced a issue with parenthesis '(' and ')'.

I had a heading like - "Javascript (JS) Setup". This got changed to an id like "Javasript_(JS)_Setup".

When I try to navigate (within the page) to this id using this plugin it generates a anchor tag like: <a href="#Javasript_(JS)_Setup" class="nav-link toc-item">Javascript (JS) Setup</a>

The navigation do not work.

ndabas commented 4 years ago

Can you tell me what browser you're seeing this behavior on?

All characters except whitespace are allowed in the HTML5 id attribute, and this is supported in all current browsers, and even very old ones like IE6. Please check the official HTML5 specs or articles about the id attribute, e.g: https://mathiasbynens.be/notes/html5-id-class

It is possible that the navigation did not work for you because of other scripts on the page. I request you to create a minimal piece of code that shows the problem, and tell me what browser (name, version, and OS) the problem occurs on.

i understand your description of the problem, but creating a page with that description is working fine for me.

samhere17 commented 4 years ago

I am sorry I took a lot of time. I generally do not login to github everyday.

I will not waste time building a minimal piece of code, rather would share you the live URL where I am facing the problem.

Please go to https://mig.iquesters.com/?s=embedded&p=readme&v=v1.2.0.0 Try navigating to the link as shown in the image below: image

The heading here is "ESP32 - ESP-IDF (SDK) Setup". The id becomes <h5 id="ESP32_-_ESP-IDF_(SDK)_Setup">ESP32 - ESP-IDF (SDK) Setup</h5>

The navigation do not work here. In the mean time I will also check if any other script is creating the issue. I am using Google Chrome, Version 81.0.4044.138 on Windows 10. I have also tried it on Microsoft Edge 44.18362.449.0 on Windows 10.

ndabas commented 4 years ago

Thank you for the follow-up. I had a look at the link you have provided, and the anchor itself (as generated by jquery.toc) is working fine. You can test that by clicking this link:

https://mig.iquesters.com/?s=embedded&p=readme&v=v1.2.0.0#ESP32_-_ESP-IDF_(SDK)_Setup

The issue is with a scrolling script that's present on the page - $('ul#toc').on('click', 'a', .... That script is building a jQuery expression with the parsed ID, and that expression is invalid when it contains parens as part of the name, because it's supposed to be a CSS expression.

Please see https://api.jquery.com/category/selectors/ for more info. You can use document.getElementById to get an element by ID without needing to escape any characters.

ndabas commented 4 years ago

I'm closing this as I have not received a response for over a month. Additionally, this is a bug in the author's code and not in the toc library.

samhere17 commented 4 years ago

You suggestion worked and indeed this is a bug in the author's code and not in the toc library.

Thank you very much for your help.