Automatically open topics with navigation skin

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.)

Customising the Flare HTML5 Tripane skin

I’ve produced a full example project of how to customise the Flare HTML5 ‘Tripane’ skin.

Note: This post was originally written for the HTML5 skin in v10, which is now called the ‘Tripane’ skin in v11 onwards.

An example project with documentation can be downloaded here:
Example “Skin Mods” project (on my Google Drive)

This might be of use to anyone that needs to make modifications to the HTML5 skin which can’t be achieved using Flares’ skin editor.

The documentation shows how to:

• Add content to the header area of the skin.
• Add your own stylesheet to the skin, to style your own content, or change styles unavailable in the editor.
• Move elements of the skin, such as the search box.

All details are in the linked project above, it should answer most questions.

Displaying the Flare TOC as a menu

I’ve produced a full example project of how to integrate a menu control into Flare, which uses the Flare TOC file.

An example project with documentation is here (topics in Introduction section):
http://ukauthor.esy.es/SmartMenusHTML5/Content/Main-Intro.htm

This might be of use to anyone that’s designing a skin-less HTML5 output, and needs a navigation system that can be integrated into topics.

The documentation shows how to:

• Use XSLT to convert a Flare TOC file to a HTML menu.
• Configure the project for the SmartMenus plugin.
• Integrate the menu into topics, either by using a snippet or by dynamically loading the content.

All details are on the linked site above, it should answer most questions.