Setting Drop-down Text to Open Expanded

milewski · Post by **milewski** » Wed Dec 24, 2008 6:34 am

Hello,

I was wondering if there was a way to make Drop-down Text begin expanded rather than collapsed. I know there was a similar discussion for the Toggler feature: Setting a Toggler to Open Expanded (http://forums.madcapsoftware.com/viewto ... f=6&t=7652)

Thanks for any help,
Scott

MikeKatz · Post by **MikeKatz** » Wed Dec 24, 2008 8:28 am

I'm interested in this also. I don't know anything about CSS or scripts, and I tried to play with the script in the Toggler topic, but I didn't succeed.

In addition, instead of opening automatically, I'd like the user to be able to click on a label that says Open/Close All. Is such a thing possible?

Post by **scott** » Wed Dec 24, 2008 12:40 pm

Hi!
I've written a JavaScript for you that will open all of the drop-downs when the page loads.

First, change your body tag to call the script:

Code: Select all

<body onLoad="openDropDowns()">

Then, add the script to your topics:

Code: Select all

<script>
function openDropDowns() {
//<![CDATA[
for (i=0;i<document.links.length;i++) {
if (document.links[i].id.indexOf('MCDropDownHotSpot') != -1) document.links[i].click();
} } //]]>
</script>

Here is a sample topic:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="4" MadCap:lastHeight="228" MadCap:lastWidth="525">
    <head>
    </head>
    <body onLoad="openDropDowns()">
        <h1>Expand drop-downs</h1>
        <MadCap:dropDown>
            <MadCap:dropDownHead>
                <MadCap:dropDownHotspot>Click here</MadCap:dropDownHotspot>
            </MadCap:dropDownHead>
            <MadCap:dropDownBody>
                <p>This content will expand....</p>
            </MadCap:dropDownBody>
        </MadCap:dropDown>
        <MadCap:dropDown>
            <MadCap:dropDownHead>
                <MadCap:dropDownHotspot>Another click here</MadCap:dropDownHotspot>
            </MadCap:dropDownHead>
            <MadCap:dropDownBody>
                <p>More content will expand....</p>
            </MadCap:dropDownBody>
        </MadCap:dropDown>

            <script>
function openDropDowns() {
//<![CDATA[
for (i=0;i<document.links.length;i++) {
if (document.links[i].id.indexOf('MCDropDownHotSpot') != -1) document.links[i].click();
} } //]]>
</script>

</body>
</html>

You could modify this script to open all of the drop-downs when the user clicks a button or link.

For a similar script that will auto-open togglers, see http://forums.madcapsoftware.com/viewto ... f=6&t=7876

Happy holidays!

MikeKatz · Post by **MikeKatz** » Wed Dec 24, 2008 12:51 pm

scott wrote:Hi!

You could modify this script to open all of the drop-downs when the user clicks a button or link.

Happy holidays!

Hi Scott
First, happy holidays to you too!
Second, thanks for the script.
Finally, can you point me in the right direction about how to go about creating a link or button that would execute the script?

Post by **scott** » Wed Dec 24, 2008 1:31 pm

No problem. I made a new script you can use to open all drop-downs from a link.

You won't need to use the onLoad event to call the script from the body tag, so you can leave it as <body>.

Set up your link to open the script:

Code: Select all

<a href="javascript:void(0)" onClick="showDropDowns()">Show all</a>

Then, add this script to your topic:

Code: Select all

<script>
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>

Hope this helps.

MikeKatz · Post by **MikeKatz** » Wed Dec 24, 2008 1:50 pm

Hi Scott
Thanks VERY much!

MikeKatz · Post by **MikeKatz** » Wed Dec 24, 2008 2:32 pm

Hi Scott
Another question if I may. Where do I find a list of the attributes / methods / properties that belong to each style? I can see that there's a lot of potential for using these, and I'd like to know more.
For example, I would assume that -1 is true, so 0 would be false in the script you made. But, what's the opposite of "block"?
Is there MadCap documentation that lists all of these?

Post by **scott** » Wed Dec 24, 2008 3:29 pm

Hi Mike,
This script finds all of the div tags and checks each one to see if its ID includes "MCDropDownBody" (Flare places your drop-down content in a div that is named "MCDropDownBody" plus a unique number). If "indexOf" is -1, the div's ID does not contain "MCDropDownBody."

"Block" means to show the div as a block of content--that's the normal way a div, p, h1, etc would appear. A span would be set to inline, since it appears inside a block of content. A list item (like a bullet), would be set to list-item. To hide something, you can set it to "none."

You can see all of the values for the display property in Flare's CSS editor. Open the CSS Editor to the Advanced View, select a tag, and select the display property on the right. Flare provides very short descriptions for CSS properties when you select them.

For more information about JavaScript, check out:
http://developer.mozilla.org/en/A_re-in ... JavaScript
http://www.w3schools.com/JS/js_intro.asp

For more information about CSS, check out:
http://www.css-ref.com
http://web.tampabay.rr.com/bmerkey/cheatsheet.htm

You can do some cool stuff with JS and CSS -- have fun exploring!

MikeKatz · Post by **MikeKatz** » Wed Dec 24, 2008 3:38 pm

scott wrote:Hi Mike,
This script finds all of the div tags and checks each one to see if its ID includes "MCDropDownBody" (Flare places your drop-down content in a div that is named "MCDropDownBody" plus a unique number). If "indexOf" is -1, the div's ID does not contain "MCDropDownBody."

"Block" means to show the div as a block of content--that's the normal way a div, p, h1, etc would appear. A span would be set to inline, since it appears inside a block of content. A list item (like a bullet), would be set to list-item. To hide something, you can set it to "none."

You can see all of the values for the display property in Flare's CSS editor. Open the CSS Editor to the Advanced View, select a tag, and select the display property on the right. Flare provides very short descriptions for CSS properties when you select them.

For more information about JavaScript, check out:
http://developer.mozilla.org/en/A_re-in ... JavaScript
http://www.w3schools.com/JS/js_intro.asp

For more information about CSS, check out:
http://www.css-ref.com
http://web.tampabay.rr.com/bmerkey/cheatsheet.htm

You can do some cool stuff with JS and CSS -- have fun exploring!

Once again, thanks very much!

milewski · Post by **milewski** » Mon Dec 29, 2008 12:09 pm

scott wrote: I've written a JavaScript for you that will open all of the drop-downs when the page loads.

Thank you for the script.

I attempted to do some modifying of the script to make it open a particular instance of a drop-down. Preferably by name, but I cannot seem to figure out how to do it. Do you have any suggestions?

Thank you,
Scott

Post by **scott** » Tue Dec 30, 2008 1:13 pm

Hi,
You can open a drop-down using its ID or its position in the topic. Since Flare assigns the IDs when you preview a topic or build a target, I don't think you should use the ID. Using the link's position in the topic isn't perfect--you will have to change the code if you add links or even if you remove links using condition tags. However, it will work.

The following code will open the second drop-down link in a topic:

Code: Select all

<a href="javascript:document.links[1].click()">Click here</a>

The links are numbered starting with 0, so [1] is the second link.

document.links is an array of all of the links in a topic. This code just clicks the link, and it will work with any type of link. For example, it would open a popup link.

have a great new years!

MikeKatz · Post by **MikeKatz** » Tue Dec 30, 2008 1:24 pm

Hi Scott
The script you gave me works, and I can also close all the links via another script. However, it doesn't set the drop-down graphic to the correct open / closed state. Is there a way to accomplish this?

Post by **scott** » Tue Dec 30, 2008 2:01 pm

Do you mean the drop-down's icon (the default arrow that points right or down), or are you creating your own link icon that you want to change? In my test topic, the drop-down's arrow changes when you click the link. It should change for you, too. The code "clicks" the link just like a user might click it. It should act the same way.

MikeKatz · Post by **MikeKatz** » Tue Dec 30, 2008 3:34 pm

scott wrote:Do you mean the drop-down's icon (the default arrow that points right or down), or are you creating your own link icon that you want to change? In my test topic, the drop-down's arrow changes when you click the link. It should change for you, too. The code "clicks" the link just like a user might click it. It should act the same way.

Hi Scott
If I open one of the drop-downs manually, and then click the Hide All link, the arrow still points down although the topic closes:

FlareDropDown.jpg

Here's the scripts I am using:

Code: Select all

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

EDIT: I just checked, and the arrows do not change even when I don't adjust them manually. So, the text opens and closes, but the arrows remain unchanged - they always point to the right, never down, unless I click manually.

Post by **scott** » Tue Dec 30, 2008 4:58 pm

Hi Mike,
No problem. This short script (from the post above--no changes) will open a specific drop-down and change its icon:

Code: Select all

<a href="javascript:document.links[1].click()">Click here</a>

This slightly revised script will open all drop-downs -and- change their icons:

Code: Select all

function showDropDowns() {
//<![CDATA[
var dDownLinks=document.getElementsByTagName('a');
for (i=0;i<dDownLinks.length;i++) {
if (dDownLinks[i].id.indexOf('MCDropDownHotSpot') != -1) dDownLinks[i].click();
} } //]]>
</script>

In case you're curious, the original script found the drop-down content divs and set their 'display' CSS property to "block." The revised script finds the drop-down links and clicks them. Flare's code then changes the display property and the icon, just like when the user clicks on them.

MikeKatz · Post by **MikeKatz** » Tue Dec 30, 2008 5:41 pm

scott wrote:Hi Mike,
No problem. This short script (from the post above--no changes) will open a specific drop-down and change its icon:
Code: Select all
<a href="javascript:document.links[1].click()">Click here</a>
This slightly revised script will open all drop-downs -and- change their icons:
Code: Select all
function showDropDowns() {
//<![CDATA[
var dDownLinks=document.getElementsByTagName('a');
for (i=0;i<dDownLinks.length;i++) {
if (dDownLinks[i].id.indexOf('MCDropDownHotSpot') != -1) dDownLinks[i].click();
} } //]]>
</script>
Hi Scott
Thanks for trying, but this doesn't work either. The click will toggle the state, albeit with setting the icon correctly.
So, if I go into a topic, and open one of the links manually, and then run the script, the open one will close, and the closed ones will open.
Is there a property one can examine to see whether the link is open / close, and then do the click conditionally? That way I can have the two hyperlinks to open all and close all.
The other option is to set the image for open and close to be the same, and just use one image, thereby eliminating the issue.

In case you're curious, the original script found the drop-down content divs and set their 'display' CSS property to "block." The revised script finds the drop-down links and clicks them. Flare's code then changes the display property and the icon, just like when the user clicks on them.

Post by **scott** » Tue Dec 30, 2008 7:48 pm

Hi Mike,
That script will work fine if you call it when you open your topic--it assumes all of the links are closed.

Calling the script from a link and checking to see if the drop-down is open or closed is harder, but I think it can be done. Let me take a look.

MikeKatz · Post by **MikeKatz** » Wed Dec 31, 2008 6:27 am

scott wrote:Hi Mike,
That script will work fine if you call it when you open your topic--it assumes all of the links are closed.

Calling the script from a link and checking to see if the drop-down is open or closed is harder, but I think it can be done. Let me take a look.

Hi Scott
Thanks for all your help, you have been amazing.
I've changed the style sheet to always use the same button whether the drop-down is open or closed, and I'm quite happy with that. So, unless your interest is piqued, don't do anything further for my sake alone.
One thing that interests me though, is what "taking a look" means. Is there some place where there is a global list of properties for these styles, or are there tools to determine what the properties are? This all is very new to me. I used to be a programmer a long time ago, so this interests me, but I find it strange that between standard CSS, HTML, and MadCap styles, there's no complete list somewhere of what you can do. It's kind of like being a programmer without having access to all the commands in the language.

Post by **scott** » Thu Jan 01, 2009 12:17 pm

Hi Mike,
In this case, "take a look" involved looking at Flare's JavaScript code to see if we can reuse it. Here's what I did:

* Previewed a topic with a drop-down, right-clicked, and selected View Source.

* Looked through the XHTML to see how drop-downs are coded.
I found that drop-down links are assigned IDs with a prefix of "MCDropDownHotSpot" and a long unique number. Drop-down content blocks are assigned IDs with a prefix of "MCDropDownBody" and a matching number to the link. These IDs are assigned when you preview or build a target, so you can't see them in your source code.

* Looked through the XHTML to see how drop-down links work.
The drop-down links run a JavaScript function named FMCDropDown when clicked. That script shows/hides the link's matching drop-down content block and changes the link icon. We could write a script that does that, but we might as well use MadCap's script.

* Wrote a Javascript function that does the following:
- Finds all divs.
- Checks each div's ID to see if it contains "MCDropDownBody" (which means it's a drop-down content block).
- If the div contains "MCDropDownBody" and the div is not displayed (display = none), find its matching link (using the number part of the ID) and click the link to run MadCap's "FMCDropDown" script.

To make it even more useful, I also set it up to show/hide the drop-downs and change the link's text to "Show all" or "Hide all."

This solution was mostly JavaScript. It also required a small amount of CSS (checking the display property). The only Flare-specific knowledge was how Flare assigns the drop-down link and content block IDs. I found that info just by looking at the generated XHTML.

If you want to add other cool features to your projects (like this script), you will probably want to learn JavaScript. If you want to customize your content's appearance, you'll want to learn about CSS. Flare will let you do whatever you want with JavaScript or CSS. The CSS websites I mentioned above are a great resource for researching CSS properties. You can also check out my book ("CSS to the Point") if you're more interested in answering specific CSS questions than learning CSS. [That's not a sales pitch, just sharing info.

] For JavaScript, I started by reading "Designing with JavaScript." The "Missing Manual" and "Visual QuickStart" guides are also good. You don't have to know anything about JavaScript to use Flare, of course. I know it because I'm a JS programmer, not because I need it to use Flare.

There are some MadCap-specific style properties that you might want to investigate, too. They always have an "mc" prefix. These properties won't be mentioned in CSS websites or the CSS specification. All of the CSS properties have short descriptions in Flare's CSS Editor. The MadCap-specific CSS properties are also described in more detail in the "MadCap Advanced CSS Training Guide" that is used in the Advanced CSS class.

have a great 09,
.scott

Post by **scott** » Thu Jan 01, 2009 12:32 pm

The following script will show/hide all drop-downs in a topic and change the link's text to "Show all" or "Hide all." You can customize it to use different link text or even link images (such as buttons).

Feel free to use it in your projects!

Link code:

Code: Select all

<a href="javascript:void(0)" onClick="showDropDowns(this)">Show all</a>

Script:

Code: Select all

<script>
var showHideState = "show";
function showDropDowns(linkId) {
// written by Scott DeLoach - www.clickstart.net
//<![CDATA[
var dDowns=document.getElementsByTagName('div');
for (i=0;i<dDowns.length;i++) {
  if (dDowns[i].id.indexOf('MCDropDownBody') != -1) {
    if ((showHideState == "show") && (dDowns[i].style.display == "none")) {
      dDownLinkName = "MCDropDownHotSpot" + dDowns[i].id.substring((dDowns[i].id.indexOf("MCDropDownBody")+14));
      document.all(dDownLinkName).click();
    } 
    if ((showHideState == "hide") && (dDowns[i].style.display != "none")) {
      dDownLinkName = "MCDropDownHotSpot" + dDowns[i].id.substring((dDowns[i].id.indexOf("MCDropDownBody")+14));
      document.all(dDownLinkName).click();
    }
} } 
if (showHideState == "hide") { 
  showHideState = "show"; 
  linkId.innerHTML = "Show all";
} 
else { 
  showHideState = "hide"; 
  linkId.innerHTML = "Hide all";
} 
//]]> }
</script>

Have a great new year!

MikeKatz · Post by **MikeKatz** » Thu Jan 01, 2009 12:42 pm

Thanks for all the info, and for the new script!
I already have your book on moving from RoboHelp to Flare, and I ordered the other two as well. They both look very worthwhile.
I'll also get one of the Javascript ones so that I can become more knowledgeable on the basics.
Once again, thanks very much for your help. I'm sure there are many others who will learn a lot from this thread.
I hope you have a fantastic 2009, mine is certainly off to a great start!

MikeKatz · Post by **MikeKatz** » Fri Jan 02, 2009 12:06 pm

The third last line of the script need another "}".

Post by **scott** » Fri Jan 02, 2009 12:29 pm

Hi Mike,
The script has 7 matching { and }s, so it should be OK. Here's what I think you are seeing:

XHTML likes for scripts to be enclosed by //<![CDATA[ and //]]> comments. For example:

function myScript() {
//<![CDATA[
code would be here
//]]>
}

Flare likes to rewrite and rearrange that code to:

function myScript() {
///*<![CDATA[*/
code would be here
}
///*]]>*/

The script I posted has the last } after the //]]> (the closing comment), but Flare moves it above the comment.

MikeKatz · Post by **MikeKatz** » Fri Jan 02, 2009 12:39 pm

scott wrote:Hi Mike,
The script has 7 matching { and }s, so it should be OK. Here's what I think you are seeing:

XHTML likes for scripts to be enclosed by //<![CDATA[ and //]]> comments. For example:

function myScript() {
//<![CDATA[
code would be here
//]]>
}

Flare likes to rewrite and rearrange that code to:

function myScript() {
///*<![CDATA[*/
code would be here
}
///*]]>*/

The script I posted has the last } after the //]]> (the closing comment), but Flare moves it above the comment.

Hi Scott
I cut and paste the script into the topic via notepad, but I had the topic open in Flare, so probably if it does that type of translation something went wrong. As I saved the topic, I got an error in Flare about the missing bracket. My bad I guess.
In any event, the script works really well, There's only one link required, and the graphic changes as well, so thanks very much once again!

Gary Niemen · Post by **Gary Niemen** » Tue Jan 13, 2009 2:31 am

I am trying to implement the 'Show all' variety and I get an error.
See screenshot below. Any ideas what is happening?

showallscript.png

MadCap Software Forums

Setting Drop-down Text to Open Expanded

Setting Drop-down Text to Open Expanded

Re: Setting Drop-down Text to Open Expanded

Re: Setting Drop-down Text to Open Expanded

Re: Setting Drop-down Text to Open Expanded

Re: Setting Drop-down Text to Open Expanded

Re: Setting Drop-down Text to Open Expanded

Another Question if I May...

Re: Setting Drop-down Text to Open Expanded

Re: Setting Drop-down Text to Open Expanded

Re: Setting Drop-down Text to Open Expanded

Re: Setting Drop-down Text to Open Expanded

Scott, another question...

Re: Setting Drop-down Text to Open Expanded

Re: Setting Drop-down Text to Open Expanded

Re: Setting Drop-down Text to Open Expanded

Re: Setting Drop-down Text to Open Expanded

Re: Setting Drop-down Text to Open Expanded

Re: Setting Drop-down Text to Open Expanded

Re: Setting Drop-down Text to Open Expanded

Re: Setting Drop-down Text to Open Expanded

Hi Scott...

If anyone else wants to use the script...

Re: Setting Drop-down Text to Open Expanded

Re: Setting Drop-down Text to Open Expanded

Re: Setting Drop-down Text to Open Expanded