Using multiple Topic TOCs

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
Rene Severens
Sr. Propeller Head
Posts: 210
Joined: Mon Sep 19, 2011 2:06 am
Location: Netherlands - Zoetermeer
Contact:

Using multiple Topic TOCs

Post by Rene Severens »

Hi,

For HTML5 output:

This is a bit of a story and I realize that. I have been puzzling for several months now and cannot find a solution so that is why I decided to post this and maybe someone has a clue to help me out.

I want to use a specific TOC showing the selected option(s) a user clicked when a topic page is opened.
The options the user clicked are NOT the same as the topic titles so I cannot use the topics.
So I created:
- An EMPTY TOC (which I set to master) because I do not want a menu on the main page or other pages because the resulting website is inserted in another website and that one contains the menu. This TOC contains nothing but is needed, otherwise Flare will not build. This TOC is set to MASTER.
- A TOC1, reflecting path1 the user clicked to get to the current topic (this does not reflect breadcrums!)
- A TOC2, reflecting path2 the user clicked to get to the current topic.
- A TOC3, ... etc. you get the idea.
--> The "path" inside each TOCx is created by added non-linked topics and renaming the labels so these match the made selection(s) of the user.

Next I added a Menu TOC proxy to the topic. When editing this proxy, I can select the created TOC1, or TOC2, etc., but after building, neither TOC is shown. (in the added image (below) DIV2 is never shown).

I only use medium default, so I am sure not to use a wrong medium.

I tried several options, setting other TOCx to MASTER, added a book inside the EMPTY TOC and change the label to a whitespace so it would not show, but to no result.

How can I show a Menu TOC on each topic that contains different items for each topic?

I cannot use a mini-toc, because that only reflects the headers on the same topic-page, which is not what I want.

Additionally: I currently use a table inside a DIV floated to the right, each record showing the made selection(s). This only solves this challenge partially, because all following text underneath this table (also inside a DIV) now shows a big white area that cannot be used anymore to show content. I am looking for a solution that does not create these big white areas. I have moved the DIVs around and inside each other, but the expected result is not yet reached.

To give a visual impression:
topic layout.png
I want the Menu TOC shown in DIV 2 and I do NOT want to see the areas marked with black lines as a big white area; these areas should show the text inside DIV3 in case the made selection shown in DIV2 is longer than the text in DIV1. But most likely, they are now getting broken by the borders of the DIVs construction, and there seems to be no solution to solve this.

Any clues are highly appreciated!

Greetings,
Rene Severens
You do not have the required permissions to view the files attached to this post.
"The numbers are strange today; they somehow do not seem to add up."
devjoe
Sr. Propeller Head
Posts: 337
Joined: Thu Jan 23, 2014 1:43 pm

Re: Using multiple Topic TOCs

Post by devjoe »

I'm trying to understand just what you are doing.

You have some "options" which users can select which I interpret as being links in other topics which implement a hierarchical tree of options. And in DIV2 of each topic you are displaying faux-breadcrumbs for the path the user took to get there.

Some topics can be arrived at in multiple ways, and for these, you are having trouble conditionally displaying the different miniTOCs based on the path the user took, each of them based on a TOC you created specifically for each path to each of these multiply reachable topics.

I don't understand how you expected this to show different TOCs for different paths, but I am sure that a miniTOC is the wrong tool for this. Making a separate TOC for every path through the tree is just making a lot of busy work for yourself. Just display it as text or a list, or whatever you are doing in the topics that are only reachable in one way. To show different ones based on the way the user arrived, I would put all the content for each version inside a dropdown whose link is hidden, and also include in that dropdown a bookmark. Each link references the bookmark for its own TOC, which causes the dropdown containing that bookmark to be opened when the user enters the topic. There is an issue with this that linking to a bookmark also opens the topic scrolled down to that point in the topic, so you'd have to make your DIV2 start at the top of the page. Absolute positioning and z-index and some empty element with height specified to move the content down to where it is supposed to be can make it look right.

Alternatively, just put all the DIV1 and DIV3 content in snippets and make a separate version of each topic for each arrival path which includes the DIV2 content for that path and the appropriate snippets for the other sections. (Use snippets to keep the different versions of the topic in sync with one another.)
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Using multiple Topic TOCs

Post by NorthEast »

Rene Severens wrote:Next I added a Menu TOC proxy to the topic. When editing this proxy, I can select the created TOC1, or TOC2, etc., but after building, neither TOC is shown. (in the added image (below) DIV2 is never shown).
If you're testing this in the new 2017r2 release, then it probably isn't going to work. You'd need to use 2017 (r1) or earlier.
Menu proxies are broken in 2017r2 - it will ignore the TOC that you select for the menu proxy, and will always display the target's master TOC.

Your plan should work, if I understand it correctly.
You can insert multiple menu proxies, and have each linked to a separate TOC. Each menu proxy will show that topic's position in the TOC selected for that proxy.

As for the page layout, DIV2 needs to be positioned first (above DIV1 and DIV2) in the HTML, and should be set to float right.
DIV2 needs to have a set width (maybe use %, or px/em). DIV1 and DIV3 will flow to the left of DIV2, provided that they don't have a set width.
Rene Severens
Sr. Propeller Head
Posts: 210
Joined: Mon Sep 19, 2011 2:06 am
Location: Netherlands - Zoetermeer
Contact:

Re: Using multiple Topic TOCs

Post by Rene Severens »

Hi,

Thanks for your replies.

I was indeed testing in 2017 r2. I will retry with 2017 r1.

For as far as the mini-toc, it is not intended to show active hyperlinks to jump to a topic or a to jump to a bookmark on the same page. This mini-toc is composed of not-linked topic of which the label is edited to show the desired text. This gives the user the overview of what the user has done already and is going to do when executing the step in the current topic.
So it is not like a menu with clickable items. In this setup it has no use for a user to click an item because if so, that would result in opening a (previous) topic with instructions the user already has executed. That would break the flow and end up in an unusable application.
I known there are several other ways to still browse to a previous topic, but it must be clear to the user that not following the flow will always end up in an unusable application. That is why this design is used.

This feedback to the user is currently done by using a table inside a div. However, that ends up with the big white areas when this table becomes quite large. So I tried to use the mini-toc hoping this effect would not occur. And so I found out that it did not work as expected. And maybe my expectation is wrong so that is why I decided to enter this topic to the forum.

I will test with 2017 r1 and hopefully this issue will be fixed in near future in 2017 r2. I will try the options with the positioning of the div's and come back with results later.

Greetings,
Rene Severens
"The numbers are strange today; they somehow do not seem to add up."
Rene Severens
Sr. Propeller Head
Posts: 210
Joined: Mon Sep 19, 2011 2:06 am
Location: Netherlands - Zoetermeer
Contact:

Re: Using multiple Topic TOCs

Post by Rene Severens »

Hi,

Some test results and a clarification:

clarification: The inserted proxy is a menu proxy. In this proxy it is possible to select a TOC. So I created several small TOC's and can indeed select one of them in the menu proxy. However, this menu proxy is never shown in the topic (nor in design nor in output). Note that the small TOC's are not set as master TOC for the project. There is a master TOC, which is empty (contains no items) because otherwise it is not possible to build.

Testing: I tested this in Flare 11, Flare 12, Flare 2017, Flare 2017 r2. In all versions I have the same result.

As far as the positioning of the DIVs, when followed the given advice given by Dave (Thanks), the result is that the DIV that contains the steps the user followed is shown first, and all others are below this. It seems it is not possible to position the list of clicked steps to the right, and have all other text flow left and beneath is, using the full topic page width. Somehow the page is always split into to columns, and once that happens, the part underneath the DIV containing the selected steps can never contain any text anymore.

I will redesign the used pagelayout to something else to find a better solution.

Greetings,
Rene Severens
"The numbers are strange today; they somehow do not seem to add up."
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Using multiple Topic TOCs

Post by NorthEast »

If content is not flowing around a floated element, it's usually because it:
* has a set width, which doesn't fit
* has overflow: auto set
Rene Severens
Sr. Propeller Head
Posts: 210
Joined: Mon Sep 19, 2011 2:06 am
Location: Netherlands - Zoetermeer
Contact:

Re: Using multiple Topic TOCs

Post by Rene Severens »

Hi,

both are not set for all DIV's.

I think the effect I see is generated because inside the DIV I use only dropdowns. The dropdown is either small, so it is not seen as text floating around the other DIV, or in case it is wide, then it jumps underneath the DIV instead of filling up the available space first and then when the space underneath the DIV that is showing the selected steps (which is shown in the right top part of the topic page), fills up the complete page width.

So if you think in columns, it seems it is not possible to have the text float underneath available space of a next column, that is not using the full length of the page, at least when the text exists out of a list of dropdowns.
I do not want to start using CSS shapes to create a non-rectangular layout (see: https://sarasoueidan.com/blog/css-shapes/ ). I guess this is not yet supported in Flare and also it will most likely not yet work in all browsers.

Thanks for all information.

Greetings
Rene Severens
"The numbers are strange today; they somehow do not seem to add up."
Post Reply