Automatically open topics with navigation skin

August 13, 2014 by Dave 11 Comments

If you open a topic file in HTML5 help directly, and not via the main help target file (e.g. default.htm), they’re displayed without the navigation skin.

For example, this will happen if a reader accesses your help from Google search results.

Flare has an option in the skin to get round this problem; on the Setup tab, you can choose to Show navigation link at top/bottom of topic. This will automatically display a navigation link in your topics if they’re opened stand-alone, so that the reader can reopen the topic inside the navigation skin.

Whilst that works ok, I thought about how to produce a solution that does this automatically, and came up with a script.

An example of a topic automatically loading itself in the navigation skin can be seen here:

www.ukauthor.esy.es/Reload/Content/Topic.htm

How to do this

1. Move to the skin Setup tab and enable Show navigation link at top of topic.
2. In your master page, add a link to a script Reload.js at the end of the body section.
3. Use this script in Reload.js.

$(document).ready(function () {
    if (($('.MCWebHelpFramesetLink:visible').length))
    {
        window.top.location = $('.MCWebHelpFramesetLink>a').attr('href');
    }
});

What does this code do?

In the output, the HTML code for the navigation link looks like this:

<p class="MCWebHelpFramesetLink MCWebHelpFramesetLinkTop" style="display: none;">
    <a href="../Default.htm#Topic.htm">Open topic with navigation</a>
</p>

• The if statement checks to see if the container for the navigation link (.MCWebHelpFramesetLink) is visible.

  If the navigation link is visible, then it means the topic has been opened stand-alone, so we will want to reload it inside the skin. If it isn’t visible, then the topic is already being displayed inside the navigation skin, so we don’t do anything.

• If the navigation link is visible, the window.top.location reloads the page.

  It uses the href path from the a navigation link inside the container (.MCWebHelpFramesetLink>a).

(Thanks to Eric Cressey for the blog post that inspired this.)