0

I am using the jQuery.tocify.js javascript plugin to programmatically generate a table of contents. I am having a bit of a problem, though. The way the plugin operates, it pulls every h1, h2, h3, etc. tag and makes a nested list, while respecting depth.

The problem I'm having is that if I have an h2 with a long string, the formatting in the table of contents comes out "wrong". In particular, the first line of the list item is nested, but the content flows like a paragraph:

The Top Level Heading

A Secondary Heading With

a Long Title

Another Secondary Heading

Sorry for the bad approximation, but I hope it gets what I'm seeing across.

Is there any way to set list items to indent the entire secondary heading to the same depth, so that it comes out (approximately) as:

The Top Level Heading

A Secondary Heading With

a Long Title

Here is an example of the generated table of contents (with a long name):

<ul id="tocify-header7" class="tocify-header nav nav-list">
  <li class="tocify-item active" data-unique="the-fifth-(and-successful)-try" style="cursor: pointer;"><a>The Fifth (and Successful) Try</a></li></ul>

It looks like nav and nav-list are supposed to come from Bootstrap, but I'm not sure Bootstrap3 even has a nav-list class anymore.

Edit: Yup, it looks like the plugin is incompatible with Bootstrap 3. I suppose I will shop around for a different plugin.

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
nomen
  • 3,626
  • 2
  • 23
  • 40
  • 2
    I'm afraid without any HTML or CSS, your question is unanswerable. What you want is the default behavior, so I'm not sure what the plugin is doing: http://jsbin.com/tajateju/1/edit – Blender Jun 22 '14 at 23:15
  • Fair enough. It's all dynamically generated. Let me see what I can find. – nomen Jun 22 '14 at 23:19
  • View it with your browser's DOM inspector and just copy the HTML. I know Chrome's developer tools let you do this. – Blender Jun 22 '14 at 23:31

1 Answers1

0

You should display the anchors as blocks and set a max width to them. This should force them to loop around at the close but keep it all at the same indentation.

ndm13
  • 1,189
  • 13
  • 19