Dave Lee – A flair for Flare

My blog about MadCap Flare and web design

Automatically open topics with navigation skin

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

Advertisements

11 thoughts on “Automatically open topics with navigation skin

  1. Hmm, never thought about getting back into the skin…good script and yet another thing that really should be included in the product itself.

  2. This is exactly what I need, only I can’t get it to reload. I’ve added the JS to the Custom JavaScript to include in Toolbar, and tried an external file in several directories. I looked at your sample and noticed the MasterPage link was “Resources/Scripts/Reload.js” which (for me) resulted in an error for every topic (because there was no Resources/Scripts in the MasterPages directory).

    I’m not sure what I’m doing wrong, but would love to get this to work. I’m using Flare 10, Windows 7, WebHelp output, and FireFox.

    • I’ve added the JS to the Custom JavaScript to include in Toolbar

      The script doesn’t go in the skin toolbar custom javascript – I said:
      “In your master page, add a link to a script Reload.js at the end of the body section.”

      I looked at your sample and noticed the MasterPage link was “Resources/Scripts/Reload.js” which (for me) resulted in an error for every topic (because there was no Resources/Scripts in the MasterPages directory).

      The script link isn’t “Resources/Scripts/Reload.js”, it is “../Resources/Scripts/Reload.js” – which will give you the correct path for the script file at Content/Resources/Scripts/Reload.js.

  3. Thanks for the reply. The only way I can get the script to work is to comment out the If statement. So, I’m focusing on that now.

  4. I ended up using Eric’s If statement “if (window.top.location.href.toLowerCase().indexOf(“content/”) != -1)”. It’s not as dynamic, but I couldn’t find any other way to make the script work.

    • Just noticed in your first post you say you’re using webhelp output, but this is for HTML5 output. The script uses jQuery which in included in HTML5 but not webhelp.

  5. I’m curious whether there’s a way in Flare to define the HTML5 output in such a way that the navigation opens the topic files directly, and not via the main help target file (e.g. default.htm)? I ask because we are using an API to validate that whoever is looking at a topic is authorized to do so (based on a credential set we pass from another system via this API) and THAT script does not like the pre-processed JavaScript and AJAX built into the navigation. We wouldn’t have this issue if we opened the topic files directly. Thanks!

    • Well, you could just open topics directly, but then you wouldn’t have any skin or navigation. In HTML5 output, the default.htm page is the ‘skin’ and contains the navigation control, header, toolbar; plus an iframe that displays the current topic file.

      So perhaps rather than run your script from the topic, run it from the skin instead. On the skin ‘Toolbar’ tab, there’s an area on the right where you can insert a script; whatever you insert here will be run with default.htm when it opens.

  6. I believe this may no longer be an issue in the Flare 11 “Top Nav” skin. It does not include the “Show Navigation link at the top of topic option” in the skin file. When I generated the output in a test project that does not include the script, I was never able to display a standalone topic without wrapper and navigation.

  7. sorry, but what is the ‘master page’ in html?
    in Flare, this is only for print, so not sure where the code to call the js would go?

    • Cayenne, the master page in Flare is for HTML, the page layout is for print. The master page for html contains the framework for the HTML output, such as headers, footers, and proxies (including the body proxy that contains the content of your topics).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s