Default Togglers to Expanded on Page Load

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
jimg
Jr. Propeller Head
Posts: 5
Joined: Tue May 22, 2012 11:16 am

Default Togglers to Expanded on Page Load

Post by jimg »

Hi All,

I want to use MadCap togglers for expand/collapse sections in topic pages in HTML5 web app. The problem is that I need the togglers to default to expanded on page load. Is there a setting to have them default to expanded? If not, is there a way to programmatically fire the "click" event on each toggler, or fire the "click" event of the expand all button of the toolbar?

My JavaScript and CSS skills are very rudimentry, and I have no idea what to do with <span class="MCToggler MCTogglerHead MCTogglerHotSpot MCToggler_Open toggler MCTogglerHotSpot_" data-mc-targets="Test">Click Me!</span>. I can find the span in the DOM, but there is no click event or anything I know of to fire. The same goes with the expand all button in the tool bar; I can find it in the DOM, but the click event doesn't seem to do anything.

Any help would be greatly appreciated!

Thanks
Jim
Craig.Prichard
Propeller Head
Posts: 62
Joined: Sat Dec 10, 2005 8:06 pm
Location: Calgary, AB Canada

Re: Default Togglers to Expanded on Page Load

Post by Craig.Prichard »

I have this snippet load at the very end of my MasterPage.flmsp files:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html>
    <body>
        <div class="web_page_footer" MadCap:conditions="cond.Pre-Release">
            <!-- When a page loads automatically expand all dropDowns -->
            <script type="text/javascript">
				/*<![CDATA[*/
				for (i=0;i<document.links.length;i++) {
					if (document.links[i].className.indexOf("MCDropDownHotSpot") !=-1) {
						FMCDropDown( document.links[i] ); }
					if (document.links[i].className.indexOf("MCToggler") !=-1) {
						FMCToggler( document.links[i] ); }
				}
				/*]]>*/
			</script>
			<span class="bold">BETA</span>: Contact <MadCap:variable name="var.Contact" /> (<MadCap:variable name="var.PhoneNumber" />) re: <a href="#" target="_blank" title="Open topic in a separate window" alt="Open topic in a separate window" class="local_link"><MadCap:variable name="System.SourceFile" /></a> or <span class="nowrap"><MadCap:snippetText src="Email_feedback.flsnp" /> <a href="javascript:void(0)" alt="Permalink" title="Permalink" onClick="prompt('Address:', parent.frames['body'].location.href);" class="local_link"><span style="font-size: 1em;"><MadCap:snippetText src="../icons/icon_permalink.flsnp" /></span></a> <a href="javascript:void(0)" alt="Monitor resolution" title="Monitor resolution" onClick="alert('Your resolution is '+screen.width+'x'+screen.height+' pixels');" class="local_link"><span style="font-size: 1em;"><MadCap:snippetText src="../icons/icon_monitor.flsnp" /></span></a> <MadCap:topicToolbarProxy class="" style="mc-topic-toolbar-items: ; vertical-align: text-bottom; background-color: lightgray;" /></span> <MadCap:snippetText src="ScrollToTop.flsnp" />
		</div>
        <div class="web_page_footer" MadCap:conditions="cond.Releasable">
            <!-- When a page loads expand only the specified dropDowns -->
            <script type="text/javascript">
				/*<![CDATA[*/
				for (i=0;i<document.links.length;i++) {
					if (document.links[i].className.indexOf("_load_expanded")!=-1)
						FMCDropDown( document.links[i] );
				}
				/*]]>*/
			</script>Copyright © <MadCap:variable name="var.CopyrightYear" /> <MadCap:variable name="var.CompanyName" />. All rights reserved. <span class="nowrap"><MadCap:snippetText src="Email_feedback.flsnp" /> <a href="#" target="_blank" title="Open topic in a separate window" alt="Open topic in a separate window" class="local_link"> </a><a href="javascript:void(0)" alt="Permalink" title="Permalink" onClick="prompt('Address:', parent.frames['body'].location.href);" class="local_link"><span style="font-size: 1em;"><MadCap:snippetText src="../icons/icon_permalink.flsnp" /></span></a> <a href="javascript:void(0)" alt="Monitor resolution" title="Monitor resolution" onClick="alert('Your resolution is '+screen.width+'x'+screen.height+' pixels');" class="local_link"><span style="font-size: 1em;"><MadCap:snippetText src="../icons/icon_monitor.flsnp" /></span></a> <MadCap:topicToolbarProxy class="" style="mc-topic-toolbar-items: ; vertical-align: text-bottom; background-color: lightgray;" /></span> <MadCap:snippetText src="ScrollToTop.flsnp" />
		</div>
    </body>
</html>
For BETA targets I always expand everything. For Release targets I only expand specified <MadCap:dropDownHotspot class="load_expanded">...</MadCap:dropDownHotspot>, etc.

There is some additional code I didn't remove for this post because I would appreciate Community feedback on improving any of my hacks.
jimg
Jr. Propeller Head
Posts: 5
Joined: Tue May 22, 2012 11:16 am

Re: Default Togglers to Expanded on Page Load

Post by jimg »

Hi Craig,

Thanks for the response; however, it doesn't work for me.

document.links includes all the other hyperlinks on my page, but it doesn't seem to include the togglers.

Also, where are the FMCDropDown/FMCToggler functions you are calling? I don't see them in any of the JS files in the output.

Were your togglers/dropdowns created in Flare 8? I think MadCap might have changed the way togglers/dropdowns are handled. Maybe yours are implemented the old way and their's backward compatibility.

Thanks,
Jim
echopraxia
Propeller Head
Posts: 13
Joined: Wed Aug 29, 2012 11:38 am

Re: Default Togglers to Expanded on Page Load

Post by echopraxia »

I'm in the same situation, I need all of my dropdown text to show expanded on load rather than collapsed. I tried the resolution offered, and it didn't work for me either. Any help would be greatly appreciated -- I'm not looking forward to removing all dropdown text if it cannot be expanded on load. :(

Code: Select all

        <MadCap:dropDown>
            <MadCap:dropDownHead class="heading">
                <MadCap:dropDownHotspot>
                    <h2 class="dropdown">My Heading Here<a name="linknamehere"></a></h2>
                </MadCap:dropDownHotspot>
            </MadCap:dropDownHead>
            <MadCap:dropDownBody>
                <p>My text here.</p>
            </MadCap:dropDownBody>
        </MadCap:dropDown>
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: Default Togglers to Expanded on Page Load

Post by LTinker68 »

I didn't compare the script Craig mentioned to the one Scott originally posted in the following thread --> http://forums.madcapsoftware.com/viewtopic.php?t=7900. You might want to review that thread to see if his script works instead. Make sure you read it all the way through -- it's an old thread and he's updated it as new versions of Flare came out.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
i-tietz
Propellus Maximus
Posts: 1219
Joined: Wed Oct 24, 2007 4:13 am
Location: Fürth, Germany

Re: Default Togglers to Expanded on Page Load

Post by i-tietz »

If I create a toggler, the source code of the link to click on looks like this:

Code: Select all

<a href="javascript:void(0);" onclick="FMCToggler( this ); return false;" class="MCToggler_0" MadCap:targets="a">
There you have the FMCToggler function (obviously one from MadCap) and the reason why it doesn't work: the class is not MCToggler, but MCToggler_0.

You gotta have a look at your source code and adapt the javascript accordingly.

MC changed the classes of the dropdowns and the like for version 7, I think.
With dropdowns it's a lot more complicated, if you have nested dropdowns ... in that case you'll also get an appended _1 and _2 instead of _0 ... you'll need to cover all those cases in the javascript.
Inge____________________________
"I need input! - Have you got input?"
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Default Togglers to Expanded on Page Load

Post by NorthEast »

I don't have a solution, but Craig and i-tietz - aren't you both talking about WebHelp?

jimg's query was for HTML5 help, which has different output code for drop-downs; e.g.

Code: Select all

<div class="MCDropDown MCDropDown_Open dropDown"><span class="MCDropDownHead dropDownHead"><span class="MCDropDownHotSpot dropDownHotspot MCDropDownHotSpot_">drop down link</span></span>
            <div class="MCDropDownBody dropDownBody">
                <p>drop down body</p>
            </div>
</div>
i-tietz
Propellus Maximus
Posts: 1219
Joined: Wed Oct 24, 2007 4:13 am
Location: Fürth, Germany

Re: Default Togglers to Expanded on Page Load

Post by i-tietz »

aha! Wow. Sure?
This looks like there are multiple classes applied to the same "thingy". Could be MC did that for reasons of migration from older stylesheet and/or Flare versions ... smart move, that.

In case of the dropdownhotspot it's three of them:
- MCDropDownHotSpot
- dropDownHotspot
- MCDropDownHotSpot_

For the javascript just pick any one of them. BUT: You still will have to look at the source code of the generated help topics. This might still be different from your source code.
Inge____________________________
"I need input! - Have you got input?"
echopraxia
Propeller Head
Posts: 13
Joined: Wed Aug 29, 2012 11:38 am

Re: Default Togglers to Expanded on Page Load

Post by echopraxia »

LTinker68 wrote:I didn't compare the script Craig mentioned to the one Scott originally posted in the following thread --> http://forums.madcapsoftware.com/viewtopic.php?t=7900. You might want to review that thread to see if his script works instead. Make sure you read it all the way through -- it's an old thread and he's updated it as new versions of Flare came out.
I had tried his script first, and unfortunately it doesn't work with 8.1.1
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Default Togglers to Expanded on Page Load

Post by NorthEast »

echopraxia wrote:
LTinker68 wrote:I didn't compare the script Craig mentioned to the one Scott originally posted in the following thread --> http://forums.madcapsoftware.com/viewtopic.php?t=7900. You might want to review that thread to see if his script works instead. Make sure you read it all the way through -- it's an old thread and he's updated it as new versions of Flare came out.
I had tried his script first, and unfortunately it doesn't work with 8.1.1
You haven't mentioned what target you're using. Bear in mind all the scripts mentioned are for WebHelp only, they will not work for HTML5 help (the post is from 2008, before HTML5).

There are a few scripts in that post, and some do work for WebHelp in v8 (I've just tried two).
As i-tietz mentioned, some old Dropdown/Toggler scripts for WebHelp may not work in Flare v7/v8, as they changed the tag naming conventions.
echopraxia
Propeller Head
Posts: 13
Joined: Wed Aug 29, 2012 11:38 am

Re: Default Togglers to Expanded on Page Load

Post by echopraxia »

Dave Lee wrote:
echopraxia wrote:
LTinker68 wrote:I didn't compare the script Craig mentioned to the one Scott originally posted in the following thread --> http://forums.madcapsoftware.com/viewtopic.php?t=7900. You might want to review that thread to see if his script works instead. Make sure you read it all the way through -- it's an old thread and he's updated it as new versions of Flare came out.
I had tried his script first, and unfortunately it doesn't work with 8.1.1
You haven't mentioned what target you're using. Bear in mind all the scripts mentioned are for WebHelp only, they will not work for HTML5 help (the post is from 2008, before HTML5).

There are a few scripts in that post, and some do work for WebHelp in v8 (I've just tried two).
As i-tietz mentioned, some old Dropdown/Toggler scripts for WebHelp may not work in Flare v7/v8, as they changed the tag naming conventions.
Yes, my bad. Since I upgraded to 8.1 and switched everything from WebHelp to HTML5 I forget to specifically say that I'm using HTML5 because anything else just seems such a distant memory. So... let me change that to "I had tried his script first, and unfortunately it doesn't work with HTML5 targets in 8.1.1".
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Default Togglers to Expanded on Page Load

Post by NorthEast »

echopraxia wrote:Yes, my bad. Since I upgraded to 8.1 and switched everything from WebHelp to HTML5 I forget to specifically say that I'm using HTML5 because anything else just seems such a distant memory. So... let me change that to "I had tried his script first, and unfortunately it doesn't work with HTML5 targets in 8.1.1".
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.
echopraxia
Propeller Head
Posts: 13
Joined: Wed Aug 29, 2012 11:38 am

Re: Default Togglers to Expanded on Page Load

Post by echopraxia »

Dave Lee wrote:
echopraxia wrote:Yes, my bad. Since I upgraded to 8.1 and switched everything from WebHelp to HTML5 I forget to specifically say that I'm using HTML5 because anything else just seems such a distant memory. So... let me change that to "I had tried his script first, and unfortunately it doesn't work with HTML5 targets in 8.1.1".
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.
Thank you so much!! It worked :) This has just saved me several hours of work. I added it to my copyright snippet which appears at the end of each page to quickly test.
kbradley
Propeller Head
Posts: 18
Joined: Fri Jan 27, 2012 2:38 pm

Re: Default Togglers to Expanded on Page Load

Post by kbradley »

Dave Lee wrote:
echopraxia wrote:Yes, my bad. Since I upgraded to 8.1 and switched everything from WebHelp to HTML5 I forget to specifically say that I'm using HTML5 because anything else just seems such a distant memory. So... let me change that to "I had tried his script first, and unfortunately it doesn't work with HTML5 targets in 8.1.1".
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.
Is this something you drop in the masterpage? I'm running 8.1.1 trying to get this to work in my HTML5 output, but so far, I'm having no success. I've dropped it inside my masterpage <head> tag. Should I put it someplace else? Thanks.
sfoley
Propeller Head
Posts: 92
Joined: Mon May 05, 2008 5:00 pm

Re: Default Togglers to Expanded on Page Load

Post by sfoley »

kbradley wrote:Is this something you drop in the masterpage? I'm running 8.1.1 trying to get this to work in my HTML5 output, but so far, I'm having no success. I've dropped it inside my masterpage <head> tag. Should I put it someplace else? Thanks.
Scripts in the <head> element must be called from within the <body> element in order to run. You can also put the script directly in the <body> element, or attach it to an event handler.
kbradley
Propeller Head
Posts: 18
Joined: Fri Jan 27, 2012 2:38 pm

Re: Default Togglers to Expanded on Page Load

Post by kbradley »

Thank you. I tried putting it inside my <body> tag, and still had no success. I put it outside my <body> tag, as well, which also didn't work. Here's a look at my masterpage html:

Code: Select all

<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="2" MadCap:lastHeight="268" MadCap:lastWidth="899">
    <head>
        <script type="text/javascript" src="../scripts/jquery-1.6.2.min.js">
        </script>
        <script type="text/javascript" src="../syntaxhighlighter/src/shCore.js">
        </script>
        <script type="text/javascript" src="../syntaxhighlighter/scripts/shBrushXml.js">
        </script>
        <script type="text/javascript" src="../syntaxhighlighter/scripts/shBrushSql.js">
        </script>
        <script type="text/javascript" src="../syntaxhighlighter/scripts/shBrushBash.js">
        </script>
    </head>
    <body>
		<MadCap:breadcrumbsProxy />
        <MadCap:bodyProxy />
        <p> </p>
        <p class="footer">© <MadCap:variable name="docTeam.copyrightDate" /> <img src="../Graphics/skinIcons/ACLogoHeader.png" class="Center" /></p>
	</body>
	<script type="text/javacript">
		$(window).load(function() {
		$(".MCDropDownHotSpot").click();      
		});
	</script>
    <script type="text/javascript"> 
		SyntaxHighlighter.config.clipboardSwf = '../syntaxhighlighter/scripts/clipboard.swf';
		SyntaxHighlighter.all();
	</script>
</html>
Can anyone tell me what I might be doing wrong? Thanks.
sfoley
Propeller Head
Posts: 92
Joined: Mon May 05, 2008 5:00 pm

Re: Default Togglers to Expanded on Page Load

Post by sfoley »

kbradley wrote:Can anyone tell me what I might be doing wrong? Thanks.
Two problems:
(1)

Code: Select all

       <script type="text/javacript">
You're missing an 's' there -- javascript.

(2) Your script elements need to be inside the <body> element. Add them directly after your footer paragraph. You could also combine them into one:

Code: Select all

        <p class="footer">© <MadCap:variable name="docTeam.copyrightDate" /> <img src="../Graphics/skinIcons/ACLogoHeader.png" class="Center" /></p>
        <script type="text/javascript">
          SyntaxHighlighter.config.clipboardSwf = '../syntaxhighlighter/scripts/clipboard.swf';
          SyntaxHighlighter.all();
          $(window).load(function() {
              $(".MCDropDownHotSpot").click();     
          });
       </script>
   </body>
</html>
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Default Togglers to Expanded on Page Load

Post by NorthEast »

Yep, as sfoley mentioned, the script needs to be inside the body tag; it's currently after the closing </body> tag.

Also, you can remove the script link for jquery-1.6.2.min.js, as it isn't required for HTML5 outputs.
Flare v8 includes its own copy of jQuery (version 1.71) in the HTML5 output, so that means you currently have two links in your output to different versions of jQuery.

For reference, if you check the output, Flare includes this link to its own jQuery script file:

Code: Select all

<script src="Resources/Scripts/jquery.min.js" type="text/javascript">
kbradley
Propeller Head
Posts: 18
Joined: Fri Jan 27, 2012 2:38 pm

Re: Default Togglers to Expanded on Page Load

Post by kbradley »

Thank you both. It's working now. I really appreciate your help.
ruthhoward
Sr. Propeller Head
Posts: 121
Joined: Tue Jul 24, 2012 12:38 am

Re: Default Togglers to Expanded on Page Load

Post by ruthhoward »

to auto expand "expanding text" sections I used the above info and added this to the body of my masterpage (after the bodyProxy)

Code: Select all

<script type="text/javascript">/*<![CDATA[*/
			$(window).load(function() {
			$(".MCExpandingHotSpot").click();     
			});
/*]]>*/</script>
(this is Flare 9.1.2)
MaxyDocs
Jr. Propeller Head
Posts: 9
Joined: Tue Feb 02, 2016 3:57 am

Re: Drop down Expanded on Page Load - but stay at top of pag

Post by MaxyDocs »

Flare 11 - HTML 5 - Top Nav output.

Hi All,

Appreciate this is an old thread, but found some useful info and almost perfect solution here.
I would like to automatically expand all drop-down on page load.

Found the solution in this thread, many thanks Dave Lee...

Code: Select all

<script>$(window).load(function() {
		$(".MCDropDownHotSpot").click();      
		});
		</script>
Very happy with this, but need to change one behavior. The script is in my master page, when the user opens the topic, the drop downs expand on page load BUT the page scrolls to the first drop down which is halfway down page.

Happy path - I'd like the page to open with the drop downs expanded but return to top of page/topic.
I've tried adding $(document).load().scrollTop(0); to the script, but this is ignored in output.

Any ideas please,
Many thanks
Craig
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Default Togglers to Expanded on Page Load

Post by NorthEast »

Try this:

Code: Select all

$(document).ready(function() {
	$(".MCDropDownHotSpot").click();
	window.scrollTo(0,0);
});
jsandora
Propeller Head
Posts: 94
Joined: Thu Jun 23, 2011 5:56 am
Location: Boston, MA

Re: Default Togglers to Expanded on Page Load

Post by jsandora »

Is there a way to set this up to target a single drop-down to expand on a page (instead of all of them)?

We have a topic in our help systems containing release notes. Each release update is under it's own dropdown heading, with the latest one at the top.

Wondering if we can have that first drop-down expanded when the page loads, but keep the others underneath it closed.
Software Documentation Specialist (but really, Tech Writer)
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Default Togglers to Expanded on Page Load

Post by NorthEast »

jsandora wrote:Is there a way to set this up to target a single drop-down to expand on a page (instead of all of them)?

We have a topic in our help systems containing release notes. Each release update is under it's own dropdown heading, with the latest one at the top.

Wondering if we can have that first drop-down expanded when the page loads, but keep the others underneath it closed.
If it's always the first, try:

Code: Select all

$(document).ready(function() {
   $(".MCDropDownHotSpot").first().click();
   window.scrollTo(0,0);
});
MaxyDocs
Jr. Propeller Head
Posts: 9
Joined: Tue Feb 02, 2016 3:57 am

Re: Default Togglers to Expanded on Page Load

Post by MaxyDocs »

Try this:

Code: Select all

CODE: SELECT ALL
$(document).ready(function() {
   $(".MCDropDownHotSpot").click();
   window.scrollTo(0,0);
});
You wouldn't think that a few lines of script could make a man so happy.
Thanks so much Dave, works a treat.

Am I right in thinking that you cannot change the image of the expand all / collapse all button in the topic toolbar proxy - I'm using HTML5 Top Nav?
I've been asked to make the expand all / collapse button a bit clearer so was thinking of adding a named button rather than the current Hamburger looking button.

Thanks again
Craig
Post Reply