Custom window size for image map/hyperlink popups

This forum is for all Flare related Tips and Tricks.
Have a tip or trick you use while working in Flare? Share it here.
Post Reply
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Custom window size for image map/hyperlink popups

Post by LTinker68 »

While creating a custom window size for my popups, I discovered to my dismay that modifying the mc-popup-width and mc-popup-height properties of the "Popup" class under the <a> tag in the stylesheet had absolutely no affect when the popup was being launched from an image map. Probably because image maps don't use an <a> tag and MadCap must have set up those properties to only work with the <a> tag.

I figured out a way to get a custom window size for popups. It has the added benefit of not only working with image maps, but also with <a> tags, so you don't have to set the mc-popup-width and mc-popup-height properties on that tag, if you don't want to.

Anyway, here are the steps to get a custom window size for popups, including popups called from image maps.
  1. If you use a master page for your main topics and don't want the popups to use the same master page, then create a new master page and set it up the way you want it. For instance, if you have breadcrumbs in your main topics, then remove the breadcrumbsProxy from the popups master page, because it'll look a bit odd, otherwise. Name the new master page something obvious, like popupMaster.
  2. Open the Stylesheet Editor and scroll down to the html tag.
  3. Left-click on the html tag and click the Add Class icon. Give the new class a name, such as popups.
  4. In the Advanced view of the Stylesheet Editor, set the display category to Show: Property Group.
  5. Expand the Box group and set the width and height properties to whatever dimensions you want the popup window to be. Setting the width and height fields to "auto" will have the popup window auto-size based on the content.
  6. Expand the Unclassified group and set the mc-master-page property to the name of the master page created in step 1, if one was used; otherwise leave this property blank.
  7. Save the stylesheet.
  8. In the Content Explorer, right-click on the popup topic and select Properties from the menu that appears.
  9. In the Topic Properties screen, set the Topic Style Class field to popup, or whatever name you gave the html class created in step 3.
  10. Click Ok.
  11. Open the topic that contains the image map or text that will link to the popup topic. Create the hyperlink using the appropriate method, making sure to set the Target Frame field to Popup Window.
  12. Save the topic and build the project. Test the link.
If you want to have several window sizes for varying amounts of content, then repeat the steps above as many times as necessary. Just select specify a new name in step 3, set different widths and heights in step 5, and select the corresponding html class in step 9.

As noted in step 5, setting the height and width properties to "auto" will automatically adjust the window size to the content. Scrollbars only appear in popups with lots of content. You might think this would be the same as not going through any of the steps above, but the auto sizing through this method has better results, which leads me to think that somewhere Flare is specifying a set width and height for its "auto"-sized popups.

One other note... If you're creating a new topic that you know is going to be used as a popup topic, then I recommend holding off on steps 8 and 9 until you've finished adding all the content to the popup topic. The XML Editor will honor the width and height set in step 5 above, so even though the XML Editor appears to have a lot of room to type in, it will in fact limit your typing to the specified dimensions. If your html tag is set to a width of 400px, for instance, then you'll only get a few characters to appear on each line as you type, depending on the size of the font. It's a bit odd writing that way, so if it's too annoying you might want to finish writing the content before performing steps 8 and 9.

2/27/08: Made an edit to step 5 and added a note about it.

3/13/08: Additional note... If you're using a mix of the "Popup" <a> class and the custom <html> tag dimensions in your project, make sure you don't try to use them at the same time. For instance, assume PopupA has its <html> tag set to 400px by 500px and the <a class="Popup" ...> is set to dimensions of 300px by 400px. If you create a text hyperlink (e.g., "Click here to...") to PopupA and set the hyperlink to use the "Popup" class, then the text in the topic that contains that text hyperlink may get screwed up. In a test, where the end of the first line of text had a text hyperlink and the next line contained an image, there was a huge gap in the spacing. When I changed the text hyperlink to point to a different topic that didn't have a custom html tag, then there was no gap. So keep that in mind... Don't mix the effects in a text hyperlink.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
dwag
Sr. Propeller Head
Posts: 158
Joined: Tue Feb 05, 2008 2:36 pm

Re: Custom window size for image map/hyperlink popups

Post by dwag »

I read your post with great interest, although my problem is a variation: I have a popup link in one topic that calls another topic containing only an image. In the stylesheet, I changed the box height and width of the a.popup to Automatic, but when I test the output, the image still extends beyond the boundaries of the popup. Once again, am I wandering down the wrong path?
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: Custom window size for image map/hyperlink popups

Post by LTinker68 »

There are some other things you have to consider when you're using the a.popup method. The results below show the different issues. For each of them, assume you're using a graphic that measures 400px wide by 600px tall. And this is behavior observed in Firefox and IE6. IE7 should theoretically be closer to how FF displays it, but you'll have to test that yourself (I don't have IE7).

Scenario 1: Auto Height/Width
When mc-popup-height and mc-popup-width are both set to "auto", vertical scrollbars appear in both browsers. Based on the other scenarios, either the browsers add a LOT of internal padding (browser wall to graphic edge) or Flare implements "auto" in a different way. Or maybe it depends on if you explicitly set your HTML tag to 100% height and 100% width -- I didn't test that.

Scenario 2: Fixed Height/Width
Set mc-popup-height to 650px and mc-popup-width to 450px. In FF, the graphic width displays fine, but the bottom of the graphic is cut off, although there is a little padding between the graphic edge and the bottom of the window. You can only tell the graphic has been cut off if you know what's missing from the bottom of the graphic. And there are not scrollbars. In IE6, the graphic width displays fine and the graphic height displays fine, but there's a vertical scrollbar, so you have to scroll down to see the bottom of the graphic.

Scenario 3: Fixed Height/Width with "Popup" Class Applied
Same as Scenario 2, except that in the Insert Hyperlink screen, in addition to selecting the popup window as the target, you also select the a.Popup style as the stylesheet class. In both browsers, the graphic displays in full, both vertically and horizontally. Note that in IE6, though, you need to add extra height to the window. 650px for a 600px graphic worked, but 625px didn't work. So you'll have a little extra space in one browser that you won't have in the other browser.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
dwag
Sr. Propeller Head
Posts: 158
Joined: Tue Feb 05, 2008 2:36 pm

Re: Custom window size for image map/hyperlink popups

Post by dwag »

Great info. Thanks much.
twood
Jr. Propeller Head
Posts: 3
Joined: Thu Aug 10, 2006 5:29 am

Re: Custom window size for image map/hyperlink popups

Post by twood »

For whatever reason I cannot get this procedure to work. I don't use Master Pages for my main topics, so I skipped the first step. I opened the stylesheet that is associated with the topic that I want to popup, and applied the class, height, and width settings. Then I completed steps 8 and 9. The popup still comes up at it's original size. I'm not sure what I'm missing.

Is anyone else having a problem? I really need this option, and I was so glad to see these instructions.
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: Custom window size for image map/hyperlink popups

Post by LTinker68 »

I just tested it without using a master page and it worked. What do you mean that you opened the stylesheet associated with the popup topic? Do you have a different stylesheet just for that topic?
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
twood
Jr. Propeller Head
Posts: 3
Joined: Thu Aug 10, 2006 5:29 am

Re: Custom window size for image map/hyperlink popups

Post by twood »

Yes. I have two stylesheets. One for regular topics and one for the topics that contain tables that pop up from an image map. I don't remember why I did it this way, but at the time there was a good reason. Is it odd to have more than one stylesheet?
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: Custom window size for image map/hyperlink popups

Post by LTinker68 »

twood wrote:Is it odd to have more than one stylesheet?
Not odd, per se, but generally not necessary. Some people have multiple stylesheets when they have multiple customers and it's easier, organizationally, to keep different stylesheets for each customer.

However, I think I know what may be happening. Are you by any chance using Internet Explorer, IE6 specifically? And are the popup topics mainly comprised of text only? Neither IE6 nor Firefox had problems with using a secondary stylesheet for the popup topic. However, whereas FF honored the dimensions set for the height and width no matter what the content was (only adding scrollbars when necessary), IE6 apparently decides on its own that less-is-better. When the popup topic had a line of text, the popup window in IE6 was very small. When the popup topic had a paragraph of text, the popup window was bigger, but still not the values I had set (400px square). When the topic contained a large graphic, then it went to the set dimensions and added the scrollbars.

If you use the popup class in the stylesheet and set the dimensions there, then IE6 is better about complying with the dimensions. But if you're using an image map and my method, then IE6 seems to override the dimensions in the HTML tag unless there is enough content to justify the dimensions.

I don't have IE7, so I don't know if it behaves in the same manner.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
twood
Jr. Propeller Head
Posts: 3
Joined: Thu Aug 10, 2006 5:29 am

Re: Custom window size for image map/hyperlink popups

Post by twood »

I was using IE7, so I downloaded FF to see if that would work. It still does not, so I assume it's human error on my part, not a browser issue. I also opened a brand new project and started with the factory template css. Here are the steps I took:

1. Open the style sheet and scroll to html.
2. Click on html and then click on Add Class.
3. Enter the name popups and click ok.
4. Click popups, open the Box group, and change the width and height.
5. Save the css.
6. Right click on the topic that I want to be the popup, select Properties, and select popups under Topic Style Class. Click ok. This changes the popup topic, when viewed, to one word on each line. (This is right?)
7. Open the topic that contains the image map, link to the popup topic, choose Popup Window, and click ok.
8. Save. Build. Test. Comes out the small size.

I added a large paragraph and a large graphic. Much larger than 400 x 400. I know I'm missing something, but can't figure out what.

Thanks for your help.

I'm using:

Flare 3.1.0
Windows XP Pro
IE7
Firefox 2.0.0.12
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: Custom window size for image map/hyperlink popups

Post by LTinker68 »

twood wrote:6. Right click on the topic that I want to be the popup, select Properties, and select popups under Topic Style Class. Click ok. This changes the popup topic, when viewed, to one word on each line. (This is right?)
Depends on the dimensions you set, but yes, it'll do that. The XML Editor doesn't quite display it as it'll really appear. Which is why I recommend specifying the class last.

Do you have any dimensions, even auto, set on the body tag? That will override what's set on the html tag since the body tag is closer to the text than the html tag. Although if it happens to you on a brand new test project then that's probably not it.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
davidgolden99
Propeller Head
Posts: 29
Joined: Thu Apr 10, 2008 11:17 am

Re: Custom window size for image map/hyperlink popups

Post by davidgolden99 »

Expand the Unclassified group and set the mc-master-page property to the name of the master page created in step 1, if one was used; otherwise leave this property blank.
I couldn't find this property at first. I had to select Show:Assorted Relevant Properties.
vrouse
Jr. Propeller Head
Posts: 5
Joined: Thu Aug 30, 2007 11:37 am

Re: Custom window size for image map/hyperlink popups

Post by vrouse »

I realize this is an old post, but I did not have any luck using these instructions in Madcap Flare 8...my output is html5. Anything new or different in this newer version of software or for the new output? Thank you.
Nina Esile
Sr. Propeller Head
Posts: 153
Joined: Tue May 05, 2009 1:07 pm

Re: Custom window size for image map/hyperlink popups

Post by Nina Esile »

Do any updates help with this issue?

I'm using Flare 10.2.2 and can't get the popup to appear as I want.

The interesting thing is that the topic, once I've applied the popup master sheet, actually displays as the instructions say, which is to say that the text is displayed in the XML Editor as pretty much having one word per line. So I know at least that much works.

But when I compile, it just doesn't work. The page looks just like any other popup page. Something's getting lost in translation. I'm going to look into a conflict between the <a> tag and the <html> tag.

I have looked at the compiled help and one thing I did see is that the class being called is MCTopicPopup. Does that make sense?
kmiz
Propeller Head
Posts: 23
Joined: Mon Apr 14, 2008 11:46 am

Re: Custom window size for image map/hyperlink popups

Post by kmiz »

I wasn't able to get the method described in this post to work, so I contacted MadCap Technical support who provided a different workaround.
I have documented that workaround here:
viewtopic.php?f=6&t=27724
Hope this is helpful.
Pepto
Jr. Propeller Head
Posts: 2
Joined: Tue Jul 04, 2017 12:53 am
Contact:

Re: Custom window size for image map/hyperlink popups

Post by Pepto »

I made it step by step but when I come to: "In the Content Explorer, right-click on the popup topic and select Properties from the menu that appears" my properties button is not active. What can be a problem? Thank you.
sparklyfirefly
Propeller Head
Posts: 20
Joined: Thu Apr 14, 2016 1:42 am

Re: Custom window size for image map/hyperlink popups

Post by sparklyfirefly »

Please see viewtopic.php?f=9&t=34074&p=145644#p145644 for my (2022) fix for this issue.
Post Reply