Vidar83 wrote:Any chance you could share that script, Dave?
<div id="page-toc">
<p class="boxHeading">On this page</p>
<!-- page table of contents generated here -->
</div>
<script type="text/javascript" src="../Scripts/page-toc.js"></script>
/* based on script from */
/* https://css-tricks.com/automatic-table-of-contents */
$(document).ready(function() {
/* check if h2 or h3 exists on page. Only count visible headings */
if ($("h2:visible,h3:visible").length > 0) {
/* build the opening tags of the structure */
var ToC =
"<nav role='navigation' class='table-of-contents'>" +
"<ul>";
/* set up variables used */
var newLine, el, title, link, tag;
/* set linkCount to zero */
var linkCount = 0;
/* find all h2 and h3 on page. Only count visible headings */
$("h2:visible,h3:visible").each(function() {
/* get the heading */
el = $(this);
/* get the heading title */
title = el.text();
/* get the heading tag, this is capitalised, i.e. 'H2' or 'H3' */
tag = el.prop("tagName");
/* updated linkCount, this will be id for link */
linkCount += 1;
link = "link" + linkCount;
/* insert an anchor tag with the name attribute */
$(this).prepend('<a name="' + link + '"></a>');
/* Build the line in the list, setting the li class as the tag name, and using the heading text */
newLine =
"<li class=" +
tag +
">" +
"<a href='#" + link + "'>" +
title +
"</a>" +
"</li>";
/* add the list item to the list */
ToC += newLine;
});
/* Add closing tags to list */
ToC +=
"</ul>" +
"</nav>";
/* Insert list in topic, and make visible */
$("#page-toc").append(ToC).css("display", "block");
}
});
#page-toc /* container for topic navigation control */
{
display: none;
}
jkpalmer wrote:Hi - I also have this requirement and this is a GREAT!! start, but my CSS skills are definitely lacking.
What I would like to be able to do is using the code provided (which I have implemented in a test Flare project) is change the way the page toc is generated.
Could use a little coaching to produce an "inline" (links across the top of the page) rather than a bullet list and also add some borders, background color, etc.
#page-toc li
{
display: inline;
}
cdschroeder wrote:Quick question - do you know to get the TOC to move with the page as it scrolls? Like so: https://developers.google.com/analytics ... ngOverview
jkpalmer wrote:I have made the navigation section "sticky" at the top of the page, but I'm having trouble showing the content when I select one of the nav links.
The body content is positioned under my "sticky" section and I can't seem to get the content to display.
doc_guy wrote:Dave,
I think the problem isn't actually at the top of the topic; its when you link to an anchor in the topic. Then the target appears at the top of the page, which in this case, is below the sticky header, if that makes sense.
jkpalmer wrote:doc_guy wrote:Dave,
I think the problem isn't actually at the top of the topic; its when you link to an anchor in the topic. Then the target appears at the top of the page, which in this case, is below the sticky header, if that makes sense.
I believe this is what I'm experiencing.
I have the "sticky" working properly, but the document anchor is placed at the top of the page under the "Sticky".
I would like to have the anchor positioned below the bottom of the "sticky", if possible.
Jim P
[id*="link"]:before {
content:"";
display:block;
height:100px;
margin:-100px 0 0;
}
/* based on script from */
/* https://css-tricks.com/automatic-table-of-contents */
/* script by Dave Lee found on https://forums.madcapsoftware.com/viewtopic.php?f=9&t=28643&p=125475&hilit=miniTOC#p125475 */
$(document).ready(function() {
/* check if h2 or h3 exists on page. Only count visible headings */
if ($("h2:visible,h3:visible").length > 2) {
/* build the opening tags of the structure */
var ToC = "<ul>";
/* set up variables used */
var newLine, el, title, link, tag;
/* find all h2 and h3 on page. Only count visible headings */
$("h2:visible,h3:visible").each(function() {
/* get the heading */
el = $(this);
/* get the heading title */
title = el.text();
/* get the heading tag, this is capitalised, i.e. 'H2' or 'H3' */
tag = el.prop("tagName");
/* for SEO friendly URLs, create IDs from heading text, replace whitespaces and umlauts */
var originalTitle = title;
if(title.length > 35) { // shorten if too long
title = title.substring(0,35);
}
title = title.replace(/\u00c4/g, 'Ae');
title = title.replace(/\u00d6/g, 'Oe');
title = title.replace(/\u00dc/g, 'Ue');
title = title.replace(/\u00e4/g, 'ae');
title = title.replace(/\u00f6/g, 'oe');
title = title.replace(/\u00fc/g, 'ue');
title = title.replace(/\u00df/g, 'ss');
title = title.replace(/[^A-Za-z0-9]/g, '-');
/* insert an anchor tag with the name attribute */
$(this).prepend('<a name="' + title + '"></a>');
/* Build the line in the list, setting the li class as the tag name, and using the heading text */
newLine =
"<li class=" +
tag +
">" +
"<a href='#" + title + "'>" +
originalTitle +
"</a>" +
"</li>";
/* add the list item to the list */
ToC += newLine;
});
/* Add closing tags to list */
ToC +=
"</ul>";
/* Insert list in topic, and make visible */
$("#page-toc").append(ToC).css("display", "block");
/* Insert list after h1 */
$("#page-toc").insertAfter("h1");
}
});
jkpalmer wrote:Ok, so I was successful at implementing this suggestion and it's a great addition.
I "extended" it to include h1 as well.
I have made the navigation section "sticky" at the top of the page, but I'm having trouble showing the content when I select one of the nav links.
The body content is positioned under my "sticky" section and I can't seem to get the content to display.
Help greatly appreciated.
Jim P.
Dave Lee wrote:Note that Flare 2017r3 now includes this feature with menu proxies.
If you add a menu proxy and select Headings, it will create a menu based on the heading levels in your topic.
Help: http://help.madcapsoftware.com/flare201 ... t=headings
Psider wrote:I had a quick test. If you set the mc-heading-level property for a style, it appears in the menu proxy at that level (I only tested using mc-heading-level: 1, which worked)