Setting Drop-down Text to Open Expanded

This forum is for all Flare issues related to styles, stylesheets and XML.

Hi Gary...

Postby MikeKatz on Tue Jan 13, 2009 6:24 am

I'm no expert, but the script does define dDowns, as you can see by glancing back to Scott's code. I would try to copy and paste the code again from the earlier topic in case you missed one or more lines somewhere. You could also cut and paste your script into a reply here, and we can check it.
Mike
MikeKatz
Sr. Propeller Head
 
Posts: 133
Joined: Tue Mar 07, 2006 5:54 pm

Re: Setting Drop-down Text to Open Expanded

Postby Gary Niemen on Tue Jan 13, 2009 8:23 am

'Show all' line is:

<p>&#160;</p><a href="javascript:void(0)" onClick="showDropDowns()">Show all</a>

Script is:

function showDropDowns() {
///*<![CDATA[*/var dDowns=document.getElementsByTagName('div');
for (i=0;i<dDowns.length;i++) {
if (dDowns[i].id.indexOf('MCDropDownBody') != -1) dDowns[i].style.display = "block";
} } ///*]]>*/</script>

Both of these inside <body>...</body>
Gary Niemen
Sr. Propeller Head
 
Posts: 222
Joined: Fri Sep 12, 2008 1:57 am

Re: Setting Drop-down Text to Open Expanded

Postby MikeKatz on Tue Jan 13, 2009 8:31 am

Gary Niemen wrote:'Show all' line is:

<p>&#160;</p><a href="javascript:void(0)" onClick="showDropDowns()">Show all</a>

Script is:

function showDropDowns() {
///*<![CDATA[*/var dDowns=document.getElementsByTagName('div');
for (i=0;i<dDowns.length;i++) {
if (dDowns[i].id.indexOf('MCDropDownBody') != -1) dDowns[i].style.display = "block";
} } ///*]]>*/</script>

Both of these inside <body>...</body>


It's not the same as Scott's script:
//<![CDATA[
var dDowns=document.getElementsByTagName('div');
You have "*/" before "var", and maybe also you need to have it on a new line. So, it loks like the var statement is not being recognised.
Mike
MikeKatz
Sr. Propeller Head
 
Posts: 133
Joined: Tue Mar 07, 2006 5:54 pm

Re: Setting Drop-down Text to Open Expanded

Postby scott on Tue Jan 13, 2009 11:19 am

Hi Gary (and thanks, Mike!),

The variable definition:
var dDowns=document.getElementsByTagName('div');

needs to be on its own line:
///*<![CDATA[*/
var dDowns=document.getElementsByTagName('div');

That should fix it.
Scott DeLoach
Certified Flare trainer/consultant - http://www.clickstart.net
* MadCap Flare: The Definitive Guide
* CSS to the Point
* HTML5 to the Point
https://bit.ly/2LQN11O

scott@clickstart.net
Certified MAD for Flare
scott
Propeller Head
 
Posts: 75
Joined: Tue Jan 03, 2006 6:35 pm
Location: miami

Re: Setting Drop-down Text to Open Expanded

Postby Gary Niemen on Wed Jan 14, 2009 1:22 am

Yes, that worked - thanks.
Gary Niemen
Sr. Propeller Head
 
Posts: 222
Joined: Fri Sep 12, 2008 1:57 am

Re: Setting Drop-down Text to Open Expanded

Postby Ruwin on Tue Jun 19, 2012 7:26 am

Hi, i am looking for a similar thing: i would like all my dropdowns to have a close button at the end of the dropdown content. I understand that i can manually place a link with javascript and tell the script to click link number X, but is there a way to make this a default button, that can be applied on every dropdown?
Another useful thing would be having two buttons in the toolbar: one for opening all dropdowns and one for closing all dropdowns. Because if i have an opened dropdown and three closed ones, when i click the current toggle button, it first opens all the dropdowns and only at a second click it closes them.

Thanks!
Ruwin
Propeller Head
 
Posts: 12
Joined: Wed Dec 14, 2011 4:18 am

Re: Setting Drop-down Text to Open Expanded

Postby echopraxia on Wed Aug 29, 2012 11:47 am

I just tried using this for Flare 8.1.1 and none of the Drop-down text was expanded. I was really hoping this would work for the current version :(


Edit: I failed to mention that I'm using an HTML5 output *not* a WebHelp output. Dave Lee was kind enough to provide a solution for me on another thread.
Dave Lee wrote:
If you're using HTML5 help only, use this script to open all dropdowns:

Code: Select all
<script>
  $(window).load(function() {
    $(".MCDropDownHotSpot").click();     
  });
</script>


And this one will open all togglers:

Code: Select all
<script>
  $(window).load(function() {
    $(".MCToggler").click();     
  });
</script>


These will work in the output, but not in preview mode.

Both scripts are written in jQuery, which is used by HTML5 help.
The scripts select all tags with a particular class name in the output (e.g. HTML5 output uses span.MCDropDownHotSpot and span.MCToggler), and then click these tags.
Last edited by echopraxia on Fri Sep 21, 2012 12:00 pm, edited 1 time in total.
echopraxia
Propeller Head
 
Posts: 13
Joined: Wed Aug 29, 2012 11:38 am

Re: Setting Drop-down Text to Open Expanded

Postby i-tietz on Thu Aug 30, 2012 8:16 am

Ruwin wrote:I understand that i can manually place a link with javascript and tell the script to click link number X, but is there a way to make this a default button, that can be applied on every dropdown?

You could have a javascript in your masterpage that is triggered onload of the topic and inserts a link just before the closing of the dropdownbody div.

A dropdown in the help looks like this:
Code: Select all
<div class="MCDropDown_0">
     <div class="MCDropDownHead_0"><a class="MCDropDownHotSpot_0" href="javascript:void(0);" id="MCDropDownHotSpot_4000055646_1" onclick="FMCDropDown( this ); return false;"><img style="border: none;margin-right: 5px;" src="../../../SkinSupport/DropdowClosed.png" MadCap:altsrc="../../../SkinSupport/DropdownOpen.png" onload="if ( typeof( FMCPreloadImage ) == 'function' ) { FMCPreloadImage( '../../../SkinSupport/DropdownOpen.png' ); }" class="MCDropDownIcon" />DROPDOWNHOTSPOT TEXT HERE</a>
     </div>
     <div class="MCDropDownBody_0" id="MCDropDownBody_4000055646_1" style="display: none;">
                   <p>DROPDOWNBODY CONTENT HERE</p>
     </div>
</div>


That javascript would have to
1. find all dropdown divs in the topic (LOOP, find it by class)
2. go into each one of those divs and retrieve the id of the dropdownhotspot
3. find the dropdownbody div
4. find the corresponding closing tag (</div>).
This step could turn out complicated if you have nested dropdowns or use divs inside dropdowns
5. insert the link right before the closing tag
The link would have to trigger a javascript that contains: Get the object with the id (step 2) and perform a "click" on it.


Ruwin wrote:Another useful thing would be having two buttons in the toolbar: one for opening all dropdowns and one for closing all dropdowns. Because if i have an opened dropdown and three closed ones, when i click the current toggle button, it first opens all the dropdowns and only at a second click it closes them.

As you can see above, the click on the hotspot triggers the javascript function FMCDropDown( this ). What you need are buttons that trigger a javascript with a parameter (custom toolbar buttons).
This is a script which should work for the IE only (the "document.all" is causing it) - you gotta change it to make it fit all browsers:
Code: Select all
 <script type="text/javascript">
<!--
function AllDDs(move)
{
   if (document.all)
   {
      var maximum = document.all.tags("div").length;
      var counter = 0;
      for (var counter =0;counter <maximum;counter ++)
      {
         if (document.all.tags("div")[counter].className == "MCDropDown_0")
         {
            if (document.all.tags("div")[counter].style.setAttribute)
            {
               if (move == "open")
               { document.all.tags("div")[counter].style.setAttribute("display", "block"); }
               if (move == "close")
               { document.all.tags("div")[counter].style.setAttribute("display", "none"); }
            }
         }
      }
   }
}
// -->
</script>
Inge____________________________
"I need input! - Have you got input?"
i-tietz
Propellus Maximus
 
Posts: 1219
Joined: Wed Oct 24, 2007 4:13 am
Location: Fürth, Germany

Re: Setting Drop-down Text to Open Expanded

Postby bdietz on Thu Nov 29, 2012 7:09 am

This is a pretty old thread. I was wondering if anyone knows if the ability to have drop-down text open expanded has been added to stylesheets somewhere in Flare?

Thank you
bdietz
Propeller Head
 
Posts: 16
Joined: Wed Oct 19, 2011 6:08 am

Re: Setting Drop-down Text to Open Expanded

Postby Dave Lee on Thu Nov 29, 2012 9:13 am

bdietz wrote:This is a pretty old thread. I was wondering if anyone knows if the ability to have drop-down text open expanded has been added to stylesheets somewhere in Flare?

Thank you


No, nothing has changed since August, and there's nothing built-in to Flare.

If it's something you'd like to see, put in a feature request to MadCap.
Dave Lee
Master Propellus Maximus
 
Posts: 5846
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Setting Drop-down Text to Open Expanded

Postby hljanas on Mon Dec 16, 2013 1:05 pm

Is the script that was written in the original topic usable in Flare 9? If not, where can I find an updated version? I am using WebHelp output.

Thanks!
Heather
hljanas
Propeller Head
 
Posts: 29
Joined: Mon Aug 27, 2012 8:38 am

Re: Setting Drop-down Text to Open Expanded

Postby MattyQ on Mon Mar 09, 2015 6:27 am

Hey, all,

This is not a perfect solution, but in the course of our documentation, we wanted to have a "Before You Begin" dropdown that opened automatically when the page was loaded. I created kind of a clunky script that was able to open a single instance of a specifically-named dropdown. This won't solve everybody's issue, but feel free to use the script if you have a similar issue. I apply this by adding the script to the bottom of our master page, but you could add it in individual topics. Code follows:

Code: Select all

// This section modifies the 'contains' selector to be case-insensitive. Don't change this.
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});


// This section creates a loop that will apply a class to each dropdown hotspot that contains certain text. You can replace 'before you begin' with whatever is in your hotspot. Make sure to use single quotes, as I have below. You can change the name of the class in the "addClass" step, too, but you would need to change it throughout the rest of the script, too. Unless you have an existing BeforeYouBegin class in your stylesheet, I'd just leave it.
var beYoBe = $( ".MCDropDownHotSpot:contains('before you begin')" );
beYoBe.each(function() {
   $( this ).addClass( "BeforeYouBegin" );
});

// This creates a function which will click on the first instance of the Before You Begin dropdown. Only modify this if you changed the data in the addClass part above.
openBYB = function() {
   var tog = document.getElementsByClassName("BeforeYouBegin")[0];
   tog.click();
};

// Creates empty variable toggleBYB.
var toggleBYB;

// This creates another function called delayedToggle, which clicks on the element after a quarter of a second.
function delayedToggle() {
   toggleBYB = window.setTimeout(openBYB, 250);
}

// Runs (calls) the delayedToggle function.
delayedToggle();


I'm not super Javascript savvy, but if you have issues with this script, you can let me know and I'll try to resolve them. This implementation utilizes a combination of jquery and javascript, which should both be automatically included by Flare 10 (I haven't tested this on earlier versions). I also use a newer version of JQuery than MadCap does, so there may be some loss of functionality there. Again, feel free to let me know.

EDIT: You can remove the comment lines from the script (prefixed by //)
MattyQ
Sr. Propeller Head
 
Posts: 136
Joined: Tue Sep 30, 2014 7:10 am
Location: Roanoke, VA

Re: Setting Drop-down Text to Open Expanded

Postby shannong on Fri Oct 30, 2015 8:48 am

MattyQ wrote:Hey, all,

This is not a perfect solution, but in the course of our documentation, we wanted to have a "Before You Begin" dropdown that opened automatically when the page was loaded. I created kind of a clunky script that was able to open a single instance of a specifically-named dropdown. This won't solve everybody's issue, but feel free to use the script if you have a similar issue. I apply this by adding the script to the bottom of our master page, but you could add it in individual topics. Code follows:

Code: Select all
(Matt's original code from the post just above this one)


I'm not super Javascript savvy, but if you have issues with this script, you can let me know and I'll try to resolve them. This implementation utilizes a combination of jquery and javascript, which should both be automatically included by Flare 10 (I haven't tested this on earlier versions). I also use a newer version of JQuery than MadCap does, so there may be some loss of functionality there. Again, feel free to let me know.

EDIT: You can remove the comment lines from the script (prefixed by //)


I just tested this approach in our Flare 11.1.0 project (HTML5 TopNav) and it works perfectly, but with ONE HUGE CAVEAT!

Our use case was enable our expression of minimalist, EPPO, and progressive disclosure principles for task topics by auto-expanding only dropdowns named "Procedure", while keeping any descendant dropdowns inside "Procedure" collapsed. (We hide all detail for top-level steps inside 2nd-level dropdowns, which makes it easy to skim the main flow of a procedure and drill into complex detail for a specific step only when desired.)

I implemented this approach as follows (and found an interesting Flare bug in the process, which I'll explain how to work around further down in this post):

  1. I created a new folder named "Scripts" inside of //Content/Resources.
  2. I created a text file (with vanilla Windows Notepad) named DropdownHandler.txt in that new folder, and pasted in your code.
  3. I replaced the one string specifying the content to act on from 'before you begin' to 'procedure' (and did not remove any comments--I even added a few comments of my own).
  4. In Windows Explorer, I renamed the file as DropdownHandler.js.
  5. I opened the master page used for all our HTML5 TopNav targets, placed my cursor at the end of the body (just beneath the topic body proxy), and used Insert > Script to link to the DropdownHandler.js script.

You cannot see the effect of this script when using the in-Flare preview feature. Instead, you must build a target to see the script in action.

The beauty of your approach is that you need only one script in one place, and it's implemented through the master page. By placing the script at the bottom of the master page's body, you see a big obvious script icon in your master page to remind you (years later) to check it if some future upgrade breaks the script. (This script would be effectively invisible if you placed it in the "cleaner" HEAD element.)


NOW FOR THE BUG/CAVEAT...

It turns out that in Flare 11.1.0 (and probably earlier versions too), you MUST NOT attempt to open the DropdownHandler.js file inside of Flare itself! If you do so, Flare changes the encoding or charset in some way that effectively BREAKS the script. It will look fine in Flare's text editor. No script/syntax warnings will be reported. In built targets, you can examine the source code and the .js file itself through your browser, and everything looks just fine. But the script will NOT work.

The only way to fix this problem if it occurs (someone unintentionally opens the .js file inside of Flare and the script suddenly "breaks") is to work outside of Flare itself to perform the following steps:

  1. Using Windows Explorer, rename the now-broken file.
  2. Use vanilla Windows Notepad to create a new .txt file with the original name.
  3. Copy-paste the content from the broken, renamed file into the new .txt file and save it.
  4. Use Windows Explorer to rename the new file with a .js extension.

Note that you can safely open and edit a GOOD version of this .js file in NotePad++ (as long as you don't mess with the original encoding set by Windows Notepad).

Also note that if the file becomes "broken" due to someone opening it in Flare, no amount of attempting to use Notepad++ to convert the encoding back to vanilla UTF-8 will work. Only creating it completely from scratch in vanilla Notepad (or possibly through Notepad++; I haven't tried this path) will fix the script when Flare breaks it.

I don't know why Flare has this bizarre bug, but there ya go. Caveat Scriptor.

Here's a screenshot of what our implementation makes a Task topic look like when first opened:

Image
shannong
Propeller Head
 
Posts: 17
Joined: Thu Sep 11, 2014 9:24 am

Re: Setting Drop-down Text to Open Expanded

Postby MattyQ on Tue Dec 15, 2015 12:05 pm

Hi, all,

Somewhere along in this thread, someone was looking for code that expanded all dropdowns in a topic. I was recently doing some code refactoring and wanted to pass this on. If you want to make all dropdowns in a topic start expanded, just use the following code:

Code: Select all
function clickDrop() { $( "a.dropDownHotspot" ).trigger( "click" ); }
var clickTimer = window.setTimeout(clickDrop, 250);


If you want to change how long the pause is before the dropdowns are opened, change the 250 in the second line. This number is in milliseconds (the current code opens dropdowns after a quarter of a second).
MattyQ
Sr. Propeller Head
 
Posts: 136
Joined: Tue Sep 30, 2014 7:10 am
Location: Roanoke, VA

Re: Setting Drop-down Text to Open Expanded

Postby kerimucci on Mon Sep 28, 2020 4:34 am

Hello.
I am trying to make my dropdowns open expanded, and I tried the method using Matt's script, but sadly this isn't working for me. All of my dropdowns start with "How to ...", so I changed the script to look for this in the hotspot.
These are old posts, so I am wondering if there is an easier way to get this working?
kerimucci
Propeller Head
 
Posts: 35
Joined: Thu Nov 02, 2017 3:38 am

Re: Setting Drop-down Text to Open Expanded

Postby Psider on Mon Sep 28, 2020 5:33 pm

If you run the script without any changes it should work. No need to change anything in it.
Psider
Propellus Maximus
 
Posts: 650
Joined: Wed Jul 06, 2011 1:32 am

Previous

Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: Google [Bot] and 8 guests