display all toggles when page loads ...

DurtyMat · Post by **DurtyMat** » Fri Dec 19, 2008 7:57 am

i was curious if you could set a page with say, 15 toggles (don't ask, just experimenting), to display all the of the toggles when the page is loaded and then allow the user to select which toggles to remove (not display) from the page.

i was thinking there must be some kind of page.load or on.pageload (dont laugh at my weak js-skils

) that would allow me to accomplish my goal. any help would be awesome.

Post by **LTinker68** » Fri Dec 19, 2008 9:09 am

There's not a way to do so currently, although more control over the togglers has been requested. Make sure you add your request for it here --> http://www.madcapsoftware.com/bugs/submit.aspx.

In the meantime, see this post for a workaround --> http://forums.madcapsoftware.com/viewto ... =12&t=6829. It's more involved and doesn't use togglers per se, but if you really want the effect you're describing, then it's a way to go.

Post by **scott** » Mon Dec 22, 2008 9:42 am

Hi Matt,
I've written a JavaScript for you that will open all of the togglers when the page loads.

First, change your body tag to call the script:

Code: Select all

<body onLoad="openTogglers()">

Then, add the script to your topics:

Code: Select all

<script>
function openTogglers() {
//<![CDATA[
for (i=0;i<document.links.length;i++) {
if (document.links[i].className == 'MCToggler') 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="2" MadCap:lastHeight="305" MadCap:lastWidth="781">
    <head>
    </head>
    <body onLoad="openTogglers()">
        <h1>togglers</h1>
        <p>
            <MadCap:toggler targets="t1">Toggler1</MadCap:toggler>
        </p>
        <p MadCap:targetName="t1">The quick brown fox jumps over the lazy dog.</p>
        <p>
            <MadCap:toggler targets="t2">Toggler2</MadCap:toggler>
        </p>
        <p MadCap:targetName="t2">The quick brown fox jumps over the lazy dog.</p>
        <p>
            <MadCap:toggler targets="t3">Toggler3</MadCap:toggler>
        </p>
        <p MadCap:targetName="t3">The quick brown fox jumps over the lazy dog.</p>
<script>
function openTogglers() {
//<![CDATA[
for (i=0;i<document.links.length;i++) {
if (document.links[i].className == 'MCToggler') document.links[i].click();
} } //]]>
</script>
</body>
</html>

Happy holidays!

DurtyMat · Post by **DurtyMat** » Mon Dec 22, 2008 10:09 am

Scott, this thing is awesome. After lunch I am going to implement it into the project and give it a test run. Thanks!

Happy Holidays

DurtyMat · Post by **DurtyMat** » Mon Dec 22, 2008 10:48 am

instead of adding the toggle js to every topic, coudlnt you create a .js file and point the body tag that calls the js to the directory it is saved in?

keep in mind, very limited JS knowledge

Post by **scott** » Mon Dec 22, 2008 12:29 pm

No problem:

1) Open a text file (Notepad's fine).
2) Paste:

Code: Select all

//<![CDATA[
for (i=0;i<document.links.length;i++) {
if (document.links[i].className == 'MCToggler') document.links[i].click();
} //]]>

3) Save it as a .js file (such as "openTogglers.js").
4) Copy the js file into your Content folder.
5) Open your topic in the Internal Text Editor.
6) Paste into the bottom of the topic:

Code: Select all

<script src="openTogglers.js" />

If your topics are not in the same folder as the .js file, you'll have to include a relative path.

We could have made this code into a function and called it from the onLoad command as I did before. However, Flare sometimes strips out the onLoad event from the body tag when you use a master page. Flare also has a funny habit of making the arrow icons -really- big if you try to call this script from a master page. It works, but the icons are probably 3"x3". lol

DurtyMat · Post by **DurtyMat** » Mon Dec 22, 2008 2:37 pm

good times, thanks for the walkthrough on creating the .js ... for the time being i am only applying it to one topic but more might be using the "display all togglers" approach and this code will come in handy.

side note: good to see you on the forums

kivinen · Post by **kivinen** » Mon Feb 23, 2009 5:02 am

Cool thanks for the great tip...

peace.

Dave

DoCo · Post by **DoCo** » Wed Jul 15, 2009 7:18 am

Hello there !

First of all, thanks a lot!!
I have applied this code for a specific class of Glossary Terms and it works perfectly well as long as the js script is in an external file. But if I enclose the script in my topic, as it was at first introduced, it has no effect and Glossary Term definitions are not expanded. I have the same result by using the example given in the thread involving Togglers (simply 'copy/paste' the code in a new topic): nothing expands when loading the page if the script is within the topic but Togglers expand as expected if the script is in an external file.
Is there a little detail I am missing ?

Thanks again,
DoCo
------------------------------
Flare V4.2 -- Html Output

Post by **scott** » Wed Jul 15, 2009 8:23 am

Hi--glad it's working for you!

I added the script to the bottom of my topic within the <body> tag rather than at the top in the <head>. I also didn't make it a function when I placed it in the topic. It just runs immediately rather than being called by an event like onLoad. I'd check to make sure you added it at the bottom of the topic and that it's not a function. Or, try adding an alert to the beginning -- alert('hi'); -- to see if it's executing.

hope this helps,
.scott

DoCo · Post by **DoCo** » Thu Jul 30, 2009 1:26 am

Hi Scott,

Sorry for this late answer, I was monopolized by other very high-priority stuff (finding where to pitch the tent, visiting Neolithic sites, hiking around the Gulf, etc.). **sigh** Well. Back to Earth.
Regarding what I have done previously, I followed the example given in the message posted on the 22 Dec 2008, 18:42 - that is, including the script at the end of the <body> as a function (so not in the <head>) and calling it in the opening <body> tag with the onLoad command.
As suggested in your reply, I have just tried inserting the code at the end of the <body> without making it a function and it worked perfectly !

For 'not even Newbie in JavaScript' as I am, here is what it looks like:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" class="">
    <head><title>Glossary</title></head>
    <body>
        <h1>Glossary</h1>
        <table style="width: 80%; margin-left: auto; margin-right: auto;">
            <tbody>
                <tr MadCap:conditions="Default.ScreenOnly">
                    <td><a href="#A" title="From A to J" alt="From A to J" class="miniToc">From A to J</a></td>
                    <td><a href="#G" title="From F to J" alt="From F to J" class="miniToc">From F to J</a></td>
                    <td><a href="#L" title="From K to O" alt="From K to O" class="miniToc">From K to O</a></td>
                    <td><a href="#P" title="From P to T" alt="From P to T" class="miniToc">From P to T</a></td>
                    <td><a href="#V" title="From U to Z" alt="From U to Z" class="miniToc">From U to Z</a></td>
                </tr>
            </tbody>
        </table>
        <p><a name="A"></a>A</p>
        <p><MadCap:glossaryTerm class="Fake">Administrator</MadCap:glossaryTerm></p>
        <p><a name="G"></a>G</p>
        <p><MadCap:glossaryTerm class="Fake">Grouping</MadCap:glossaryTerm></p>
        <p><a name="L"></a>L</p>
        <p><MadCap:glossaryTerm class="Fake">Layout</MadCap:glossaryTerm></p>
        <p><a name="P"></a>P</p>
        <p><MadCap:glossaryTerm class="Fake">Report</MadCap:glossaryTerm></p>
        <p><a name="V"></a>V</p>
        <p><MadCap:glossaryTerm class="Fake">Version</MadCap:glossaryTerm></p>
<script> 
{//<![CDATA[
for (i=0;i<document.links.length;i++) {
if (document.links[i].className == 'MCExpandingHead_Fake') document.links[i].click();
} } //]]>
</script>
    </body>
</html>

Thanks to your help, my Glossary Topic behaves now as expected: Glossary terms expand and definition are displayed when loading the topic, without involving any external file. (For people wondering why I need a Glossary Topic since this functionality is provided by Flare, I just followed Greg's smart advice on rolling one's own glossary http://forums.madcapsoftware.com/viewto ... 279#p50075 )

Thanks again !
DoCo

DoCo · Post by **DoCo** » Tue Aug 04, 2009 6:57 am

I was wondering if it would be possible to expand terms for printing purposing only (not in print output but when printing a specific Html page). I though about using 'onbeforeprint' but since the approach 'function call in the body tag' does not seem to work, I do not how to proceed. I have tried several configurations (script definition in the head, external js file, window.onbeforeprint command) but none did the trick.
Any idea ?

DoCo

Post by **scott** » Mon Aug 17, 2009 4:28 pm

Hello!
onbeforeprint is a Microsoft-specific event, so it won't work in Firefox, Opera, Safari, etc.

One trick would be to set the print media in your stylesheet to force the display property to "block" for toggler content. Unfortunately, MadCap uses inline formatting instead of a class to show/hide them. So, you will need to override it for each tag in your toggler. Here's an example for the p tag:

p { display: block !important; }

If MadCap used a class, we could just set it for the class. Maybe they'll change it in Flare 6?

hope this helps,
.scott

DoCo · Post by **DoCo** » Tue Aug 18, 2009 3:45 am

Hi there,

Thanks for the tip but infortunatly, it did not work at my first try and I do not have time at present to investigate it further. I will take a closer look when I have time to do it properly.

One word though about printing the online Output: puzzling! AFAIAC, the mix between print and online properties is really disconcerting (for instance print font but online masterpage)...
Moreover, since it is a print output/medium, I do not understand why togglers, dropdowns and other pop-ups do not behave as in other print outputs.

DoCo

Post by **LTinker68** » Tue Aug 18, 2009 5:16 am

DoCo wrote:Moreover, since it is a print output/medium, I do not understand why togglers, dropdowns and other pop-ups do not behave as in other print outputs.

By that you mean they should still be interactive or you think they should be converted to straight text? If it's the former, then not all print output formats can support all those features (e.g., MS Word), plus toggles need to be expanded before they can be printed and you don't want end users to have to go through and do that before they print the entire document.

DoCo · Post by **DoCo** » Thu Aug 20, 2009 12:30 am

Hello,

I think we agree: toggles or dropdowns need to be expanded before printing and it should not be the user's role to manually expand them for print purposes.
When outputting to PDF or Word (what I called 'print outputs') this 'ExpandAll' is automatically performed and I was wondering why it was not the case when printing from online outputs whereas the default 'print' medium is applied (or at least seems to be applied to some extent).

DoCo

KevinDAmery · Post by **KevinDAmery** » Thu Aug 20, 2009 9:00 am

As far as I know this isn't controlled by the Medium, it's controlled by the target type. Since Help is an online format, it defaults to closed, and when you tell a browser to print it prints the current contents of the page (sometimes not all that accurately, but that's another story...)

DoCo · Post by **DoCo** » Tue Aug 25, 2009 8:16 am

Hi there,

Expanding Toggles and Dropdowns for print purposes when dealing with online outputs ? Here is a little trick: 'concatenating' the ExpandAll/Print/CollapseAll buttons into the single Print button.
How to proceed: in your Skin, go to Styles / Toolbar Item / Print, select the Type properties and set 'OnClick' to ExpandAll( "open" );PrintTopic();ExpandAll( "close" );
When printing, the topic flickers a little bit, but I can cope with that.

Hope this helps !

DoCo

hans_hatton · Post by **hans_hatton** » Wed Aug 26, 2009 6:46 pm

On a related note, is it possible to expand all dropdown text sections when the topic is opened by the application using the URL method (webhelp output)?

The situation I am thinking of is as follows: A help topic documents all the fields on a screen. Because there are a lot of fields, we want to create separate dropdown sections for each field group on the screen. When the user is browsing the help system we want the dropdown sections to be collapsed by default. When the user requests (context-sensitive) help for a field, however, we want the application to open the topic with the relevant section (or all sections) expanded and jump to the help for the specific field (using the embedded bookmark specified in the URL).

DoCo · Post by **DoCo** » Thu Aug 27, 2009 1:23 am

Hi,

I think an easy way to achieve this is to insert your bookmark within the dropdown body. At some point you might have some trouble with the page display, I mean, the definition (dropdown body) being displayed at the top of the page while the field name (dropdown hotspot) is not visible.
Perhaps would it be better to insert in the call linking to the field entry a javascript function expanding the dropdown on page load. Unfortunatly, I do not know how to do this... Maybe some js master will read this...

DoCo

DurtyMat · Post by **DurtyMat** » Tue Dec 29, 2009 3:31 pm

so, i was hoping to flip this around and create a button that would CLOSE all the toggles at the same time ... thoughts?

plz n thx n happy holidays!!!!

MadCap Software Forums

display all toggles when page loads ...

display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...

Re: display all toggles when page loads ...