Currently, if I pull this repo, I can't actually import it as a module. I have to make some changes to the top, ex.

  var exports = module.exports = (function () {

It'll be great we can have some dynamic detection if a module or browser is requesting this file. Thank you very much, really liked this piece of work.

I have an angularjs app and I am using #toc for generating tabel of contents.

I have my hash urls that starts with #/

It looks fine but when navigating to toc anchors, hash url changes only #, this causes me 404 redirection if I want to navigate to other pages starting with #/some-pages

For this I had prefixed toc anchors with
prefix : '/'
but I get Uncaught Error: Syntax error, unrecognized expression: #/toc-historical-spot,

is there anyway I can fix this.

Thanks in advance.

Hi,

thanks for this neat script. Using a CMS I need to add the URL to the anchor name in the link, so I changed line 70 from
.attr('href', '#' + anchorName)
to
.attr('href', window.location + '#' + anchorName).

EDIT:
The above change of code seemed to be working well at first, but now I realise that something isn't working well. Clicking on another link now, the anchor is being added to the URL - http://mydomain.com/mypage.html#toc38#toc19. Refreshing the page adds yet another anchor to the URL etc.

Did I trigger this behavior by adding window.location? Is there a solution for this?

I'd very much appreciate your help,
Anke

Hi there!

I found that in Safari on latest version, you get an error when you do the following: First you start scrolling till one of the elements is highlighted, then you try to click an element and it should begin the scrolling but the following error arises:

TypeError: 'undefined' is not a function (evaluating 'scrollable.animate')

It seems that it loose the value of the scrollable within the closure.

I've added this before the animate call and the issue is solved. If anyone knows a better solution it will be greatly appreciated:

if (!scrollable){
    scrollable = findScrollableElement(opts.container, 'body', 'html');
}

I want to handle on selected event . it is not working . What am I doing wrong?

              $('#pageContents').toc({ 
                      'smoothScrolling': function(target, options, callback) {
                        $(target).smoothScroller({
                          offset: options.scrollToOffset
                        }).on('smoothScrollerComplete', function() {
                        console.log('asds');
                        $('#pageContents').sly('toEnd', $('#pageContents').find('.toc-active'))
                            callback();
                        });
                     }
            });

Im wondering how i can set the offset, i wont the link to scroll say 40-80px from the top. But i see 3 different offsets, and 2 dont seem to have any influence?

The offset highlight seems to do something, that does look when the link is X px from the top.

I dont see what the other 2 do. 1 Note this is the version from an different branch, the main branch is missing almost all files.

You can install it from here:
https://addons.mozilla.org/hu/firefox/addon/table-of-contents/

And fork from here:
https://github.com/nagyv/toc

When you click in a item X, it moves the page to the section X, but the header is hidden because the the was moved too far by down. It would be good (at least with a custom property) to appears the header always.

Summary

If you initialize in landscape mode, the script appears to break within the scrollTo function, probably because the scrollable variable is undefined in this scenario.

Affected Devices/Browsers

• iPad 3 running iOS 5
• Android 2.3 device (Motorola Droid 3)

When clicking on a section in TOC, it sometimes jumps up or down to the adjacent section.

This behavior is evident on the download site for this plugin:
http://projects.jga.me/toc/

Referenced here also:
https://github.com/SecurityInnovation/CustomerPortal/issues/222

Content inside certain elements is supposed to belong to its own separate outline structure, and shouldn't be included in the main outline, whose root is the document body. See this discussion of section roots..

Seems like the compile versions are no longer included in this repo ... Would be nice to have those around as it's a bit of a showstopper for n00bs!

could work something like:

{ //options
  addBottomPadding: false | selector
}

if selector passed in, that's the element that gets the bottom padding.

So that internal links to headings can be written into the page's html it'd be useful if there was an option such as verbose-ids: true which would

1. Read the heading's text
2. Clean away any non alphanumeric characters
3. Replace spaces by hyphens
4. Use this (possibly prefixed bytoc-) as the id

If I get time this week I'll have a go at developing this myself and opening a pull request if you're open to the idea?

There's of course an issue with ensuring uniqueness of ids, but could be tackled by using the entire hierarchy as the id {{verbose h1}}/{{verbose h2}}... which assumes a good document structure, but as it would be a feature devs would turn on when it suits them I think this woudl be something for each dev to consider for themselves.

Hi all,

Thanks for this useful plugin! I have a problem when clicking on any heading. Scroll is okay, and highlight also. Nevertheless, if you continue scrolling, related headings are not highlighted.

This issue appears on firefox and Google Chrome.

Someone has the same problem ?

Thanks,

Alexander

If I have a empty heading in my text, this will also be shown in my table of contents. Is there an easy way to exclude those?

There should be a short description on how to get up and running in the README. Is this project currently actively maintained or why are there 15 open Pull Requests?

I'm not sure what's going on but the last item in my TOC keeps being set as the active one when I scroll to the top of the page. Any thoughts?

If you use only a keyboard, the focus is not correctly handled. If we use http://projects.jga.me/toc/, and tab to download, pressing enter, then tab again brings focus back to the TOC link at the top. If focus was properly handled, pressing tab after enter should place focus on the "production" link. To properly move focus tabindex="-1" must be added to the heading it is jumping to, or the <span> that this plug in creates before the heading.

When this is my CSS:
.special{
display:none;
}

the "Something" header still appears in the table of contents.
(Clicking that item in the table of contents does nothing though.)

Hi guys,

Currently package is integrated with npm, would it possible to integrate it as well with composer?
By creating a composer.json file, the package could become available to composer package manager.

Thanks in advance to all for your replies.
Cheers!

Reopening #66:

https://raw.githubusercontent.com/jgallen23/toc/master/dist/toc.min.js

leads to a 404. Maybe it would be worthwhile to publish the production code on a CDN?

Link to download production and development file on the github pages are missing due to dist folder is removed.

https://raw.githubusercontent.com/jgallen23/toc/master/dist/toc.min.js

Could you please add new links or summit this library into cdnjs/jsdelivery?

The download links located here http://projects.jga.me/toc/ return 404.

I managed to install via npm, but when I set the options, using $('#toc').toc(); I get Uncaught TypeError: $(...).toc is not a function.

The example configures the selectors with <div class="toc" data-toc="h1, h2, h3">, and doesn't use any jQuery at all. Is there another example somewhere I can look at to get this working?

I just download it and the example files have wrong links. It seems files are missing.

There is no folder dist and none of the files excist. There a 2 TOC.js files but they give errors if i link it to them.

Toc is working 'almost' perfectly. It works perfect when not logged in (front-end) of website. When logged in the h3-headers are shown twice, h2-header (8 wielen vlechten) is shown once.

<ul id="toc" class="toc" ></ul>

<script> $('#toc').toc({ 'selectors': 'h2, h3, h4, h5, h6', //elements to use as headings 'container': 'body', //element to find all selectors in 'smoothScrolling': true, //enable or disable smooth scrolling on click 'prefix': 'toc', //prefix for anchor tags and class names 'onHighlight': function(el) {}, //called when a new section is highlighted 'highlightOnScroll': true, //add class to heading that is currently in focus 'highlightOffset': 100, //offset to trigger the next headline 'anchorName': function(i, heading, prefix) { //custom function for anchor name return prefix+i; }, 'headerText': function(i, heading, $heading) { //custom function building the header-item text return $heading.text(); }, 'itemClass': function(i, heading, $heading, prefix) { // custom function for item class return $heading[0].tagName.toLowerCase(); } });

Clicking on a TOC item will change the URL with the correct hash but will not scroll.

IE9 simply jumps down to hash without smooth scroll.

Hi, and thanks for this great piece of code!

I had a minor issue with a long document, where the TOC (as a sidebar) was not fitting in the screen: then, the highlighted section was not always on screen, which partly defeats the purpose of the "Automatically highlight the current section" feature.

I used the following code to let the table of contents scroll automatically to the highlighted section when it's not visible:

function isElementInViewport (el) {
    // special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

$(function(){
    $('#table-of-contents').toc({
        'onHighlight': function(el) {
        // Scroll to make the element visible if needed.
            if (!isElementInViewport(el)) {
                $('#table-of-contents').animate({
                        scrollTop: el.offset().top
                    }, 2000);
            }
        }
    });
});

It would be nice to have the feature built-in (just a 'highlightAutoScroll' : true passed to toc() for example).

Waiting for that, other people may find the code above useful :-). Feel free to use it.

I'm trying to use toc.js with an application that allows users to edit HTML saved in a DB with Summernote, and I'm getting duplicate anchors after I save HTML to the DB and reload the content.

Why I'm getting this makes sense. It appears that the HTML is loading, toc.js adds an anchor, and when changes are saved, the anchors are being saved, too. The next time the HTML is edited, the anchor span tags get prepending again. Is there a way that toc.js can use anchor elements that match if they're already in the container element?

Here's how I've got my setup configured.

$('#toc').toc({
        selectors: 'h3,h4,h5,h6',
        container: '.col-sm-9 .note-editable.panel-body',
        prefix: 'toc',
});

One issue is: if a title have the "." char, the generated ID also have it and the anchor not works.

Great plugin, I use for years!

Given a page with a div with scrollbars. I cannot get IE8+9 to navigate to the anchors (smoothscrolling = false).
(Firefox + chrome no issues)

Hack to anchor to add to the anchor span:

 .css({display:"inline-block"})

resolved the issue.

Looks like a great project!

Just fetched with GitHub Desktop and tried the example. Seems the /dist/ folder is missing. Also cannot seem to locate toc.js?

Or, maybe can only use via npm?

Thanks!

ok, seems to me right now, all the toc are collected, ex. h2,h3, but when the li is added one by one, we add all h2 and then all h3. Is this a bug ?

   const selectors = el.dataset.toc.split(',').map(s => s.trim());
   selectors.forEach(selector => {
      const items = find(selector, container);

in the old library, jQuery seems to nail this properly

  var headings = $(opts.selectors, container);

so now I wonder if can the new find take a list of tags?

I'm adding toc.js to a page at http://localhost:8080/testview?view=dev/styleguide.html, yet the links in the TOC are things like this:

<a href="#toc-atoms">Atoms</a>

Clicking on that link takes me to http://localhost:8080/#toc-atoms in error. I think the links should be like /testview?view=dev/styleguide.html#toc-atoms, instead.

How can this be fixed?

Also, not sure if this is related, but the active state isn't following my scroll, either.

Hi,

How to get the toc.js file?

Test case:

http://projects.jga.me/toc/#toc0

Click on any menu item that refers to an item that is within one page height of the bottom of the document, so on my screen these include History down to Contributions. It then smooth scrolls down to this item, but then when the menu highlight code kicks in it detects that it is only up to the Example CSS section which is the first section visible on the page.

I'd just test if the page bottom was hit as part of the scroll and if so explicitly set the menu item to highlight the on that was just clicked and not do the current location detection.

Hi,

I am using TOC and it's an awesome plugin. However, I have an issue : Some of my headings have accents (é,è, ...), thus the anchor generated is not super clean. Example here : for the heading "Sécurité", the anchor is : #toc-s-curit-. Is there a way to replace letters with accent by letters without accent (so my anchor would become #toc-securite ?

Thanks

How to design inline TOC

How can i design a float=left or right DIV

This is in similar vein to my first comment on issue #2.

It would be great if the scroll behavior could be plugged as an option.

Inserting the anchor element before headline introduces an additional element between different headlines and/or paragraphs and headlines which breaks CSS stylesheets using the "+" selector (Select consecutive elements).

Possible Solution: Could the anchor be appended to the headline itself? So instead of <span id="toc4"></span><h3>Options</h3> it would create a <h3>Options<span id="toc4"></span></h3>?

On your example page, if you click the "Contributors" link in the table of contents, instead of the url hash being #toc9, it would be cleaner and make more sense for a url if the headline was the hash. Just a suggestion.

if the element has data-toc-title on it, we should use that as the TOC name rather than the text of the element