TOC based on headers within topic

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Vidar83
Jr. Propeller Head
Posts: 5
Joined: Fri Jan 13, 2017 3:09 am
Location: Frankfurt, Germany

TOC based on headers within topic

Post by 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
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: TOC based on headers within topic

Post by 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.
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: TOC based on headers within topic

Post by 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
Jr. Propeller Head
Posts: 5
Joined: Fri Jan 13, 2017 3:09 am
Location: Frankfurt, Germany

Re: TOC based on headers within topic

Post by 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
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: TOC based on headers within topic

Post by NorthEast »

Vidar83 wrote: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
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: TOC based on headers within topic

Post by 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.
Paul Pehrson
My Blog

Image
jkpalmer
Propeller Head
Posts: 71
Joined: Tue Jul 14, 2015 9:53 am
Location: Chicago Area

Re: TOC based on headers within topic

Post by 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
Sr. Propeller Head
Posts: 189
Joined: Mon Feb 22, 2016 9:18 am
Location: Cincinnati, OH

Re: TOC based on headers within topic

Post by 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...
Casey

Image
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: TOC based on headers within topic

Post by NorthEast »

jkpalmer wrote: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
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: TOC based on headers within topic

Post by NorthEast »

cdschroeder wrote: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
Propeller Head
Posts: 71
Joined: Tue Jul 14, 2015 9:53 am
Location: Chicago Area

Re: TOC based on headers within topic

Post by 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
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: TOC based on headers within topic

Post by NorthEast »

jkpalmer wrote: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
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: TOC based on headers within topic

Post by 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.
Paul Pehrson
My Blog

Image
jkpalmer
Propeller Head
Posts: 71
Joined: Tue Jul 14, 2015 9:53 am
Location: Chicago Area

Re: TOC based on headers within topic

Post by jkpalmer »

doc_guy wrote: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
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: TOC based on headers within topic

Post by NorthEast »

jkpalmer wrote:
doc_guy wrote: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
Propeller Head
Posts: 17
Joined: Mon Mar 20, 2017 5:56 am

Re: TOC based on headers within topic

Post by 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");       
   }
   
});
You do not have the required permissions to view the files attached to this post.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: TOC based on headers within topic

Post by 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
Jr. Propeller Head
Posts: 2
Joined: Tue Apr 25, 2017 9:26 am

TOC based on headers within topic

Post by jshostek »

jkpalmer wrote: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
Jr. Propeller Head
Posts: 2
Joined: Mon Feb 16, 2015 3:31 am

Re: TOC based on headers within topic

Post by 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
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: TOC based on headers within topic

Post by 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
Sr. Propeller Head
Posts: 429
Joined: Thu Mar 12, 2009 4:49 pm
Location: Portland, OR

Re: TOC based on headers within topic

Post by whunter »

Dave Lee wrote: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
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: TOC based on headers within topic

Post by 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
Propeller Head
Posts: 71
Joined: Tue Jul 14, 2015 9:53 am
Location: Chicago Area

Re: TOC based on headers within topic

Post by 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
Sr. Propeller Head
Posts: 429
Joined: Thu Mar 12, 2009 4:49 pm
Location: Portland, OR

Re: TOC based on headers within topic

Post by whunter »

Psider wrote: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
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: TOC based on headers within topic

Post by Psider »

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