Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1489933

    Hi Enfold,
    as far as I understand the design of the Table of Contents widget area (line from beginning to end with a colored circle on it), it should show the current position of the reader. When the reader clicks on a headline this headline should be highlighted. If this the expected behavior? If it is, how can I fix it? I shared a private example page.

    Also by default the headline of the table of contents is h3. How can I change that (to h2 or to remove the h-tag completely?

    Thanks

    • This topic was modified 3 weeks ago by atx_m.
    #1489945

    Hey atx_m,

    Thank you for the inquiry.

    The TOC widget doesn’t have an active state by default, but you can use this script in the functions.php file to add an active class on click and while scrolling.

    add_action('wp_footer', function () {
        ?>
        <script>
        document.addEventListener("DOMContentLoaded", function () {
          const tocLinks = document.querySelectorAll('.avia-toc-link');
          const headingSelectors = document.querySelector('.avia-toc-container').dataset.level.split(',');
          const headings = Array.from(document.querySelectorAll(headingSelectors.join(',')));
    
          tocLinks.forEach(link => {
            link.addEventListener('click', function () {
              tocLinks.forEach(l => l.classList.remove('active'));
              this.classList.add('active');
            });
          });
    
          function onScroll() {
            let scrollPosition = window.scrollY + 100;
            let currentId = null;
    
            for (let i = headings.length - 1; i >= 0; i--) {
              const heading = headings[i];
              if (heading.offsetTop <= scrollPosition) {
                currentId = heading.id;
                break;
              }
            }
    
            if (currentId) {
              tocLinks.forEach(link => {
                link.classList.toggle('active', link.getAttribute('href') === #${currentId});
              });
            }
          }
    
          window.addEventListener('scroll', onScroll);
          onScroll();
        });
        </script>
        <?php
    }, 9999);
    

    You can then include this css to adjust the color of the active TOC links:

    .avia-toc-link.active {
      color: #fe9000;
      font-weight: bold;
    }

    To change the heading tags, edit the widget and look for the “Select headlines to include” option.

    Let us know the result.

    Best regards,
    Ismael

    #1489950

    I added both codes but I can’t see any change on the blog Post.
    Is this correct ?
    wp_footer
    since it is the sidebar, not the footer?

    How can I change the font color and ensure that not only capital letters are used?

    • This reply was modified 2 weeks, 6 days ago by atx_m.
    • This reply was modified 2 weeks, 6 days ago by atx_m.
    #1489974

    Hi,

    Thank you for the update.

    We found a minor issue in the code. Please look for this line:

    link.classList.toggle('active', link.getAttribute('href') === #${currentId});
    

    Replace it with:

    link.classList.toggle('active', link.getAttribute('href') === '#' + currentId);
    

    Hope this helps.

    Best regards,
    Ismael

    #1489977

    I added this code now:

    add_action('wp_footer', function () {
        ?>
        <script>
        document.addEventListener("DOMContentLoaded", function () {
          const tocLinks = document.querySelectorAll('.avia-toc-link');
          const headingSelectors = document.querySelector('.avia-toc-container').dataset.level.split(',');
          const headings = Array.from(document.querySelectorAll(headingSelectors.join(',')));
    
          tocLinks.forEach(link => {
            link.addEventListener('click', function () {
              tocLinks.forEach(l => l.classList.remove('active'));
              this.classList.add('active');
            });
          });
    
          function onScroll() {
            let scrollPosition = window.scrollY + 100;
            let currentId = null;
    
            for (let i = headings.length - 1; i >= 0; i--) {
              const heading = headings[i];
              if (heading.offsetTop <= scrollPosition) {
                currentId = heading.id;
                break;
              }
            }
    
            if (currentId) {
              tocLinks.forEach(link => {
                link.classList.toggle('active', link.getAttribute('href') === '#' + currentId);
              });
            }
          }
    
          window.addEventListener('scroll', onScroll);
          onScroll();
        });
        </script>
        <?php
    }, 9999);

    but a can’t see any change in the behaviour.

    #1490003

    Hi,

    What happens when you temporarily disable WP Rocket? We are no longer seeing any issues and WP Rocket adds an attribute to the script marking it as executed, but the script doesn’t seem to be taking effect.

    Please provide the login details in the private field so we can test this further. Make sure that Appearance > Theme File Editor is active and accessible.

    Best regards,
    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.