TOC based on headers within topic

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets

TOC based on headers within topic

Postby Vidar83 on Tue Feb 21, 2017 5:11 am

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

Re: TOC based on headers within topic

Postby ChoccieMuffin on Tue Feb 21, 2017 9:51 am

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 2018.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
ChoccieMuffin
Propellus Maximus
 
Posts: 1857
Joined: Wed Apr 14, 2010 8:01 am

Re: TOC based on headers within topic

Postby Dave Lee on Wed Feb 22, 2017 1:00 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5400
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: TOC based on headers within topic

Postby Vidar83 on Wed Feb 22, 2017 1:45 am

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

Re: TOC based on headers within topic

Postby Dave Lee on Wed Feb 22, 2017 6:58 am

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.
For example, see the blue box in the top right of this topic: http://desktophelp.sage.co.uk/sage200/s ... erview.htm


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;
}
Dave Lee
Master Propellus Maximus
 
Posts: 5400
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: TOC based on headers within topic

Postby doc_guy on Wed Feb 22, 2017 10:18 am

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.
User avatar
doc_guy
Propellus Maximus
 
Posts: 1844
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West

Re: TOC based on headers within topic

Postby jkpalmer on Tue Mar 07, 2017 7:54 am

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

Re: TOC based on headers within topic

Postby cdschroeder on Tue Mar 07, 2017 12:08 pm

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 Schroeder

Image
cdschroeder
Sr. Propeller Head
 
Posts: 183
Joined: Mon Feb 22, 2016 9:18 am
Location: Cincinnati, OH

Re: TOC based on headers within topic

Postby Dave Lee on Wed Mar 08, 2017 12:49 am

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;
}
Dave Lee
Master Propellus Maximus
 
Posts: 5400
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: TOC based on headers within topic

Postby Dave Lee on Wed Mar 08, 2017 12:54 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5400
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: TOC based on headers within topic

Postby jkpalmer on Fri Mar 10, 2017 1:55 pm

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

Re: TOC based on headers within topic

Postby Dave Lee on Mon Mar 13, 2017 1:05 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5400
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: TOC based on headers within topic

Postby doc_guy on Sat Mar 18, 2017 12:36 am

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.
User avatar
doc_guy
Propellus Maximus
 
Posts: 1844
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West

Re: TOC based on headers within topic

Postby jkpalmer on Sat Mar 18, 2017 4:36 am

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

Re: TOC based on headers within topic

Postby Dave Lee on Mon Mar 20, 2017 1:32 am

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;
      }
Dave Lee
Master Propellus Maximus
 
Posts: 5400
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: TOC based on headers within topic

Postby Corinna on Thu Apr 13, 2017 5:13 am

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.
Corinna
Jr. Propeller Head
 
Posts: 9
Joined: Mon Mar 20, 2017 5:56 am

Re: TOC based on headers within topic

Postby Dave Lee on Tue Apr 18, 2017 12:06 am

No problem, glad you found it useful.
I based it on a script from CSS tricks: https://css-tricks.com/automatic-table-of-contents
Dave Lee
Master Propellus Maximus
 
Posts: 5400
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

TOC based on headers within topic

Postby jshostek on Sat Apr 29, 2017 9:17 pm

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

Re: TOC based on headers within topic

Postby Yehuda on Wed Apr 25, 2018 3:17 am

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

Re: TOC based on headers within topic

Postby Dave Lee on Wed Apr 25, 2018 4:09 am

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
Dave Lee
Master Propellus Maximus
 
Posts: 5400
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: TOC based on headers within topic

Postby whunter on Wed Apr 25, 2018 9:00 am

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

Re: TOC based on headers within topic

Postby Psider on Wed Apr 25, 2018 7:18 pm

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)
Psider
Sr. Propeller Head
 
Posts: 480
Joined: Wed Jul 06, 2011 1:32 am

Re: TOC based on headers within topic

Postby jkpalmer on Thu Apr 26, 2018 9:06 am

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

Re: TOC based on headers within topic

Postby whunter on Thu Apr 26, 2018 11:11 am

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

Re: TOC based on headers within topic

Postby Psider on Thu Apr 26, 2018 5:27 pm

@jkpalmer I don't think I understand what you're asking. Can you provide more detail about what you want to do?
Psider
Sr. Propeller Head
 
Posts: 480
Joined: Wed Jul 06, 2011 1:32 am


Return to Web-based Outputs

Who is online

Users browsing this forum: No registered users and 4 guests

cron