Possible to remove Top Nav headder for some topics?

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
sarrants
Propeller Head
Posts: 86
Joined: Tue Sep 18, 2007 6:04 am
Location: South Burlington, VT

Possible to remove Top Nav headder for some topics?

Post by sarrants »

I have some image maps in my project. The popups have the top nav header -- Logo, menu icon, search box. and I'd like to remove it just from those topics.
I've created a sep. master page for popups, and all it contains is the topic body proxy. This is assigned in the CSS, html.popup under Unclassified. Has anyone done something like this? Is what I want doable?
The things that we plan and measure are the things that get done.
jsandora
Propeller Head
Posts: 94
Joined: Thu Jun 23, 2011 5:56 am
Location: Boston, MA

Re: Possible to remove Top Nav headder for some topics?

Post by jsandora »

Have you had any success with finding a solution for this yet? I'm in the same boat for a different reason. I have separate topics set up in my project that populate pop-up windows in our application. Devs just pull content from the <body> tag in these topics and display them in modal windows.

This works fine with WebHelp since the <body> tag is relatively clean. However, I've realized that HTML5 puts all that top nav code into the <body> tag of EVERY. TOPIC. So if Devs try to pull from the <body> tag of the HTML5 version, they're going to get the nav bar as well.

It doesn't look like it's as easy as just creating a new/different master page for these topics since it seems Flare adds the top nav code when it builds out the help system. So I'm kinda stumped.
Software Documentation Specialist (but really, Tech Writer)
jsandora
Propeller Head
Posts: 94
Joined: Thu Jun 23, 2011 5:56 am
Location: Boston, MA

Re: Possible to remove Top Nav headder for some topics?

Post by jsandora »

Devs threw out an idea:

Create a separate stylesheet for the topics that we do NOT want the nav bar to appear. Apply that stylesheet individually to the topics. In that stylesheet, add a style that sets the Display of the nav bar to None.

The thought is that when Flare builds out the HTML5 help, user-generated stylesheets are addressed last. So a rule setting the nav bar display to None should remove it when the system is built.

Question now is: which style/class do we have to add to the new stylesheet?

I thought it might be "foundation-wrap", but I think that's too broad (that might remove the entire topic, not just the nav bar). Since the display of the nav bar is USUALLY controlled via the Skin, I'm not sure where in the CSS to look.

Thoughts?
Software Documentation Specialist (but really, Tech Writer)
jsandora
Propeller Head
Posts: 94
Joined: Thu Jun 23, 2011 5:56 am
Location: Boston, MA

Re: Possible to remove Top Nav headder for some topics?

Post by jsandora »

Managed to work this out. Here's what we ended up with:

Created a separate stylesheet for the topics where I did NOT want the nav bar to show (copied from the main stylesheet). Opened this new stylesheet with the internal text editor and added the following styles:

Code: Select all

nav.tab-bar
{
display:none !important;
}

.MCBreadcrumbsBox_0
{
display:none !important;
}

.sideContent
{
display:none !important;
}
I then opened the Properties dialog for the desired topics and applied this new stylesheet to just those topics. This removed the top nav, breadcrumbs, and print/expand buttons from the topic when the final output was generated.

Hope this helps someone!
Software Documentation Specialist (but really, Tech Writer)
Nita Beck
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Possible to remove Top Nav headder for some topics?

Post by Nita Beck »

Thanks for sharing this! At my user group's next meeting, we're going to cover tips, tricks, and gotchas of Top Nav. Your neat idea just made the list!
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
sarrants
Propeller Head
Posts: 86
Joined: Tue Sep 18, 2007 6:04 am
Location: South Burlington, VT

Re: Possible to remove Top Nav headder for some topics?

Post by sarrants »

Thanks, jsandora! I'm going to try this on Monday! You folks are swell!
The things that we plan and measure are the things that get done.
drmcp15
Jr. Propeller Head
Posts: 3
Joined: Thu May 07, 2015 3:33 pm

Re: Possible to remove Top Nav headder for some topics?

Post by drmcp15 »

I've tried to apply this to a topic that appears in a pop-up in my project, but no success. The top nav shows up in output. Any advice?

David
drmcp15
Jr. Propeller Head
Posts: 3
Joined: Thu May 07, 2015 3:33 pm

Re: Possible to remove Top Nav headder for some topics?

Post by drmcp15 »

Ok, figured it out. The main style sheet was being applied at the project level, so obviously it prevented the "NoTopNav" style sheet I'd created from being applied. That'll teach me to post at close to 1:30 in the morning!

Thanks for the great tip jsandora!

David
doc_guy
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: Possible to remove Top Nav headder for some topics?

Post by doc_guy »

Thanks, everybody for the thread.

I took this a step further with our developer today and we made it so that if the user lands on the page from a CSH call, the content is hidden, but if they land on the page NOT from a CSH call, the content is displayed.

The trick here is noticing that when a CSH call gets redirected to the target page, the "?cshid=1000" ID is still appended to the end of the URL. That is a JavaScript variable, so we can use JavaScript to check if the variable is set. If the variable is set, we hide the specified content on the page. If the variable is not set, the JavaScript doesn't run.

Here is the JavaScript we used:

Code: Select all

$("document").ready(function () {
  function getParameterByName(name) {
    var url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
  }

  var hideNav = getParameterByName("cshid");
  if(hideNav){
    $("div.sideContent, div.nocontent, div#acmeSearch, nav.title-bar, div#acmeFooter").hide(); // Replace the content in here with the Divs that you want to hide
  }
});
Note the line that has the DIVs that you want to hide. I have some custom DIVs I created on my MasterPage, so my list won't match yours.

Then, I just placed this JavaScript on the MasterPage, and now when you access a content page via CSH, the navigation and other elements are hidden.

Hope this helps somebody else in the future.
Paul Pehrson
My Blog

Image
Post Reply