Unexpected result when including h1 headers

[oleersoy]

Tried this:

var toc = $("#toc").tocify({ selectors: "h1,h2,h3,h4,h5" }).data("toc-tocify");

Now only the first h1 header and its child shows up in the toc.

[oleersoy]

It seems like testing toc generation would be simpler if the the selectors were limited to [startHeaderLevel, endHeaderLevel]. So something like:

var toc = $("#toc").tocify({ startSelector: "h1", endSelector: "h5"}).data("toc-tocify");

[oleersoy]

Reading up on the html 5 documentation tags.

https://developer.mozilla.org/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document

Something to note is that subsections can "restart" the header hierarchy.
Might be useful to support a feature allowing the specification of section depth support. For example only outline top level sections or allow sections to a depth level of 3.

[gfranko]

Tried this:

var toc = $("#toc").tocify({ selectors: "h1,h2,h3,h4,h5" }).data("toc-tocify");

Now only the first h1 header and its child shows up in the toc.

@oleersoy So this can be confusing, but the reason you are only seeing the h1 header and it's child show up in the toc is because the other header elements are NOT siblings of the h1 header. Tocify loops through each first selector on the page and then expects all of the subheaders to either be siblings of children of the first header.

It seems like testing toc generation would be simpler if the the selectors were limited to [startHeaderLevel, endHeaderLevel]. So something like:

var toc = $("#toc").tocify({ startSelector: "h1", endSelector: "h5"}).data("toc-tocify");

Specifying a starting and ending selector would limit some flexibility. For example, what if you only wanted to use h2 and h4 tags? You couldn't do that with a start and end selector, since that would also include an h3 element.

Reading up on the html 5 documentation tags.

https://developer.mozilla.org/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document

Something to note is that subsections can "restart" the header hierarchy.
Might be useful to support a feature allowing the specification of section depth support. For example only outline top level sections or allow sections to a depth level of 3.

Very interesting. I like being able to set up section tags to reset the hierarchy. Pull requests are always welcome =)

[oleersoy]

Hi,

Sorry for the late reply. I somehow missed the github email about this issue. I'm still getting up to speed on github, git, jquery, and jqueryui and reading your code has been very helpful. I hope to be able to submit pull requests soon.

I think it would be helpful if there was a document like:
https://developer.mozilla.org/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document

That showed markup and correspondingly how the outline would be generated with respect to the markup. I'll write it up if you think it would be useful.

[gfranko]

@oleersoy No worries! That would be great if you could help contribute to this project. I also agree with you that there should be documentation around how the TOC is generated based on the HTML you are using.

[oleersoy]

Cool - I'll start writing it up ASAP.

[oleersoy]

Doing some research before starting beginning to write, and it turns out there's already an official spec for the algorithm that determines the document outline. The mozilla article sort of hints at it, but this makes it a lot more clear:

http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/
http://developers.whatwg.org/sections.html#headings-and-sections

Do you think it's good enough to just reference this material?