Please update to version 2.0.14. This update has a fix that will exclude reserved characters from being used in the TOC links.
thanks steven appreciated the fast replies and upgrading of easy TOC>
however the problem is still there.
already updated .
i tried it here;
scroll all the way down, to right side sidebar the easy TOC widget link does not work for:
“Looking for Full Time Job Instead?”
webpage is:
https://meide.sg/finding-for-part-time-jobs/
I noticed all the working headings are h2 headings and the one not working is an h3 heading. Are you excluding h3 headings?
thansk again steven for fast reply! oh, sorry i forgot to check the box for H3.
I tested again and it seems that now it works. 🙂
However just have a few more issues:
1. I noticed now there is 2.0.15 version. i thought the issue was already fixed in 2.0.14?
2. Even though now easy TOC works even with headings with punctuations, there are 2 problesm when the heading contains punctuation: (A) the smooth scroll is not present (try it with the headings WITHOUT punctuation and you can see the smooth scroll (ie. the function where you can adjust speed of scroll too). and (B) the offset function that I have customized in the easy TOC settings with WP dashboard, is not working for those punctuated headings… the headings get hidden under my top menu.
Hope to hear! Cheers
-
This reply was modified 5 years, 3 months ago by
meideserve.
Because Litespeed is being used to combine the JS files, I am unable to see the cause of this issue.
I see. I need the main website up and running, but anyway, I disabled litespeed cache with a staging website here, created just specially for you 🙂
https://staging10.meide.sg/finding-for-part-time-jobs/#Looking_for_Full_Time_Job_Instead?
Would you like to check it? 🙂
Please open this page in either Chrome or the new Edge. Hit the F12 key and then click the Console tab.
You will first see this error:
Uncaught TypeError: $(...).stickThis is not a function
This error is being caused by the sticky menu or anything on scroll plugin. This is not directly causing the issue, but there is a chance it contributes.
With the Console still open, click a TOC link with punctuation. You will see this error added:
Uncaught Error: Syntax error, unrecognized expression: (...)
This error is created by a script embedded at the top of the page:
<!-- from https://css-tricks.com/snippets/jquery/smooth-scrolling/ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: (target.offset().top-100)
}, 380, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
</script>
This script is actually doing the smooth scroll (because it is added and run before ezTOC), and it is the script causing the jumping.
Both of the above errors should be corrected> after they are, I suspect there is a good chance the ezTOC smooth scroll will function correctly.
thanks so much steven for helping to explain and pointing those errors out!
i disabled the script for smooth scrolling as per your error log:
specifically this
https://css-tricks.com/snippets/jquery/smooth-scrolling/
, now easy toc links are working.
thanks a lot!
of note, i did not do anything with sticky menu or anything plugin.
however, now, by removing the javascript, i face another new problem whereby my website anchor links do not have smooth scroll or offset functions after removing this javascript. therefore, may I seek your help regarding two possible solutions with relation to easy toc?
1. I can install a separate plugin, such as the “Page scroll to id”. it would solve my new problem as mentioned. I actually tested it out before raising the problem here. but installing this plugin causes a clash with Easy TOC. the clash is described here (hopefully the creator of page scroll to id can help, but so far no progress! 🙁 ) – https://wordpress.org/support/topic/conflict-with-easy-toc/#post-13970811
2. Alternatively, is there a way to structure easy TOC to override the conflict with my initial JS that I added as per above (ie from https://css-tricks.com/snippets/jquery/smooth-scrolling/)? I do know this may be challenging, but Im sure this is crucial to improve the compatability of easy TOC as a widely used plugin. In essence, although it is great that easy TOC offers the smooth scroll and offet functions, it only works specifically for easy TOC / widget. When I create anchor links via any other method, the smooth scroll and offset do not apply… and unfortunately, as you can see, it clashes with this supposed “added function” from easy TOC.
Once again kudos for your amazing swift reply and hope I can resolve this intertwining issues asap! 🙂
The likely only solution is to disable the scripts for ezTOC. Seeing as you are not using either the view toggle or the sticky widget, this should not pose an issue.
Use this to remove the ezTOC scripts:
add_action(
'wp_enqueue_scripts',
function() {
wp_deregister_script( 'ez-toc-js' );
},
11
);
Now you should be able to try alternative solutions for the smooth scroll with offsets.
Thanks a lot Steven!
>> Am seriously considering that. However, just to clarify, what are the JS functions from ez-toc.js again….? before i deregister them.
1. Smooth scroll
2. Offset
3. Toggle Function
4. Sticky widget
5. ?Highlighting? on the easy TOC widget when I am at selected anchor.
6. Anything else I missed out?
I can use my own script or the Pagescrolltoid plugin for number 1 and 2… and I can use Q2W3 for number 4 ( i didn’t use it on easy TOC js function to avoid conflict with q2w3).
>> You are right I do not use toggle function, but I am actually intending to use it! The reason why I am not using it is because of some color mismatch (?Css conflict) I face. I hope to resolve that conflict too actually. I have enabled the toggle function for you to see it. (UPDATE AFTER 20 minutes of troubleshooting: i solved it by adding this to my custom css ” .ez-toc-glyphicon {color: #000000 !important;} “. 🙂
So yes, I do want to use the toggle function! Can i enable it still even after deregistering ez-toc-js?
>> number 5 – will this be affected? I do need this function for my reader’s ease of navigation and readability!
RE: Am seriously considering that. However, just to clarify, what are the JS functions from ez-toc.js again….? before i deregister them.
Yes, it would remove all those features, 1–5, from running in ezTOC.
RE: You are right I do not use toggle function, but I am actually intending to use it! … Can i enable it still even after deregistering ez-toc-js?
You could, but that would require you to copy that part of the script and run that code some other way.
RE: number 5 – will this be affected? I do need this function for my reader’s ease of navigation and readability!
This is the most complex part of the script. It might be easier just to remove the bit of code you do not run.
I guess another way to do this would be to deregister the script and create your own minus the smooth scroll code.
se this code:
And remove lines 51–119:
Or, perhaps another way would be to add another not() statement to the script you are using for the smooth scroll. I think adding this .not('.ez-toc-link') after this line, .not('[href="#0"]'), will work.
Aloha Steven, thanks once again for your reply!
I would certainly try that out sometime when I have a breather…. during this weekend…
However I thought I’d also quickly put a reply, because I was handling a separate (but similar and related) problem. This problem relates to Point 1, i raised 1 day+ ago. ie. this point:
“1. I can install a separate plugin, such as the “Page scroll to id”. it would solve my new problem as mentioned. I actually tested it out before raising the problem here. but installing this plugin causes a clash with Easy TOC. the clash is described here (hopefully the creator of page scroll to id can help, but so far no progress! 🙁 ) – https://wordpress.org/support/topic/conflict-with-easy-toc/#post-13970811”
So, after some discussion and trying out, the exact problem from this CONFLICT between two great plugins – page scroll to id and easy TOC, is perennial!
I really hope that a resolution (with script adjustments) could be reached.
In the words of a suggestor, “The issue is about EASY-TOC script generating id attributes from those headings, without escaping or replacing these special characters.
Special characters like ?, % etc. cause issues with jQuery selectors (imo EASY-TOC should escape these characters when generating the ids).”.
Would there be a good chance to fix up this conflict?
RE: “The issue is about EASY-TOC script generating id attributes from those headings, without escaping or replacing these special characters. Special characters like ?, % etc. cause issues with jQuery selectors (imo EASY-TOC should escape these characters when generating the ids).”
Reserved characters are indeed stripped from the headings when generating the id attributes. But the reserved characters being removed were incomplete. This was addressed in version 2.0.14. However, I missed adding both ? and # to this new more thorough list of reserved characters. They were removed previously in versions <=2.0.13. Version 2.0.15 (released a couple of days ago) corrected this oversight.
ok i went ahead to try your suggestion because Im too excited 😛
i added .not(‘.ez-toc-link’) after this line, .not(‘[href=”#0″]’) to my custom script.
there was a glimmer of hope there!
I have left the improvement/effect there. it’s live on my live website:
https://meide.sg/finding-for-part-time-jobs/
https://meide.sg/finding-for-part-time-jobs/#Looking_for_Full_Time_Job_Instead?
Referring to my earlier point on:
“2. Even though now easy TOC works even with headings with punctuations, there are 2 problesm when the heading contains punctuation: (A) the smooth scroll is not present (try it with the headings WITHOUT punctuation and you can see the smooth scroll (ie. the function where you can adjust speed of scroll too). and (B) the offset function that I have customized in the easy TOC settings with WP dashboard, is not working for those punctuated headings… the headings get hidden under my top menu.”
Kudos! The offset function and smooth scroll now works for headings with punctuations too! However, there is still an exception, when i tried this:
1. Go to https://meide.sg/window-cleaning/
2. Find this phrase “For example, learn about what meide.sg covers for window cleaning here. ”
3. Look at the link address for the word “here” specifically.
4. it should say https://meide.sg/what/#window
5. click on it – and although it goes to the link… both smooth scroll and offset are not working.
6. I suspect it is due to a break in the JS loop when script tries to parse, but there are special characters still present in headings / easy TOC headings. This issue is similar to what I raised earlier, about the conflict between page scroll to id and easy toc…
Any idea how to circumvent this error?
updated to 2.0.15 easy TOC… but the problem* still persists? how come?
* this one as mentioned:
“1. Go to https://meide.sg/window-cleaning/
2. Find this phrase “For example, learn about what meide.sg covers for window cleaning here. ”
3. Look at the link address for the word “here” specifically.
4. it should say https://meide.sg/what/#window
5. click on it – and although it goes to the link… both smooth scroll and offset are not working.
6. I suspect it is due to a break in the JS loop when script tries to parse, but there are special characters still present in headings / easy TOC headings. This issue is similar to what I raised earlier, about the conflict between page scroll to id and easy toc…”
anyway i created another staging site (few seconds ago – so exactly the same as live site), disabled JS minify/combine under litespeed here in case u need:
https://staging11.meide.sg/finding-for-part-time-jobs/
https://staging11.meide.sg/window-cleaning/
