Last heading in toc goes active on any scroll movement

Hi,

That is indeed a strange behaviour. One thing I could think of is possibly a javascript conflict. That would be better if I could either check this for myself or at least try to reproduce this. If you deactivate every other plugin but Joli TOC, can you see a difference ?

What version of WP and what version of the plugin are you using ?

One more thing, it is probably unrelated but we never know… can you try deactivating the smooth scrolling from the options ?

Thank you !

Thank you for the reply.

At the moment, I can’t do any testing because the site is in the process of migrating to a different web host.

In the time since I submitted the original ticket here, I discovered another weird behavior. That is, clicking the links in the TOC works as expected on desktop – quickly taking me to the desired heading. But on mobile the links act as if they are null links. They take on the hover state, etc., but they don’t go anywhere.

Combined with the weird behavior I first mentioned in this ticket thread, I thought there must be an issue with this TOC when used in a block. But then, I tried two other TOC block plugins and they had very similar behavior on mobile.

All three work as expected on desktop. But Joli didn’t do anything on mobile except show the hover state on or off. With the second plugin that I experimented with, the page would move about 1/2 of one line. With the third one, clicking any link would send me straight to the top of the page.

Sorry, but I forgot to answer your question. Yes, I tried deactivating smooth scrolling. That did not fix the issue.

Thank you for your additional details. I will take not of that, especially for the mobile part.

In many cases, modern themes will have event listeners on anchor links and provide some sort of “embedded” smooth scrolling feature. That is often source of conflict, because each anchor link could have many event listeners (one from the theme, one from Joli TOC, and possibly more).
This can be problematic as there is a “competition” between scripts and one can override another one’s behaviour or make it buggy.
I’m not sure this is clear but again, that would be easier to tell what goes wrong with the actual page !

Let me know if it’s available to see at some point.

Thank you.

I’ll give you a url as soon as the site migration is settled.

Okay thank you. Let’s do that !

You can see the Joli-TOC on this page:

https://thetechiesenior.com/where-are-symbols-in-openoffice-writer/

On desktop it works. On mobile, it scrolls to the top of the page. (Earlier I mistakenly said that behavior was one of the other toc plugin doing that.)

This is the only page on the site that currently has the Joli TOC inserted. The other pages use a different one until I get this issue shorted out. None of them work properly on mobile.

Is there an update on this issue?

Thanks.

Tom

Hi,

Thank you for waiting. I took a look at your page and after some analysis I noticed something that could break the normal behaviour of the plugin.

1. Your HTML has duplicate headings containing the class “joli-heading” within the source code (e.g. <h2 id=what-are-symbols-in-openoffice-writer class=joli-heading>). For example in your page there are 6 actual headings (“What are symbols in OpenOffice Writer?”, etc…) but in the HTML source code, there are 12, half of which are not visible on the page but are detected by the script.

2. The Joli TOC script has been altered by a third party software (it seems to be called “Ezoic” something) and this could somehow break the normal behaviour.

The original wpjoli-joli-toc.min.js script should be ( I deminified the scripts ) :

"use strict";
! function(u) {
    u(document).ready(function() {
        var o, l, t, e, i, a, n, c, s, d, r, j;
        null !== document.getElementById("joli-toc-wrapper") && (o = function() {
            0 < u(r).length && (j = u(r).outerWidth(!0))
        }, l = function() {
            u(n).hasClass("joli-incontent") ? u(n).removeClass("joli-folded").addClass("joli-unfolded") : (u("nav#joli-toc").removeClass("joli-collapsed").addClass("joli-expanded"), e()), a()
        }, t = function() {
            u("nav#joli-toc").hasClass("joli-expanded") ? i() : (u(n).removeClass("joli-unfolded").addClass("joli-folded"), a())
        }, e = function() {
            0 < j && u("nav#joli-toc").css("max-width", j)
        }, i = function() {
            u("nav#joli-toc").css("max-width", "")
        }, a = function() {
            u(n).hasClass("joli-unfolded"), u(n).outerHeight(!0)
        }, n = u("#joli-toc-wrapper"), c = u(".joli-heading"), s = joli_toc_vars.jumpto_offset || 50, d = !1, r = u(".entry-content"), j = 0, o(), u(window).on("scroll", function() {
            d = !0
        }), window.onresize = o, setInterval(function() {
            var e, i;
            d && (d = !1, i = u(document).scrollTop(), u(n).hasClass("joli-unfolded-ufloating") && (i > joliTOCInitPosY ? u(n).removeClass("joli-incontent").addClass("joli-floating") : u(n).removeClass("joli-floating").addClass("joli-incontent")), u(c).each(function(o, l) {
                var t;
                u(this).offset().top - s < i && (t = u(this).attr("id"), e = u('#joli-toc-wrapper li a[href="#' + t + '"]'))
            }, i, e), u("#joli-toc-wrapper li a.active").removeClass("active"), u(e).addClass("active"))
        }, 200), u(n).css("display", ""), u(".joli-nav").css("display", ""), u(document).on("click", "#joli-toc-header", function(o) {
            u(o.target).is("#joli-toc-header, #title-label") && (u(n).hasClass("joli-folded") ? l : t)()
        }), u(document).on("click", "#joli-toc-toggle", l), u(document).on("click", "#joli-toc-collapse", t), u(document).on("click", "#joli-toc-wrapper.joli-smoothscroll .joli-expanded li a, #joli-toc-wrapper.joli-smoothscroll.joli-incontent li a, #joli-toc-wrapper.joli-smoothscroll.joli-unfolded-ufloating li a", function() {
            if (location.hostname == this.hostname && this.pathname.replace(/^\//, "") == location.pathname.replace(/^\//, "")) {
                var l;
                try {
                    l = decodeURIComponent(this.hash)
                } catch (o) {
                    l = this.hash
                }
                var o = u(l);
                (o = o.length ? o : u("[name=" + l.slice(1) + "]")).length && u("html, body").animate({
                    scrollTop: o.offset().top - s + 1
                }, 1e3, void document)
            }
        }), u(document).on("click touchend", "#joli-toc-wrapper .joli-collapsed li a", function(o) {
            var l = "ontouchstart" in document.documentElement == 1 ? "touch" : "click";
            return "click" !== joli_toc_vars.expands_on && "touch" != l || (u("nav#joli-toc").removeClass("joli-collapsed").addClass("joli-expanded"), e()), !1
        }), u(document).on("click", "#joli-toc-wrapper .joli-expanded li a", function(o) {
            u("nav#joli-toc").removeClass("joli-expanded").addClass("joli-collapsed"), i()
        }))
    })
}(jQuery);

But in your page the script has been altered to :

"use strict";
! function(u) {
    ezoicSiteSpeed(u(document), String(/documentReady/).substring(1).slice(0, -1), String(/jQuery-document-dot-ready/).substring(1).slice(0, -1), function() {
        var o, l, t, e, i, a, n, c, s, d, r, j;
        null !== document.getElementById("joli-toc-wrapper") && (o = function() {
                0 < u(r).length && (j = u(r).outerWidth(!0))
            },
            l = function() {
                u(n).hasClass("joli-incontent") ? u(n).removeClass("joli-folded").addClass("joli-unfolded") : (u("nav#joli-toc").removeClass("joli-collapsed").addClass("joli-expanded"),
                        e()),
                    a()
            },
            t = function() {
                u("nav#joli-toc").hasClass("joli-expanded") ? i() : (u(n).removeClass("joli-unfolded").addClass("joli-folded"),
                    a())
            },
            e = function() {
                0 < j && u("nav#joli-toc").css("max-width", j)
            },
            i = function() {
                u("nav#joli-toc").css("max-width", "")
            },
            a = function() {
                u(n).hasClass("joli-unfolded"),
                    u(n).outerHeight(!0)
            },
            n = u("#joli-toc-wrapper"),
            c = u(".joli-heading"),
            s = joli_toc_vars.jumpto_offset || 50,
            d = !1,
            r = u(".entry-content"),
            j = 0,
            o(),
            u(window).on("scroll", function() {
                d = !0
            }),
            window.onresize = o,
            ezoicSiteSpeed(setInterval, String(/documentReady/).substring(1).slice(0, -1), String(/jQuery-document-ready/).substring(1).slice(0, -1), function() {
                var e, i;
                d && (d = !1,
                    i = u(document).scrollTop(),
                    u(n).hasClass("joli-unfolded-ufloating") && (i > joliTOCInitPosY ? u(n).removeClass("joli-incontent").addClass("joli-floating") : u(n).removeClass("joli-floating").addClass("joli-incontent")),
                    u(c).each(function(o, l) {
                        var t;
                        u(this).offset().top - s < i && (t = u(this).attr("id"),
                            e = u('#joli-toc-wrapper li a[href="#' + t + '"]'))
                    }, i, e),
                    u("#joli-toc-wrapper li a.active").removeClass("active"),
                    u(e).addClass("active"))
            }, 200),
            u(n).css("display", ""),
            u(".joli-nav").css("display", ""),
            u(document).on("click", "#joli-toc-header", function(o) {
                u(o.target).is("#joli-toc-header, #title-label") && (u(n).hasClass("joli-folded") ? l : t)()
            }),
            u(document).on("click", "#joli-toc-toggle", l),
            u(document).on("click", "#joli-toc-collapse", t),
            u(document).on("click", "#joli-toc-wrapper.joli-smoothscroll .joli-expanded li a, #joli-toc-wrapper.joli-smoothscroll.joli-incontent li a, #joli-toc-wrapper.joli-smoothscroll.joli-unfolded-ufloating li a", function() {
                if (location.hostname == this.hostname && this.pathname.replace(/^\//, "") == location.pathname.replace(/^\//, "")) {
                    var l;
                    try {
                        l = decodeURIComponent(this.hash)
                    } catch (o) {
                        l = this.hash
                    }
                    var o = u(l);
                    (o = o.length ? o : u("[name=" + l.slice(1) + "]")).length && u("html, body").animate({
                        scrollTop: o.offset().top - s + 1
                    }, 1e3, void document)
                }
            }),
            u(document).on("click touchend", "#joli-toc-wrapper .joli-collapsed li a", function(o) {
                var l = "ontouchstart" in document.documentElement == 1 ? "touch" : "click";
                return "click" !== joli_toc_vars.expands_on && "touch" != l || (u("nav#joli-toc").removeClass("joli-collapsed").addClass("joli-expanded"),
                        e()),
                    !1
            }),
            u(document).on("click", "#joli-toc-wrapper .joli-expanded li a", function(o) {
                u("nav#joli-toc").removeClass("joli-expanded").addClass("joli-collapsed"),
                    i()
            }))
    })
}(jQuery);

As you can see, there are some differences, such as the addition of the “ezoicSiteSpeed” function. Feel free to match them against each other in a text editor such as notepad++.

So my guess is that the double headings + the altered script could lead to some unexpected bugs, that could also explain the scroll to top behaviour on mobile regardless what heading is tapped on the actual toc.

You must be using some kind of code optimiser that may break things. I also noticed a lack of double quotes within the HTML source code for classes or attributes and even though this can work and saves a few bytes, it is not considered best practice.

I hope this was helpful !

Thank you for the thorough response.In response to your comments:

1) I recently moved the site from Avada to the current setup (Twenty Twenty Two + Twentig plugin and two or three other block plugins). Until I made the theme change last week, I had been using the Classic Editor. I noticed when the posts were converted to the block editor, that sometimes there would be things that didn’t make the transition properly. i.e. Blocks seemed to not know how to handle a certain heading or something else similarly weird. Could that have resulted in the duplicate headings? And if so, any idea how to fix that? Editing page code is different in the block editor.

2) Ezoic is the company that I use to provide ads on the site. Their “Leap” tool is the code optimiser that you mentioned later in your reply. It attempts to optimize page code and speed up pages as much as possible to help make up for the overhead that ads can add to page load time. I will talk to them about this.

If I uninstall Joli-Toc should that remove the funky code? Then I could reinstall it and start over with new clean code.

Thanks.

The information you gave about there being duplicate headings on the page stumped me at first, but it led to the solution.

When I built the post template in the WP block editor, I inserted two post content blocks and styled them differently. One was hidden on mobile. The other was hidden on desktop and mobile.

That was a bad choice and one that I won’t make again for a block with that much potential source/content code in it.

I removed one of them and set the other to visible for all devices. When I did that, the table of contents started working as it should.

Thank you for your assistance. It led to the solution. (Apparently, the bit that Ezoic added to the script did not cause the problem.)

Hi,

Thank you for your detailed explanation. And glad that you could figure out the issue with my analysis !

Hope everything works well from now on !

Thank you ??