Topic pop-ups and the TopNav skin

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
BedfordWriter
Sr. Propeller Head
Posts: 217
Joined: Wed Jun 23, 2010 10:13 am
Location: Nova Scotia

Topic pop-ups and the TopNav skin

Post by BedfordWriter »

I noticed today that the new TopNav skin in Flare 11 doesn't support topic pop-up links. They all get converted to regular links. Text links are still supported, but they don't quite do what I want.

But, I can copy a pop-up link from a topic in old Flare 10 build, put it into the freshly built topic, and it works just the way it always did. So, I'm thinking that "not supported" is more of a style decision than a limit to what can be done with the web coding. I mean, a link is a link is a link, and "pop-up" just means open in a new window. That's basic HTML with some css or javascript to control location and appearance.

If the frameless, top-navigation style means no more pop-up topic links, I suppose that I can learn to adapt. But, I'd rather work around it and keep my pop-ups. Does anyone have a suggestion, other than doing post-processing to put the links back?
deeptikorwar
Sr. Propeller Head
Posts: 111
Joined: Tue Aug 20, 2013 11:38 pm

Re: Topic pop-ups and the TopNav skin

Post by deeptikorwar »

Hi,

Can you please share the code for this? I do not have Flare 10 anymore and I cannot copy the pop-up link.

Thanks,
Deepti
BedfordWriter
Sr. Propeller Head
Posts: 217
Joined: Wed Jun 23, 2010 10:13 am
Location: Nova Scotia

Re: Topic pop-ups and the TopNav skin

Post by BedfordWriter »

Almost missed the question. Sorry for the delay.

Here's what it looked like for my project, with generic names substituted.

Code: Select all

<a href="../p_subfolder/ref_Topic.htm" class="MCTopicPopup MCTopicPopupHotSpot MCXref xref">Target text</a>
I can't promise that this will work for you. For myself, I've abandoned the pop-ups.
Ashman
Jr. Propeller Head
Posts: 4
Joined: Thu Jun 02, 2016 3:50 am

Re: Topic pop-ups and the TopNav skin

Post by Ashman »

I used this code and it works quite well! Most useful Thank you!
kgmarie
Propeller Head
Posts: 15
Joined: Thu Sep 15, 2016 9:32 am

Re: Topic pop-ups and the TopNav skin

Post by kgmarie »

When I do this workaround, it does work and I do get a popup. However, the popup still contains the normal TopNav heading (with the search bar and menu items, etc.), even when I use a blank Master Page. Any fix for this?
BedfordWriter
Sr. Propeller Head
Posts: 217
Joined: Wed Jun 23, 2010 10:13 am
Location: Nova Scotia

Re: Topic pop-ups and the TopNav skin

Post by BedfordWriter »

<shrug> Post-processing of the file, maybe? I dunno, I gave up trying to create the things.
jsandora
Propeller Head
Posts: 94
Joined: Thu Jun 23, 2011 5:56 am
Location: Boston, MA

Re: Topic pop-ups and the TopNav skin

Post by jsandora »

kgmarie wrote:When I do this workaround, it does work and I do get a popup. However, the popup still contains the normal TopNav heading (with the search bar and menu items, etc.), even when I use a blank Master Page. Any fix for this?
We ran into this same issue. We have "inline help" in our solutions, which consist of javascript modal windows that open within the solution (not a new browser tab or window) containing content pulled from an individual topic in the help system. We ran into the same issue where the nav bar appeared along the top of those inline help modals, which we didn't want.

Our solution - may not be the best, but it worked - was to create a new stylesheet that hid the nav bar. Had to do some hunting to figure out what it was since the nav bar code gets added to each topic upon build.

The new stylesheet is basically a clone of our main one with a few extra items added to hide the unwanted elements:

Code: Select all

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

.MCBreadcrumbsBox_0
{
	display: none !important;
}

.sideContent
{
	display: none !important;
}
Software Documentation Specialist (but really, Tech Writer)
andrewb
Jr. Propeller Head
Posts: 6
Joined: Sun Aug 16, 2015 3:40 pm
Location: Brisbane, Australia

Re: Topic pop-ups and the TopNav skin

Post by andrewb »

I've found a way to get pop-ups working in a TopNav output using a small Javascript file referenced in the TopNav skin's master page, a variation on jsandora's CSS, and BedfordWriter's <a> tag update. The script works by checking to see if the page is the parent, and if not applies a class to the <body> tag of the child (or pop-up) page.

The script:

Code: Select all

$(function () {
    if (window.self != window.top) {
        $(document.body).addClass("in-iframe");
        }
    })
The CSS:

Code: Select all

body.in-iframe nav.tab-bar,
body.in-iframe .MCBreadcrumbsBox_0,
body.in-iframe div.sideContent {
	/* Added to ensure these elements don't display in a popup window in a TopNav output */
	display: none;
}
Note: I don't actually use breadcrumbs in this particular output... so I haven't confirmed that the second line works.
scott
Propeller Head
Posts: 80
Joined: Tue Jan 03, 2006 6:35 pm
Location: miami
Contact:

Re: Topic pop-ups and the TopNav skin

Post by scott »

Hi all,
Just a quick update building on the great ideas above. This version should work OK for TopNav and SideNav and more recent versions of Flare. It will also open any links in the popup window back in the main window and close the popup window. It does not require any CSS tweaks.

The only issue I've seen is that if the user clicks the back button, the "popup" topic appears in the main window. There might be unusual edge cases where it acts up, which would explain why MC hasn't fixed it. I tested it in Chrome, Firefox, IE, Edge, UC, and Yandex using Flare 2020.

1 Create your popup hyperlinks/xrefs as normal.
2 Add this script to your master page:

Code: Select all

<script>
$( document ).ready(function() {
 $('.MCTopicPopupHotSpot').removeClass('MCTopic').addClass('MCTopicPopup');
});

if (window.self != window.top) {
  // topnav
  $('div.title-bar-container').css('display','none');

  // sidenav
  $('nav.sidenav-wrapper').css('display','none');
	
  // tablet+phone
  $('nav.title-bar').css('display','none');
 
  $('a').attr('target','_parent');
}
</script>
Have a good one!
Scott DeLoach
Certified Flare trainer/consultant - http://www.clickstart.net
* MadCap Flare: The Definitive Guide
* CSS to the Point
* HTML5 to the Point
https://bit.ly/2LQN11O

scott@clickstart.net
Certified MAD for Flare
jcollins
Propeller Head
Posts: 22
Joined: Tue Feb 01, 2011 1:00 pm

Re: Topic pop-ups and the TopNav skin

Post by jcollins »

That script works great, Scott! Thanks for that.

It does throw an error though, so though the popups work in my local build, they don't appear on my production site, which has a display restriction on errors. I just get an empty popup box. This occurs in all the usual browsers.

Here's the error:
Invalid element property: Topic Popup Close Button/Accessibility Label
getLanguageString @ MadCapAll.js:57
I'm wondering if there's something that needs to be added to the CSS/JS to address that. Any ideas?

Thanks in advance for any suggestions!
DavidJGross
Propeller Head
Posts: 17
Joined: Thu Mar 12, 2020 6:54 am

Re: Topic pop-ups and the TopNav skin

Post by DavidJGross »

Thanks for this. It's working for to provide me the popups, but I'm still seeing the frame. I don't suppose you've tried this again since the latest update to see if it still works as expected or if I'm just doing something wrong?

I don't understand why MadCap wouldn't support popups in those skins.
DavidJGross
Propeller Head
Posts: 17
Joined: Thu Mar 12, 2020 6:54 am

Re: Topic pop-ups and the TopNav skin

Post by DavidJGross »

I figured it out.

I had put that script in the header because the only other script I'd ever used went in the header. I decided to move it to after the body proxy to see what would happen, and that resolved the issue. Just a note for the next person who stumbles into this issue.
jbkalla
Propeller Head
Posts: 57
Joined: Tue Nov 06, 2012 11:53 am
Location: Denver, CO, USA
Contact:

Re: Topic pop-ups and the TopNav skin

Post by jbkalla »

jsandora wrote: ... The new stylesheet is basically a clone of our main one with a few extra items added to hide the unwanted elements:

Code: Select all

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

.MCBreadcrumbsBox_0
{
	display: none !important;
}

.sideContent
{
	display: none !important;
}
@jsandora: Thank you for this! It fixed my issue!
mdpais-c
Propeller Head
Posts: 20
Joined: Wed May 13, 2020 11:56 am

Re: Topic pop-ups and the TopNav skin

Post by mdpais-c »

Does anyone know how to set a fixed width/height for the pop-up generated by this script?
scott wrote:

Code: Select all

<script>
$( document ).ready(function() {
 $('.MCTopicPopupHotSpot').removeClass('MCTopic').addClass('MCTopicPopup');
});

if (window.self != window.top) {
  // topnav
  $('div.title-bar-container').css('display','none');

  // sidenav
  $('nav.sidenav-wrapper').css('display','none');
	
  // tablet+phone
  $('nav.title-bar').css('display','none');
 
  $('a').attr('target','_parent');
}
</script>
mdpais-c
Propeller Head
Posts: 20
Joined: Wed May 13, 2020 11:56 am

Re: Topic pop-ups and the TopNav skin

Post by mdpais-c »

mdpais-c wrote:Does anyone know how to set a fixed width/height for the pop-up generated by this script?
Figured it out. Set it in div.MCTopicContainer
Post Reply