Tip : Expanding a dropdown automatically, by class

[RoyTruelove]

Thought some people might find this useful. It's a script that will open a dropdown by the class of the dropdown. I have certain dropdowns that I want opened when the user opens the page, but I don't want *all* of the dropdowns open. To differentiate, we assign all of the auto-expanded dropdowns with the class "MCDropDown_HowTos". Then for each page we call this script, passing in that class name.

Code: Select all

function toggleDropDownByClass(className) {

	// Find the correct div element
	var dropdownDiv = "undefined";
	var divs = document.getElementsByTagName("div");
	
	// for each 'div'...
	for (i=0; i < divs.length && dropdownDiv == "undefined"; i++)
	{
		// see if the div is of class 'className'
		var classNode = divs[i].className;
		if (classNode != "undefined" && classNode == className) {
			dropdownDiv = divs[i];
		}
	}

   if (dropdownDiv == "undefined") {
           return;
   }

	// get the 'A' element inside the dropdown head
	var headAElement = "undefined";

	// ASSUMPTION that the first 'div' under the dropdown 'div' is the dropdown head,
	// and that there is only one 'a' under the dropdown head div.
	var headDiv = 	dropdownDiv.getElementsByTagName('div')[0];
	headAElement = 	headDiv.getElementsByTagName("a")[0];

	// ASSUMPTION that this method name won't change and will be in scope
	FMCDropDown(headAElement);
} 

NOTE - I have not tested this in Flare 5.0.

[Craig.Prichard]

Would you mind posting the HTML for setting the class and calling the function? Thank you.

[DurtyMat]

if i had to guess, the html would look like this:

calling the function:

Code: Select all

<script src="../<folder with script>/<name of javascript file you created with his supplied code>.js"></script>

* keep in mind, you need to keep relative pathing in mind, so if the script doesnt work right away, mess with the "../" before the folder with the script.

applying a class to a drop down:

after adding a drop down, just right click the drop down and select a class, which in this example would be "MCDropDown_HowTos", so the code within a topic would look something like this:

Code: Select all

<MadCap:dropDown class="MCDropDown_HowTos"; >
            <MadCap:dropDownHead>
                <MadCap:dropDownHotspot>ordering chapter comes next</MadCap:dropDownHotspot>
            </MadCap:dropDownHead>
            <MadCap:dropDownBody>
                <p>-retrieve</p>
            </MadCap:dropDownBody>
        </MadCap:dropDown>

obviously you would need to add the MCDropDown_HowTos class to the MadCap | dropDown property in your CSS. If this doesn't work let me know ... or Roy can provide the actual code

[NorthEast]

applying a class to a drop down:

after adding a drop down, just right click the drop down and select a class, which in this example would be "MCDropDown_HowTos", so the code within a topic would look something like this:

obviously you would need to add the MCDropDown_HowTos class to the MadCap | dropDown property in your CSS. If this doesn't work let me know ... or Roy can provide the actual code :D

No, that's not quite right - it's wrong in original post too.

The class that you create in your stylesheet and apply in your topics does not include the 'MCDropDown_' part; that's a prefix for the div class that Flare uses in the generated output.

For example, you would create a class MadCap|dropDown.HowTos in your stylesheet, and apply this HowTos class to your drop-downs.

Then when you generate your help, the HTML code in the output would use a div tag with a class MCDropDown_HowTos.

Therefore, the code looks like this in the source topic:

Code: Select all

<MadCap:dropDown class="HowTos">

And in the output it looks like this:

Code: Select all

<div class="MCDropDown_HowTos">

So when you use the script above, you need to use the output class name used by the div; i.e. you would use MCDropDown_HowTos, but the class you create and apply in the topic would be named HowTos.

(If you followed the above and created a class MCDropDown_HowTos, in the output it would be MCDropDown_MCDropDown_HowTos.)