Page 1 of 1
Related information and related reference on the Topic TOC of webhelp responsive output
Posted: Thu Mar 09, 2023 10:27 pm
by Sitrakar
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
Re: Related information and related reference on the Topic TOC of webhelp responsive output
Posted: Fri Mar 10, 2023 3:42 pm
by chrispitude
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?
Re: Related information and related reference on the Topic TOC of webhelp responsive output
Posted: Fri Mar 10, 2023 5:30 pm
by Sitrakar
I would like it to be included in addition to the right-side TOC.
Best regards,
Sitraka
Re: Related information and related reference on the Topic TOC of webhelp responsive output
Posted: Sat Mar 11, 2023 5:43 pm
by chrispitude
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.
Re: Related information and related reference on the Topic TOC of webhelp responsive output
Posted: Mon Mar 13, 2023 2:02 pm
by InspectorSpacetime
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
Re: Related information and related reference on the Topic TOC of webhelp responsive output
Posted: Mon Mar 13, 2023 6:01 pm
by Sitrakar
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
Re: Related information and related reference on the Topic TOC of webhelp responsive output
Posted: Mon Apr 24, 2023 1:33 pm
by pieterjan_vdw
Thank you InspectorSpacetime!
This does the trick for me too.
Kind regards,
Pieterjan