Add a close link to dropdowns and togglers (HTML5)

This forum is for all Flare related Tips and Tricks.
Have a tip or trick you use while working in Flare? Share it here.

Add a close link to dropdowns and togglers (HTML5)

Postby Dave Lee on Tue Sep 27, 2016 10:25 am

I've written a script that automatically adds a 'close' link to dropdowns and togglers in HTML5 targets.

DropDown Toggler.png


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.

Code: Select all
$(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:

Code: Select all
<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.

Code: Select all
a.dropDownClose,
a.togglerClose
{
    display: block;
}


Bog post: ukauthor.wordpress.com/2016/09/27/add-a-close-link-to-togglers-and-dropdowns-html5/
You do not have the required permissions to view the files attached to this post.
Dave Lee
Master Propellus Maximus
 
Posts: 5658
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Add a close link to dropdowns and togglers (HTML5)

Postby ChoccieMuffin on Wed Sep 28, 2016 2:36 am

Dave Lee wrote:I've written a script that automatically adds a 'close' link to dropdowns and togglers in HTML5 targets.


Do you know if this also works for HTMLHelp targets? It looks really cool but I don't want to go messing about with my projects if it doesn't work.

Cheers. :)
Started as a newbie with Flare 6.1, now using Flare 2019r1.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
ChoccieMuffin
Senior Propellus Maximus
 
Posts: 2149
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Add a close link to dropdowns and togglers (HTML5)

Postby Dave Lee on Wed Sep 28, 2016 3:23 am

ChoccieMuffin wrote:Do you know if this also works for HTMLHelp targets? It looks really cool but I don't want to go messing about with my projects if it doesn't work.

Cheers. :)


Sorry, it's only for HTML5 targets, as HTML Help and WebHelp targets use different code for dropdowns and togglers.

Always mess around with a test project - never add dodgy code from the internet to real projects!
Dave Lee
Master Propellus Maximus
 
Posts: 5658
Joined: Mon Mar 05, 2007 8:33 am
Location: UK


Return to Tips and Tricks

Who is online

Users browsing this forum: No registered users and 2 guests