Aww man! Another weblog? Ugh, I hope the Internet gets full soon.

How to generate a dynamic, in-topic ToC as a side menu in Flare

May 24, 2017

Generating in-topic ToCs as a side menu, dynamically, based off of topic headings


A long time ago, in a tri-pane output far far away, I was working with unavoidably ginormous topics. I'm not the type of person to just say, "Oh well, sucks to be the user," and move on with my life. I looked around and found a jQuery plugin called Tocify. I plugged it into Flare, heavily modified the CSS, and soon I had dynamic, in-topic ToCs. You can see it in action above, or in my Codepen.

Here's the steps to get it working in your own Flare projects:

1. Right-click and download this CSS file and put it in the Content --> Resources --> Stylesheets folder.

2. Right-click and download this Tocify script and put it in a Content --> Resources --> Scripts folder.

3. Right-click and download this JavaScript script and put it in a Content --> Resources --> Scripts folder.

4. Right-click and download this jQuery-UI script and put it in a Content --> Resources --> Scripts folder.

5. In your master page (MasterPage.flmsp for tri-pane, OtherTopics.flmsp for TopNav), add <nav id="toc" class="bs-docs-sidebar"></nav> just after the open <body> tag (see image in step 6).

6. Just before the closing </body> tag, put a link to the jquery-ui-1.9.2.custom.min script, then a link to the jquery.tocify.min script, and then a link to my tocify-custom script. It must be in that order. 

7. Open your master CSS file (styles.css for tri-pane, MainStyles.css for TopNav) and link to the tocify-custom CSS file.


And you're done. Feel free to modify my CSS to design the in-topic ToC however you like, and update lines 2 and 6 in my tocify-custom.js file to catch whichever headings you like. For example, to accommodate TopNav, I updated the .tocify rule in tocify-custom.css with a left position of 100px. For tri-pane, I'd use 1024px like in the Codepen example.

You can download a basic, sample TopNav project with Tocify working and enabled, here. I used this project to generate the video at the top of this post.

If you have any trouble or issues, please don't hesitate to contact me or leave a comment below.

Mike Kelley
Download sample project!
Mike has a love for technology and a strong desire to help others. He is a Certified MadCap Advanced Developer for Flare and loves being able to share his knowledge and experience with others on the MadCap forums and LinkedIn groups. By combining his technical expertise with his writing skills, Mike can develop clever and elegant solutions for any documentation project.