Hide/Show Navigation Pane

[lizb]

I've created a skin that does not show the Navigation Pane when first opened. The pane opens only when the user clicks the Contents or Search buttons in the toolbar. So far, so good.

Now, I would like to be able to close the Navigation Pane from the pane itself. That is, I want to add a 'ToggleNavigationPane' button in the navigation pane, not on the toolbar. Is that possible?

If not, is there a way to have the Contents/Search buttons be toggles themselves? So if the NavPane is closed, clicking Search opens it, but if the NavPane is open, clicking Search closes it?

Any suggestions appreciated!

Thanks,
Liz

[Sharon_G]

I would also dearly like to be able to toggle the navigation pane from within the navigation pane itself.
I would also like to have the "AccordionTitle" appear in the Navigation Pane instead of in the toolbar.
Visually what I want is for the toolbar to run across the entire browser window (sans AccordionTitle) and then, when the Contents, Search, or Favorites is selected, to display the Navigation pane below the toolbar with it's own title and a toggle button at the top.
Does anyone have an idea of how to do this?

[TheGreatAndPowerfulOz]

Now, I would like to be able to close the Navigation Pane from the pane itself. That is, I want to add a 'ToggleNavigationPane' button in the navigation pane, not on the toolbar. Is that possible?

I'm not sure about how one might get a button in the navigation pane itself, but I did discover that you can create any kind of an element in your topics (a button, a link, or whatever) and just specify "MCGlobals.RootFrame.ShowHideNavigation(true);" for its "onclick" event in order to open/close the navigation pane:

Link example:

Code: Select all

<p><a href="javascript:void(0);" title="show/hide navigation pane" onclick="MCGlobals.RootFrame.ShowHideNavigation(true);">show/hide navigation pane</a></p>

Image example:

Code: Select all

<img title="show/hide navigation pane" src="MyImage.png" style="cursor: pointer;" onclick="MCGlobals.RootFrame.ShowHideNavigation(true);" />

If you can figure a way to get a custom element (such as a link, etc.) into the navigation pane, you should be good to go using this "onclick" info!

Hope this helps.

[pouliotmax]

This does not seem to work on a html 5 output.

[TheGreatAndPowerfulOz]

This does not seem to work on a html 5 output.

Sadly, I've also discovered this (just hadn't posted anything about it yet).

Since I've moved my project away from generating WebHelp and have opted for HTML5 output, I've tried to figure out how to produce the same functionality, but without success. I had hoped to "crack the code", but have simply run out of time to continue my investigation.

[pouliotmax]

Anybody else can help with an HTML 5 output?

[Thomas Tregner]

Simulating a click isn't my favorite approach. But with jQuery:

Code: Select all

$("#show-hide-navigation").click();

[TheGreatAndPowerfulOz]

Simulating a click isn't my favorite approach. But with jQuery:

Code: Select all

$("#show-hide-navigation").click();

I agree... I try to avoid simulating a click if at all possible, as well.

Does anybody have the time to do a little digging in Flare's .js to see if there's simply a function we can call to cause the navigation pane to hide/show (similar to how it can be done for WebHelp output)?

[pouliotmax]

Tried adding this to a page

Code: Select all

<script type="text/javascript" language="JavaScript1.2">/*<![CDATA[*/
			
			function hideShow()
			{	
			alert(123);
			$("#show-hide-navigation").click();
			}
			
		/*]]>*/</script>

<p><a href="javascript:void(0);" title="show/hide navigation pane" onclick="hideShow();">show/hide navigation pane 1</a>
        </p>

I get the 123 alert but toc does not dissappear... Any idea why?

[Thomas Tregner]

Check to see if your browser is throwing an error about the origin of the call. The toggle is on the main help and not in the topic iframe. You will run into problems if you try to do something to the parent window from the child topic iframe. Calling the click event for that toggle will work from the toolbar or if you insert the link somewhere else in the skin.

[TheGreatAndPowerfulOz]

Thanks, pouliotmax (I assume you were replying to my last post).

However, when I spoke of using a function, what I meant was that I'd like to call an existing function in Flare's JavaScript code (if one does exist) in the same way that I used to call Flare's "ShowHideNavigation()" function in WebHelp output:

Code: Select all

<p><a href="javascript:void(0);" title="show/hide navigation pane" onclick="MCGlobals.RootFrame.ShowHideNavigation(true);">show/hide navigation pane</a></p>

The code you've posted simply uses a function to simulate a "click()" action on the "#show-hide-navigation" element, which is what Thomas Tregner and I indicated we would like to try to avoid.

[pouliotmax]

mmm ok,
i'm looking to run this code

Code: Select all

$("#show-hide-navigation").click();

everytime i enter the page and not insiode a function.
This :

Code: Select all

<script type="text/javascript" language="JavaScript1.2">/*<![CDATA[*/
         
alert(123);	       
$("#show-hide-navigation").click();
alert(456);

         
      /*]]>*/</script>

Shows 123 and then 456 but action inbetween is not happening.

Any help?

(I tried looking for a function like you guys said but can't seem to find it! )

[Thomas Tregner]

Shows 123 and then 456 but action inbetween is not happening.

Where are you placing your script? I should probably go somewhere in the skin. If you place it in the topic iframe (Topic, Master Page, or Snippet), the script will not be able to act on the navigation pane. One approach is to place just the function in the toolbar JavaScript (Skin Editor > Toolbar > Custom JavaScript to include in Toolbar page):

Code: Select all

function showHideNavigation(){
    $("#show-hide-navigation").click();
}

And in the skin, create a button to call it and set the Styles > {button name} > Properties > Event > Click to

Code: Select all

showHideNavigation();

The new button will do the same thing as the show hide feature on the middle right side of the pane.

Or you can add the script to the toolbar JavaScript and assign the function to the click event of some other element in the skin. You can even add your own element by modifying the template (outside of Flare) or by dynamically creating an element with another script.