Default Togglers to Expanded on Page Load
Default Togglers to Expanded on Page Load
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
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
-
- Propeller Head
- Posts: 62
- Joined: Sat Dec 10, 2005 8:06 pm
- Location: Calgary, AB Canada
Re: Default Togglers to Expanded on Page Load
I have this snippet load at the very end of my MasterPage.flmsp files:
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.
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>
There is some additional code I didn't remove for this post because I would appreciate Community feedback on improving any of my hacks.
Craig Prichard
craig.prichard@gmail.com
craig.prichard@gmail.com
Re: Default Togglers to Expanded on Page Load
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
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
-
- Propeller Head
- Posts: 13
- Joined: Wed Aug 29, 2012 11:38 am
Re: Default Togglers to Expanded on Page Load
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>
Re: Default Togglers to Expanded on Page Load
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.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Re: Default Togglers to Expanded on Page Load
If I create a toggler, the source code of the link to click on looks like this:
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.
Code: Select all
<a href="javascript:void(0);" onclick="FMCToggler( this ); return false;" class="MCToggler_0" MadCap:targets="a">
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?"
"I need input! - Have you got input?"
Re: Default Togglers to Expanded on Page Load
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.
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>
Re: Default Togglers to Expanded on Page Load
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.
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?"
"I need input! - Have you got input?"
-
- Propeller Head
- Posts: 13
- Joined: Wed Aug 29, 2012 11:38 am
Re: Default Togglers to Expanded on Page Load
I had tried his script first, and unfortunately it doesn't work with 8.1.1LTinker68 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.
Re: Default Togglers to Expanded on Page Load
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).echopraxia wrote:I had tried his script first, and unfortunately it doesn't work with 8.1.1LTinker68 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.
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.
-
- Propeller Head
- Posts: 13
- Joined: Wed Aug 29, 2012 11:38 am
Re: Default Togglers to Expanded on Page Load
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".Dave Lee wrote: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).echopraxia wrote:I had tried his script first, and unfortunately it doesn't work with 8.1.1LTinker68 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.
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.
Re: Default Togglers to Expanded on Page Load
If you're using HTML5 help only, use this script to open all dropdowns: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".
Code: Select all
<script>
$(window).load(function() {
$(".MCDropDownHotSpot").click();
});
</script>
Code: Select all
<script>
$(window).load(function() {
$(".MCToggler").click();
});
</script>
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.
-
- Propeller Head
- Posts: 13
- Joined: Wed Aug 29, 2012 11:38 am
Re: Default Togglers to Expanded on Page Load
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.Dave Lee wrote:If you're using HTML5 help only, use this script to open all dropdowns: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".
And this one will open all togglers:Code: Select all
<script> $(window).load(function() { $(".MCDropDownHotSpot").click(); }); </script>
These will work in the output, but not in preview mode.Code: Select all
<script> $(window).load(function() { $(".MCToggler").click(); }); </script>
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.
Re: Default Togglers to Expanded on Page Load
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.Dave Lee wrote:If you're using HTML5 help only, use this script to open all dropdowns: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".
And this one will open all togglers:Code: Select all
<script> $(window).load(function() { $(".MCDropDownHotSpot").click(); }); </script>
These will work in the output, but not in preview mode.Code: Select all
<script> $(window).load(function() { $(".MCToggler").click(); }); </script>
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.
Re: Default Togglers to Expanded on Page Load
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 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.
Re: Default Togglers to Expanded on Page Load
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:
Can anyone tell me what I might be doing wrong? Thanks.
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>
Re: Default Togglers to Expanded on Page Load
Two problems:kbradley wrote:Can anyone tell me what I might be doing wrong? Thanks.
(1)
Code: Select all
<script type="text/javacript">
(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>
Re: Default Togglers to Expanded on Page Load
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:
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">
Re: Default Togglers to Expanded on Page Load
Thank you both. It's working now. I really appreciate your help.
-
- Sr. Propeller Head
- Posts: 121
- Joined: Tue Jul 24, 2012 12:38 am
Re: Default Togglers to Expanded on Page Load
to auto expand "expanding text" sections I used the above info and added this to the body of my masterpage (after the bodyProxy)
(this is Flare 9.1.2)
Code: Select all
<script type="text/javascript">/*<![CDATA[*/
$(window).load(function() {
$(".MCExpandingHotSpot").click();
});
/*]]>*/</script>
Re: Drop down Expanded on Page Load - but stay at top of pag
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...
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
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>
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
Re: Default Togglers to Expanded on Page Load
Try this:
Code: Select all
$(document).ready(function() {
$(".MCDropDownHotSpot").click();
window.scrollTo(0,0);
});
Re: Default Togglers to Expanded on Page Load
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.
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)
Re: Default Togglers to Expanded on Page Load
If it's always the first, try: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.
Code: Select all
$(document).ready(function() {
$(".MCDropDownHotSpot").first().click();
window.scrollTo(0,0);
});
Re: Default Togglers to Expanded on Page Load
You wouldn't think that a few lines of script could make a man so happy.Try this:Code: Select all
CODE: SELECT ALL $(document).ready(function() { $(".MCDropDownHotSpot").click(); window.scrollTo(0,0); });
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