Resizing Popups in WebWorks Help 5.0

Description

The way popups are defined in WebWorks Help 5.0, the dimensions are fixed. If you have different types of popups (e.g., glossary terms, contextual descriptions, etc.), you may end up with popups that are too tall or content that is cut off at the bottom. This is a result of a known defect (#WWEP2377), and we are working to resolve it before the next ePublisher release. To remedy this situation for now, this article will describe a series of overrides designed to better control the size of your popups.

Contents

  1. Resizing Popups in WebWorks Help 5.0
    1. Description
    2. Setting the Width
    3. Setting the Height
    4. Adding a Scroll Bar
      1. Prevent Popup Auto-Hide
      2. Adding a Close Button
    5. Examples

Setting the Width

There is a variable built into the WebWorks Help 5.0 format that allows the user to define the width of all popups. By default, popup windows are 200px wide. However, you can change this by following these steps:

  1. Perform a project override on a file called wwhelp_settings.xml, located by default in the ePublisher Pro installation directory here:

    • ePublisher Pro/Formats/WebWorks Help 5.0/Skins/Lobby_Blue/

      • Where Lobby_Blue is the name of your output skin.

      • Note: For more information on overrides, please see our online TechNote article here: Creating Project Overrides

  2. When the file has been copied into the correct location in your project folder, open it with an xml- or text-editing application, such as NotePad.

  3. Locate the <Popups> section.

  4. Change the value in the following line to suit your popup width needs:

    • <Size width="200" />

    • Note: Change the width value as needed. This will specify a width in pixels. You may also use a percentage to resize relative to the available space in the browser window.

  5. Save wwhelp_settings.xml and regenerate your output to apply the changes.

Setting the Height

You may want to explicitly define the height of your popups if the default value is insufficient. Since there is no built in setting to define the height, I have found the easiest way to do it is to add a 'height' attribute when we write the <iframe> tag.

  1. Perform a project override on a file called help.js, located by default in the ePublisher Pro installation directory here:

    • ePublisher Pro/Formats/WebWorks Help 5.0/Files/wwhelp/wwhimpl/common/scripts/

  2. When the file has been copied into the correct location in your project folder, open it with a text editor, such as NotePad.

  3. In the WWHHelp_ShowPopup function, find this line which defines the HTML for the popup iframe: PopupHTML = "<iframe id=\"WWHPopupIFrame\" frameborder=\"0\" scrolling=\"no\" width=\"" + this.mPopup.mWidth + "\" src=\"" + Src + "\" onload=\"javascript:WWHPopupLoaded()\"></iframe>";

  4. Add the inline height attribute like this:

    PopupHTML = "<iframe id=\"WWHPopupIFrame\" frameborder=\"0\" scrolling=\"no\" height=\"150\" width=\"" + this.mPopup.mWidth + "\" src=\"" + Src + "\" onload=\"javascript:WWHPopupLoaded()\"></iframe>";

    • Note: Change the height value as needed. This will specify a height in pixels. You may also use a percentage to resize relative to the available space in the browser window.

  5. Save help.js and regenerate output to apply the changes.

This is fine for resizing your popups, but the problem remains that you may need popups of varying sizes, or at least a scroll bar to show all the text in a given popup.

Adding a Scroll Bar

The procedure for adding a scroll bar to your popups is similar to that for changing the height. In fact, you will be editing the same line of code, so you can do it at the same time.

In Step 4 of the procedure above, change the scrolling attribute from no to auto, so the line looks like this:

Then, save the file and regenerate your output.

Next, you'll need to ensure that the popup window does not close when you move the mouse to scroll.

Prevent Popup Auto-Hide

By default, a popup window is set to appear when you hover over the hot text in your output. Then, if you move your mouse away from that text, the window will close automatically. This is in contrast to the Related Topics window, which pops up when you click the text, and closes when you click a button. To keep the popups from hiding automatically when you move your mouse, use these steps:

  1. Perform a project override on a file called content.xsl, located by default in the ePublisher Pro installation directory here:

    • ePublisher Pro/Formats/WebWorks Help 5.0/Transforms/

  2. When the file has been copied into the correct location in your project folder, open it with an xsl- or text-editing application, such as NotePad.

  3. Locate the <!-- Popup Link --> section.

  4. Remove the following bit of code:

    {{{ <xsl:attribute name="onMouseOut">

    • <xsl:text>WWHHidePopup();</xsl:text>

    • </xsl:attribute>}}}

  5. Save content.xsl and move on to the next section.

Adding a Close Button

If you add a scroll bar and prevent your popups from hiding when you move the mouse, then you'll need a mechanism for closing the popup window. With this procedure, we'll add a simple hyperlink with the JavaScript call to hide the popup. You may expand on this example to provide a more aesthetically-pleasing close button if you prefer.

  1. Perform a project override on a file called popups.xsl, located by default in the ePublisher Pro installation directory here:

    • ePublisher Pro/Formats/WebWorks Help 5.0/Transforms/

  2. When the file has been copied into the correct location in your project folder, open it with an xsl- or text-editing application, such as NotePad.

  3. Locate the <!-- Paragraphs --> section.

  4. Above that section, add this block of code: {{{ <!-- Custom unload code -->

    • <!-- -->

      • <html:div>

        • <xsl:attribute name="style">

          • <xsl:text>width:100%;text-align:right;</xsl:text>

          </xsl:attribute> <html:a>

          • <xsl:attribute name="href">

            • <xsl:text>javascript:parent.WWHHidePopup()</xsl:text>

            </xsl:attribute> <xsl:text>[X]</xsl:text>

          </html:a>

        </html:div>}}}

  5. Save popups.xsl and regenerate your project to apply the changes.

Examples

Below you will find an example project with FrameMaker source and copies of all the referenced files. These files are compatible only with ePublisher Pro version 9.2.2.

Note that the example project was created using the simple overrides listed above. I set the Body paragraph's popup page style to Popup, which has breadcrumbs disabled, and the close button is added at the top of the main content section. You may need to get creative with content.xsl and/or Page.asp to get the look of the popups that you desire.

HelpCenter/Tips/ResizePopups/ePublisher 9.2.2 (last edited 2008-02-20 23:14:09 by AdamGoldberg)