Tag Archives: jQuery

Clear a Flare HTML5 Search Field with the Escape Key

If you want the search field in Flare HTML5 output to clear when escape is pressed, add the following to the toolbar JavaScript.

If there is already a window.onload assignment, just add the inner part to the existing assignment.

Resources:

 

Show and Hide with jQuery in HTML5 Output

MadCap Flare includes some show-and-hide controls for web-based outputs such as Togglers and Expanding Text. This blog has explored some alternatives for show-and-hide in the context of condition tags. Here is another option which uses jQuery to expand and collapse an element with a sliding animation.

Sliding show-and-hide actions are simple tasks with jQuery. Two such functions are slideUp() and slideDown(). Here is a function which uses both functions to show and hide an element given the element’s id attribute value.

You can add this script to many places in a Flare project. For simplicity in this example, here is an image of the script inserted into a topic and then edited.

insert-script

With the Attributes Window in Flare, you can set the value for an attribute of an element highlighted in the XML Editor. You can also edit the markup directly with the Text Editor. For this example the element to show and hide is given the value ‘show-hide’ for the id attribute.

id-attribute

The element to click is given the following value for the onclick attribute to call the JavaScript function. The value for id is passed to the function:

onclick-attribute

The final markup for the topic looks like this:

When the target is built and the output is opened, the click behavior looks like this:

expand-collapse

Other relevant concepts:

 

Hide Some Flare HTML5 Output Glossary Tab Entries

This example uses JavaScript, JSON, and jQuery.

In a response to a forum post, I suggested a rules-based approach to removing plural terms from the Glossary tab in Flare HTML5 output. The sample I provided tackled a few common English rules.

Rules-based Example to Remove Glossary Tab Entries with JavaScript

Rules are one way to approach the problem. Another way is to keep a list of items to remove or hide. What follows is another example which hides three terms on a Glossary tab when the function in the example fires. You can adjust the list of terms in the JSON object which holds the list of terms. You can also adjust when the function is called. In the example project, there is a toolbar button. But you can add an event listener to some other object to call the function if you do not want to be tied to the toolbar.

The sample project is configured as follows. There is a glossary with three glossary terms consisting of a plural term and a singular term: Child/Children, Apple/Apples, and Goose/Geese.

GlossaryEditor

There is a JSON object and a JavaScript function in the Toolbar Javascript.

ToolbarJavaScript

The skin has a custom toolbar button called HideEntries. When that button is clicked, hideEntries() from the Toolbar JavaScript is fired.

HTML5SkinEditorToolbar

HTML5SkinEditorStyles

The Glossary tab appears this way when initially viewed:

GlossaryTabBefore

After the HideEntries toolbar button (the blank one) is clicked, the three terms in the JSON object are removed from the list.

GlossaryTabAfter

A sample project is here: HideTerms.flprjzip