TOC based on headers within topic

[Vidar83]

Hi, please forgive me if this is not the right location for this question.

So I have this one topic. I want to put a TOC at the top of the topic that shows all the headers and their levels, just like the TOC you can automatically generate in Word.

How do I do this in Flare (2017)? Surely there's a quick way to do something this basic?

Note: I don't want to link it to anything in the master TOC of the entire project, I just want to show the headers within this one topic...

[ChoccieMuffin]

Sounds like you need to insert a MiniToc Proxy, if I read you right.

On the Insert menu, in the Proxy group (right at the end of the ribbon tab) click the arrow below Proxy and select Insert Mini-Toc Proxy.

See if that's what you're after.

[NorthEast]

In Web outputs, the miniTOC would just insert a menu based on TOC entries, not headings inside the topic.

If you want to create links to headings within the same topic, then AFAIK Flare doesn't offer anything to do that.
For our help, I had to write a script to do that.

[Vidar83]

Hi ChoccieMuffin (great name by the way!)

Tried the Mini-TOC proxy but like Dave said, that not what I'm looking for as it links to the main TOC of the entire project, not the headers within the topic.

Any chance you could share that script, Dave?

[NorthEast]

Any chance you could share that script, Dave?

The script adds a box "On this page" box which contains links to h2 and h3 headings in the topic.


In my master page(s) body, I include this HTML:

Code: Select all

                    <div id="page-toc">
                        <p class="boxHeading">On this page</p>
                        <!-- page table of contents generated here -->
                    </div>

In the master page(s) head, I have a link to a script file:

Code: Select all

<script type="text/javascript" src="../Scripts/page-toc.js"></script>

Then the page-toc.js file contains this:

Code: Select all

/* based on script from */
/* https://css-tricks.com/automatic-table-of-contents */ 

$(document).ready(function() {
	/* check if h2 or h3 exists on page. Only count visible headings */
	if ($("h2:visible,h3:visible").length > 0) { 
			
		/* build the opening tags of the structure */
		var ToC =
			"<nav role='navigation' class='table-of-contents'>" +
			"<ul>";
		
		/* set up variables used */
		var newLine, el, title, link, tag;
		/* set linkCount to zero */
		var linkCount = 0;
			
		/* find all h2 and h3 on page. Only count visible headings */
		$("h2:visible,h3:visible").each(function() {
			
			/* get the heading */
			el = $(this);
			/* get the heading title */
			title = el.text();
			/* get the heading tag, this is capitalised, i.e. 'H2' or 'H3' */
			tag = el.prop("tagName");
		
			/* updated linkCount, this will be id for link */
			linkCount += 1;

			link = "link" + linkCount;
			/* insert an anchor tag with the name attribute */
			$(this).prepend('<a name="' + link + '"></a>');

			/* Build the line in the list, setting the li class as the tag name, and using the heading text */
			newLine =
				"<li class=" +
				tag +
				">" +
				"<a href='#" + link + "'>" +
				title +
				"</a>" +
				"</li>";
			
			/* add the list item to the list */
			ToC += newLine;

		});	
			
		/* Add closing tags to list */	
		ToC +=
			"</ul>" +
			"</nav>";
		/* Insert list in topic, and make visible */
		$("#page-toc").append(ToC).css("display", "block");
			
	}
	
});

I have this in my stylesheet to initially hide the box - the script displays it if it has any content.

Code: Select all

#page-toc	/* container for topic navigation control */
{
	display: none;
}

[doc_guy]

Dave,

Have I told you recently that you are my hero? You do some awesome stuff in Flare and I'm constantly amazed by you. Keep up the good work, and thanks for sharing that script.

[jkpalmer]

Hi - I also have this requirement and this is a GREAT!! start, but my CSS skills are definitely lacking.

What I would like to be able to do is using the code provided (which I have implemented in a test Flare project) is change the way the page toc is generated.

Could use a little coaching to produce an "inline" (links across the top of the page) rather than a bullet list and also add some borders, background color, etc.

Help appreciated.

Jim P

[cdschroeder]

Thanks for this awesome solution, Dave. Nita pointed me to this topic just a bit ago and I already have it working with my output. It's very slick, and the boss loves it!

Quick question - do you know to get the TOC to move with the page as it scrolls? Like so: https://developers.google.com/analytics ... ngOverview

I'm not terribly fluent in JS, so I wouldn't have a clue where to start...

[NorthEast]

Hi - I also have this requirement and this is a GREAT!! start, but my CSS skills are definitely lacking.

What I would like to be able to do is using the code provided (which I have implemented in a test Flare project) is change the way the page toc is generated.

Could use a little coaching to produce an "inline" (links across the top of the page) rather than a bullet list and also add some borders, background color, etc.

Try setting list items inside the page-toc container to display inline; e.g.

Code: Select all

#page-toc li 
{ 
   display: inline; 
}

[NorthEast]

Quick question - do you know to get the TOC to move with the page as it scrolls? Like so: https://developers.google.com/analytics ... ngOverview

I've not tried doing that in a Flare project.

I've used a control like that many years ago in a standalone website using the Bootstrap framework, so you'll probably be able to find a solution somewhere.

[jkpalmer]

Ok, so I was successful at implementing this suggestion and it's a great addition.

I "extended" it to include h1 as well.

I have made the navigation section "sticky" at the top of the page, but I'm having trouble showing the content when I select one of the nav links.
The body content is positioned under my "sticky" section and I can't seem to get the content to display.

Help greatly appreciated.

Jim P.

[NorthEast]

I have made the navigation section "sticky" at the top of the page, but I'm having trouble showing the content when I select one of the nav links.
The body content is positioned under my "sticky" section and I can't seem to get the content to display.

Usually if you have sticky (non-scrolling) content at the top of the page, then you need to use an offset (padding/margin) on the element that contains the topic content.

[doc_guy]

Dave,

I think the problem isn't actually at the top of the topic; its when you link to an anchor in the topic. Then the target appears at the top of the page, which in this case, is below the sticky header, if that makes sense.

[jkpalmer]

Dave,

I think the problem isn't actually at the top of the topic; its when you link to an anchor in the topic. Then the target appears at the top of the page, which in this case, is below the sticky header, if that makes sense.

I believe this is what I'm experiencing.

I have the "sticky" working properly, but the document anchor is placed at the top of the page under the "Sticky".

I would like to have the anchor positioned below the bottom of the "sticky", if possible.

Jim P

[NorthEast]

Dave,

I think the problem isn't actually at the top of the topic; its when you link to an anchor in the topic. Then the target appears at the top of the page, which in this case, is below the sticky header, if that makes sense.

I believe this is what I'm experiencing.

I have the "sticky" working properly, but the document anchor is placed at the top of the page under the "Sticky".

I would like to have the anchor positioned below the bottom of the "sticky", if possible.

Jim P

Yep, I do understand the problem - I'm just saying that most good 'sticky' solutions will take this into account, e.g. by using offsets in the CSS.
This is getting a bit off-topic, so perhaps start a new thread with details of how your 'sticky' works.

For example, say the sticky content uses a fixed position and is 100px high, the body content would use absolute position and have a top/margin-top offset of 100px, and the link destination IDs could be offset by the same amount; e.g.

Code: Select all

		[id*="link"]:before {
			content:"";
			display:block;
			height:100px;
			margin:-100px 0 0;
		}

[Corinna]

Hi Dave,
Thank you so much for sharing your script!

For SEO-friendliness and readability in general, I have extended and modified it so that the IDs are based on the text of the headings (rather than link#). Whitespaces and umlauts are replaced as defined, and the entire #page-toc div is forced to always appear after h1.

page-toc.PNG

Code: Select all

/* based on script from */
/* https://css-tricks.com/automatic-table-of-contents */ 
/* script by Dave Lee found on https://forums.madcapsoftware.com/viewtopic.php?f=9&t=28643&p=125475&hilit=miniTOC#p125475 */

$(document).ready(function() {
   /* check if h2 or h3 exists on page. Only count visible headings */
   if ($("h2:visible,h3:visible").length > 2) { 
         
      /* build the opening tags of the structure */
      var ToC = "<ul>";
      
      /* set up variables used */
      var newLine, el, title, link, tag;      
         
      /* find all h2 and h3 on page. Only count visible headings */
      $("h2:visible,h3:visible").each(function() {
         
         /* get the heading */
         el = $(this);
         /* get the heading title */
         title = el.text();
         /* get the heading tag, this is capitalised, i.e. 'H2' or 'H3' */
         tag = el.prop("tagName");		 
		 /* for SEO friendly URLs, create IDs from heading text, replace whitespaces and umlauts */
        var originalTitle = title;
        if(title.length > 35) {  // shorten if too long
            title = title.substring(0,35);
        }
        title = title.replace(/\u00c4/g, 'Ae');
        title = title.replace(/\u00d6/g, 'Oe');
        title = title.replace(/\u00dc/g, 'Ue');
        title = title.replace(/\u00e4/g, 'ae');
        title = title.replace(/\u00f6/g, 'oe');
        title = title.replace(/\u00fc/g, 'ue');
		title = title.replace(/\u00df/g, 'ss');
        title = title.replace(/[^A-Za-z0-9]/g, '-');
         /* insert an anchor tag with the name attribute */
         $(this).prepend('<a name="' + title + '"></a>');
         /* Build the line in the list, setting the li class as the tag name, and using the heading text */
         newLine =
            "<li class=" +
            tag +
            ">" +
            "<a href='#" + title + "'>" +
            originalTitle +
            "</a>" +
            "</li>";
         
         /* add the list item to the list */
         ToC += newLine;
      });
      /* Add closing tags to list */   
      ToC +=
         "</ul>";
         
      /* Insert list in topic, and make visible */
      $("#page-toc").append(ToC).css("display", "block");
	  
	  /* Insert list after h1 */
	  $("#page-toc").insertAfter("h1");       
   }
   
});

[NorthEast]

No problem, glad you found it useful.
I based it on a script from CSS tricks: https://css-tricks.com/automatic-table-of-contents

[jshostek]

Ok, so I was successful at implementing this suggestion and it's a great addition.

I "extended" it to include h1 as well.

I have made the navigation section "sticky" at the top of the page, but I'm having trouble showing the content when I select one of the nav links.
The body content is positioned under my "sticky" section and I can't seem to get the content to display.

Help greatly appreciated.

Jim P.

HELP!
I need to know how to make my top nav bar sticky to the top of the page? What is the code and where do I put it? HELP!

[Yehuda]

Thanks Dave & Corinna! This script was very useful.
I made one change that might help some people. Sometimes I have a line or two of text at the top of a topic, right before the first h2. In these cases I want the page TOC to appear after that text. So I changed the last 2 lines (not counting closing brackets) of Corinna's script to:

/* Insert list before first h2 */
$("#page-toc").insertBefore("h2:first-of-type");

[NorthEast]

Note that Flare 2017r3 now includes this feature with menu proxies.
If you add a menu proxy and select Headings, it will create a menu based on the heading levels in your topic.
Help: http://help.madcapsoftware.com/flare201 ... t=headings

[whunter]

Note that Flare 2017r3 now includes this feature with menu proxies.
If you add a menu proxy and select Headings, it will create a menu based on the heading levels in your topic.
Help: http://help.madcapsoftware.com/flare201 ... t=headings

I'm curious: when using this Headings option, can you specify a style to use as headings instead of the h* styles?
I don't have r3 yet so I can't explore it myself.

[Psider]

I had a quick test. If you set the mc-heading-level property for a style, it appears in the menu proxy at that level (I only tested using mc-heading-level: 1, which worked)

[jkpalmer]

So my expectations are in sync with what has been developed -

Referencing the feature to build TOC in a topic from the topic headings - All that is generated is a TOC. The TOC does not provide the user with anything like a bookmark capability, correct?

Jim P.

[whunter]

I had a quick test. If you set the mc-heading-level property for a style, it appears in the menu proxy at that level (I only tested using mc-heading-level: 1, which worked)

Thanks, I'll have to give it a try when I upgrade.

[Psider]

@jkpalmer I don't think I understand what you're asking. Can you provide more detail about what you want to do?