Dave Lee – A flair for Flare

My blog about MadCap Flare and web design


Add a ‘close’ link to togglers and dropdowns (HTML5)

I’ve written a script that will add a ‘close’ link to the bottom of dropdowns and togglers.

This will work with HTML5 targets in Flare.


To use this in your own Flare project, first copy and paste the following code into a text file, and save it with a *.js extension; e.g. dd_toggler_links.js.

	/* Add close button to dropdowns */
	$(".dropDownBody").append("<a href='javascript:void(0);' class='dropDownClose'>Close</a>");
	$(".dropDownClose").click(function() {
	/* Add close button to togglers */
	$("[data-mc-target-name]").each(function() {
		/* for each toggler target, find the target name (togglerTarget) */
		var togglerTarget = $(this).attr("data-mc-target-name");
		/* for each toggler target, add a close link (a.togglerClose) */
		var closeTarget = $("<a href='javascript:void(0);' class='togglerClose'>Close</a>");
		/* Create a selector for the toggler link (closeToggler), which is linked to this target. Look for open togglers, which include the togglerTarget name */
		var closeToggler = 'a.toggler[data-mc-state="open"][data-mc-targets*="' + togglerTarget + '"]';
		/* When the closeTarget link is clicked, clik the toggler link (closeToggler) */

Add the javascript file to your project, and add a script link to this file from your master page; e.g. in the head section you would include something like:

<script src="../Scripts/dd_toggler_links.js"></script>

The last part is to style the links, which use the class names a.closeDropDown and a.closeToggler. Add the following CSS to your stylesheet, and include any other properties, such as a colour or background icon.

    display: block;


Leave a comment

Display CSH link for current topic

I’ve written a script that will display a CSH link for the current topic, for HTML5 help outputs.

If you use CSH (aliases) in your Flare project, then it’s useful to be able to share links to your help that include the CSH ID, rather than the path and topic filename (as that might change).

For example, you’d want to share a link like:

Rather than:

The script checks to see if the current topic is included in your alias file. If the topic is in the alias file, then it displays a short CSH link to that topic – for you to copy and use as you wish.

Try it out

To try this out yourself, first create a master page that contains this HTML:

<p id="page-link">Page link: <a href="#">CSH link will go here</a>
  <script type="text/javascript" src="lookup.js"></script>

Then create a file called lookup.js (in the same place as your master page), and copy and paste the following code.

      /* hide link, unless we find a match */
      $("#page-link").css("display", "none");
      /* find help path */
      var helpPath = $("html").data("mc-path-to-help-system");   
      /* find help filename */   
      var helpFile = $("html").data("mc-help-system-file-name");
      /* substitute xml extension with htm */   
      var helpFile = helpFile.replace(".xml", ".htm");
      /* complete help URL */
      var helpURL = helpPath + helpFile;
      /* alias file URL */
      var aliasURL = helpPath + "Data/Alias.xml";

         type: "GET",
         url: aliasURL,
         dataType: "xml",
         success: function(xml) {

            /* get current topic filename, then decode it to remove characters like %20 */
            var currentFilename = location.pathname.substring(location.pathname.lastIndexOf('/') + 1);
            var currentFilename = decodeURIComponent(currentFilename);
            /* find every Map in the alias file */
               /* get current Link (topic path) and Name (CSH ID) from Alias file */
               var currentLink = $(this).attr("Link");
               var currentName = $(this).attr("Name");
               /* check if current filename is contained in curent link */
               if ( currentLink.indexOf(currentFilename) != -1 )
                  /* build CSH link */
                  var CSHlink = helpURL + "#cshid=" + currentName;
                  /* set href of link */
                  $("#page-link>a").attr("href", CSHlink);
                  /* set text in link to absolute path */
                  /* display link */
                  $("#page-link").css("display", "block");

And that’s it.

If the current topic is in the alias file, its CSH link will be displayed in the topic.


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:


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

Leave a comment

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

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.

1 Comment

Search plugin for MadCap forums

The search on the MadCap forums isn’t very good, so I created a forum search plugin for FireFox.

You can download the plugins here:


  1. Right-click the link and save the XML file to your PC.
  2. Put the XML file in the Firefox installation searchplugins folder, usually either:
    • Program Files (x86)\Mozilla Firefox\searchplugins
    • Program Files (x86)\Mozilla Firefox\browser\searchplugins
  3. Restart Firefox.

Using a search

  • In the search box (top right), click the icon on the left of the search box to display a menu, then select the search to use.