Related information and related reference on the Topic TOC of webhelp responsive output

Sitrakar · Post by **Sitrakar** » Thu Mar 09, 2023 10:27 pm

Hello,
I would like to know if the related information and related reference links can be put on the topic TOC (right place of the page, where usually on this page is) of the webhelp responsive output instead of the bottom of the page.
Best regards,
Sitraka

Post by **chrispitude** » Fri Mar 10, 2023 3:42 pm

Hi Sitraka,

Are you asking for the related links to replace the right-side TOC, or be included in addition to the right-side TOC?

Sitrakar · Post by **Sitrakar** » Fri Mar 10, 2023 5:30 pm

I would like it to be included in addition to the right-side TOC.
Best regards,
Sitraka

Post by **chrispitude** » Sat Mar 11, 2023 5:43 pm

Hi Sitraka,

The idea of placing related links on the right side is interesting.

One challenge I could see is nested topics. We have topics like this, all in a single topic file:

Code: Select all

<topic>
  <title>Useful Features<title>
  <body>...</body>
  <related-links>  <!-- related links for top-level topic -->
    <link>...</link>
    <link>...</link>
  </related-links>

  <topic>
    <title>Feature A<title>
    <body>...</body>
    <related-links>  <!-- related links for subtopic 1 -->
      <link>...</link>
      <link>...</link>
    </related-links>
  </topic>

  <topic>
    <title>Feature B<title>
    <body>...</body>
    <related-links>  <!-- related links for subtopic 2 -->
      <link>...</link>
      <link>...</link>
    </related-links>
  </topic>

</topic>

so transformation processing would need to figure out how to deal with this.

Another concern might be confusion on what links are locally ("on this page") versus elsewhere, but maybe that could be addressed by placing them in separate visual containing elements.

Post by **InspectorSpacetime** » Mon Mar 13, 2023 2:02 pm

Basically you could use JavaScript to move the Related Information section to the right side TOC. This script seems to do the trick (see the attached image for results):

Code: Select all

if (window.innerWidth > 991) {
	document.getElementsByClassName('wh_topic_toc')[0].appendChild(document.getElementsByClassName('wh_related_links')[0])
}

However, the right side TOC disappears when the screen size get small enough (breakpoint 991px), and therefore you would lose the Related Information section as well. The JS code above only activates when the screen size is larger than that, so for smaller screens the Related Information can still be found at bottom of the page.

Note that the JS above does not yet work when resizing the window. I couldn't get the event listener for that working.

However, the issue is that the right side TOC is only created in the first place when there's content for the "On This Page" section, meaning nested topics or sections with titles. Therefore this trick does not work if that's not the case! Maybe there could be a parameter that forces the creation of the right side TOC area even if it would be empty, so you could still insert custom content in there.

But I agree, especially for longer topics the Related Information could very well be placed in the right TOC.

: relinfo.png (42.9 KiB) Viewed 1194 times

Sitrakar · Post by **Sitrakar** » Mon Mar 13, 2023 6:01 pm

Thanks InspectorSpacetime,
I will try it. I was thinking the same with the right toc : The related information will only appear if the On this page section exist on the page.
I will check how to make it mandatory on the page.
best regards,
Sitraka

Post by **pieterjan_vdw** » Mon Apr 24, 2023 1:33 pm

Thank you InspectorSpacetime!
This does the trick for me too.

Kind regards,
Pieterjan

Related information and related reference on the Topic TOC of webhelp responsive output

Related information and related reference on the Topic TOC of webhelp responsive output

Re: Related information and related reference on the Topic TOC of webhelp responsive output

Re: Related information and related reference on the Topic TOC of webhelp responsive output

Re: Related information and related reference on the Topic TOC of webhelp responsive output

Re: Related information and related reference on the Topic TOC of webhelp responsive output

Re: Related information and related reference on the Topic TOC of webhelp responsive output

Re: Related information and related reference on the Topic TOC of webhelp responsive output