Dave Lee – A flair for Flare

My blog about MadCap Flare and web design

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

4 Comments

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.

dropdown-toggler

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.

$(document).ready(function(){
	/* Add close button to dropdowns */
	$(".dropDownBody").append("<a href='javascript:void(0);' class='dropDownClose'>Close</a>");
	$(".dropDownClose").click(function() {
		$(this).parent().prev(".dropDownHead").children(".dropDownHotspot").click();
	});
		
	/* 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>");
		$(this).append(closeTarget);
		/* 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) */
		$(closeTarget).click(function(){
			$(closeToggler).click();
		});
	});
});

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.

a.dropDownClose,
a.togglerClose
{
    display: block;
}

 

Advertisements

4 thoughts on “Add a ‘close’ link to togglers and dropdowns (HTML5)

  1. Great idea. Can really improve usability in some cases.

  2. I need a script to make sure the Server-based Output option is not selected in the target when I publish. MadCap said I can put a script into the Comments field of the Target to accomplish this. Do you know how I can build this type of script?

    • Hi, I don’t quite understand the question, or what MadCap meant by their answer. I know you can tell Flare targets to run scripts or batch files on the ‘Build Events’ tab, perhaps they meant that.

      Try putting this question on the MadCap forums with a bit more detail.

      Thanks.

  3. Very nice, Dave. Just implemented this. Thanks.

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