Multiple TOCs in a tripane HTML5 output

mddent01 · Post by **mddent01** » Wed Sep 13, 2017 7:26 am

Hi all,
Does anyone know if Flare can support two TOCs on the left-hand side of tripane HTML5 Help? The first one would act as a filter for the second TOC, and then selecting an entry in the lower TOC would change the content on the right-hand side.

Any thoughts on this would be wonderful.

Thank you
Michelle

Post by **NorthEast** » Thu Sep 14, 2017 12:01 am

No - you can have a second TOC by including a "browse sequence", but they can't be linked to work as a filter like you describe.

chrispitude · Post by **chrispitude** » Tue Sep 26, 2017 1:46 pm

Possibly related (and possibly not!),

In Oracle's help at

https://docs.us-phoenix-1.oraclecloud.c ... t/home.htm

once you enter a documentation section, they have a setup where topic files (but not headings inside them) are shown in a TOC on the left, and headings inside the current topic file (but not other topic files) are shown in a TOC on the right. I think of it as left=="inter" and right=="intra". How did they do this??

chrispitude · Post by **chrispitude** » Thu Sep 28, 2017 9:28 am

I figured it out. I spent some time learning Foundation 6 Grid here:

https://foundation.zurb.com/sites/docs/grid.html

Then, I mocked up a layout in codepen:

https://codepen.io/chrispitude/pen/NajBav

Then, grafted this into an existing MasterPage file, replaced the existing layout with my own, and replaced the placeholders with Flare's proxy elements:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="10" MadCap:lastHeight="222" MadCap:lastWidth="1016">
    <head>
    </head>
    <body onresize="rsz()">
        <div class="content">
            <div id="contentBody">
                <div class="row small-collapse medium-uncollapse">
                    <div class="column show-for-medium medium-2">
                        <MadCap:menuProxy style="mc-context-sensitive: True;" data-mc-skin="/Project/Skins/SideMenu.flskn" />
                    </div>
                    <div class="column small-12 medium-10">
                        <div class="row collapse">
                            <div class="column small-12 large-9">
                                <div class="row">
                                    <div class="column small-9">
                                        <MadCap:breadcrumbsProxy />
                                    </div>
                                    <div class="column small-3">
                                        <MadCap:topicToolbarProxy />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row collapse">
                            <div class="column small-12 large-9">
                                <MadCap:bodyProxy />
                            </div>
                            <div class="column large-3 show-for-large">
                                <MadCap:menuProxy mc-linked-toc="$topicHeadings" style="mc-context-sensitive: True;mc-include-parent: True;mc-include-siblings: True;mc-include-children: True; " data-mc-skin="/Project/Skins/SideMenu.flskn" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

I'm sure there are things I've done wrong, or could have done better. If you see anything, let me know!

MadCap Software Forums

Multiple TOCs in a tripane HTML5 output

Multiple TOCs in a tripane HTML5 output

Re: Multiple TOCs in a tripane HTML5 output

Re: Multiple TOCs in a tripane HTML5 output

Re: Multiple TOCs in a tripane HTML5 output