Universal NS-Headers, Final Version - Printing Solved

[Tim Green]

Update 30 October: The script for the header has now been modified to eliminate a small bug in HTML Help, which generated a script error if you tried to make the help viewer window so small that you could no longer see the topic at all.

Update 15 July: The current final verstion of the new non-scrolling header template is attached to this topic. As far as we can see all problems have now been ironed out. Printing now also works perfectly for multiple topics in HTML Help. See this post for details of the solution.

You can see it in action in an updated version of the H&M online help here (note that it has been integrated with H&M's own heavily-edited template in this example, the navigation buttons, gradient background in the header and header shadow are not included in the standard version).

The template is entirely self-contained and can be used in all HTML-based output formats. It works equally well in HTML Help and all browsers. If JavaScript is turned off a normal scrolling header is displayed. It is fully printable (navigation elements are excluded from the printout automatically) and you can activate a Print this Topic link by uncommenting a block of code (instructions are included in the template).

Non-scrolling does not work in eBooks because they don't support JavaScript but code is included to make sure that everything works transparently with normal headers and the correct spacing when you compile to eBooks.

How to use the template:

1. Go to Project Properties - HTML Help /or/ Browser-based Help - Topic Pages (same shared templates in both places) and select "Let me edit HTML code directly".
   
2. Select the "Main" template in the HTML Template for Window Type: field (this is the default template for all topics). Right-click in the editing box and select Select All and DELETE everything.
   
3. Paste the new template into the editing box and click on Apply to save. Repeat for your other templates if you have defined other help window types/templates in addition to Main.

That's all you have to do -- there are no external files or settings you have to make.

[Tim Green]

There is an odd printing problem with this template in the HTML Help viewer:

For some reason, possibly a bug in the HTML Help viewer, script error messages are displayed and must be clicked through for every single topic when you print entire chapters of topics using this template. These error messages appear even when all script debugging and error messsages are explicitly turned off in MSIE (which is used to render HTML in HTML Help).

Once you have clicked through the error messages all the topics in the chapter print perfectly, with all formatting, so nothing is actually wrong.

Single topics print perfectly without error messages. All topics contain exactly the same scripts and the scripts do not contain any errors. If the errors were really there they would also show up during normal viewing and printing, and in other browsers, and they don't. All very mysterious.

As I said, I suspect some problem in the HTML Help viewer but if anyone has any ideas on this I'd love to hear them. Very frustrating...

[Tim Green]

Microsoft Help MVP Rob Cavicchio had a look at the code and found the problem and provided this analysis and an elegant solution:

What's happening is that the HTML is being opened in a hidden window for printing, and so its calculated clientHeight is 0, but the header is still getting a positive client height because it still has content. So the script tries to set the content height to the body minus the header. This comes out to a negative number, which is invalid.

You could conditionalize just the problem statement (the one that sets the height of 'idcontent'), but there's actually no reason to have a nonscrolling region in the printout anyway, so I'd just conditionalize the entire call to nsrInit. Here's how to do it:

Code: Select all

var lastSlashPos = document.URL.lastIndexOf("/") >
document.URL.lastIndexOf("\") ? document.URL.lastIndexOf("/") :
document.URL.lastIndexOf("\");
if( document.URL.substring( lastSlashPos + 1, lastSlashPos + 4
).toLowerCase() != "~hh" )
{
    nsrInit();
}

This works perfectly and I've now updated the final version of the template with this change. Printing now works without any trouble in CHM, both for single and multiple topics. Woohoo!!!

Many, many thanks to Rob for taking the time to solve this problem!

[vanwerkum]

Tim,

The templates in the following topics are not the same:

http://helpman.it-authoring.com/viewtopic.php?t=4549

http://helpman.it-authoring.com/viewtopic.php?t=4585

[Tim Green]

Van,

The templates in the following topics are not the same:

That's right, when I created a new thread for the "final" version I added some additional cosmetic tweaks. For example it was important to add code exclusions for eBooks in some places and I also tiedied up the styles in print mode. I've now updated the version in the original thread too so that both are the same.

[tefoley]

I'm getting nothing when attempt to download.

??

[Dean Whitlock]

I have the same problem. I'm using MSIE, which could be the cause. When I click the Download link, MSIE opens a new window and then stops with the page apparently blank, except for "Top Previous Next" at upper left. What I discovered was that MSIE is interpreting the file as a web page instead of downloading it. If you're having the same problem, here's the quick fix:

While viewing the resulting blank page in MSIE, select View > Source. The viewer shows the html code for the blank page, which is the final version of the non-scrolling header template code. You can copy and paste this into a text file and from there into your project properties.

Hope this helps,
Dean

[Tim Green]

I'm getting nothing when attempt to download.

Dean's right, it's a problem with Internet Explorer. Not only does it try to interpret the file as HTML when you click on the download link, it also changes the extension from .TXT to .HTM when you right-click on the link and select Save Target As... to download it.

I've replaced the file with a ZIP archive for everyone who has no choice but to use Internet Explorer (for example, at work). Everyone else please use a real browser, like Firefox, Opera or Mozilla.

[Tek]

I would like to incorporate the non-scrolling headers for HTML help but I have already modified my topic pages for other features. Can someone please outline to me what portions of the code provided in the attachment needs to be put into already existing code? I'm not great with HTML coding and would appreciate any help anyone can provide.

Thanks.

Edit: Here is my current topic page code in case anyone feels they want to do this.

Code: Select all

<%DOCTYPE%>
<html>
<head>
<title><%TITLE%></title>
   <meta name="generator" content="Help & Manual">
   <meta name="keywords" content="<%TOPIC_KEYWORDS%>">
   <meta http-equiv="Content-Type" content="text/html; charset=<%DOCCHARSET%>">
   <link type="text/css" href="<%STYLESHEET%>" rel="stylesheet">
   <style type="text/css">
      a { color: #0000FF; text-decoration: none }
      a:visited {color: #0000FF }
      a:hover {color: #E4641C; text-decoration: underline }
      a.weblink {color: #0000FF; text-decoration: underline }
      a.weblink:visited {color: #0000FF}
      a.weblink:hover {color: #E4641C }
      a.popuplink {color: #FF0000; text-decoration: none}
      a.popuplink:visited {color: #FF0000}
      a.popuplink:hover {color: #FF0000; text-decoration: underline}
      a.filelink {color: #04BC14; text-decoration: none}
      a.filelink:visited {color: #04BC14}
      a.filelink:hover {color: #04BC14; text-decoration: underline}
      .fsmall {
         font-size: 10px;
         font-family: Verdana, Helvetica, sans-serif;
         text-align: center;
         margin: 10px 0px 0px 0px;
      }
      .crumbs {font-size: 8pt; margin-bottom: 3px; margin-top: 0px; color: #FFFFFF}
      .crumbs a {text-decoration: underline; color: #FFFFFF}
      .crumbs a:visited {text-decoration: underline; color: #FFFFFF}
      .crumbs a:hover {color: #F4BC5C}
</style>

<IF_CHM><!-- NS header only works in HTML HELP-->
   <style type="text/css" media="screen">
        #nsr
         {
         padding: 0px 0px 0px 0px;
         border-bottom: none;
         background: <%TOPIC_HEADER_BGCOLOR%>;
         vertical-align: top;
         z-index: 2;
         visibility: visible;
         left: 0;
         top: 0;
         position: absolute;
         width: 100%;
         }
        #mainbody
         {
         left: 0;
         top: 0px;
         margin: 0;
         position: absolute;
         padding: 0px;
         overflow: visible;
         width: 100%;
         height: 100%;
         z-index: 1;
         background-repeat: no-repeat;
         background-position: bottom right;
         background-attachment: fixed;
         }
   </style>
   <style type="text/css" media="print">
        #nsr
         { visibility: none; }
        #mainbody
         { overflow: visible; }
   </style>
   <script type="text/javascript" language="JavaScript" src="nonscroll.js"></script>
</IF_CHM>

<!-- Bookmark - JavaScript -->
<IF_HTML>
<script type="text/javascript" language="JavaScript">
   var urlAddress = "http://<%ONLINEHELPLINK%>/index.html?<%HREF_CURRENT_PAGE%>";
   var pageName = "<%TITLE%> - <%TOPIC_TITLE%>";
   function addToFavorites() {
   if (window.external) {
      window.external.AddFavorite(urlAddress,pageName) }
   else {
      alert("Sorry! Your browser doesn't support this function."); }
   }
</script>

<!-- Remove frame spacing - JavaScript -->
<script type="text/javascript">
function remove_framespacing () {
   var frameset = top.document.getElementsByTagName('frameset')[0];
   frameset.frameSpacing = '0px';
   frameset.rows = "*";
}
</script>
</IF_HTML>
<!-- Page Comments - JavaScript -->
<script language="JavaScript">
   function doExpandComments(paraNum, imageNum) {
   if (paraNum.style.display=="none")
      {paraNum.style.display=""; imageNum.src="minus.gif"}
   else
      {paraNum.style.display="none"; imageNum.src="plus.gif"}
   }
</script>
</head>

<!-- Body -->
<IF_CHM><body scroll="no" style="margin: 0px 0px 0px 0px; background: <%TOPIC_TEXT_BGCOLOR%>;"></IF_CHM><IF_HTML><body onload="remove_framespacing();" style="margin: 0px 0px 0px 0px; background: <%TOPIC_TEXT_BGCOLOR%>;"></IF_HTML>
<IF_TOPIC_HEADER>
<IF_CHM><div id="nsr"></IF_CHM>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0px; color: <%TOPIC_HEADER_BGCOLOR%>; background: url(header_bg_blue.jpg);">
  <tr valign="bottom">
    <IF_CHM><td align="left" valign="bottom" style="padding: 6px 6px 6px 10px;"></IF_CHM><IF_HTML><td align="left" valign="bottom" style="padding: 6px 6px 0px 10px;"></IF_HTML><p class="crumbs"><b>Navigation:</b>&nbsp;
      <IFNOT_TOPIC_BREADCRUMBS>&raquo;No topics above this level&laquo;</IFNOT_TOPIC_BREADCRUMBS>
      <IF_TOPIC_BREADCRUMBS><%TOPIC_BREADCRUMBS%>&nbsp;&gt;</IF_TOPIC_BREADCRUMBS></p><%TOPIC_HEADER%></td>
    <td align="right" valign="middle" style="padding: 0px 10px 0px 0px;">
     <span style="font-size: 9pt">
     <IF_PREVIOUS_PAGE><a href="<%HREF_PREVIOUS_PAGE%>"
        onmouseover="document.images.prev.src='btn_prev_h.gif'"
        onmouseout="document.images.prev.src='btn_prev_n.gif'"
        ><img name=prev src="btn_prev_n.gif" border=0 alt="Previous"
        ></a></IF_PREVIOUS_PAGE><IFNOT_PREVIOUS_PAGE><img src="btn_prev_d.gif" border="0"
        ></IFNOT_PREVIOUS_PAGE><a href="<%HREF_PARENT_CHAPTER%>"
        onmouseover="document.images.main.src='btn_home_h.gif'"
        onmouseout="document.images.main.src='btn_home_n.gif'"
        ><img name=main src="btn_home_n.gif" border=0 alt="Parent Chapter"
        ></a><IF_NEXT_PAGE><a href="<%HREF_NEXT_PAGE%>"
        onmouseover="document.images.next.src='btn_next_h.gif'"
        onmouseout="document.images.next.src='btn_next_n.gif'"
        ><img name=next src="btn_next_n.gif" border=0 alt="Next"
        ></a></IF_NEXT_PAGE><IFNOT_NEXT_PAGE><img src="btn_next_d.gif" border="0"></IFNOT_NEXT_PAGE>
     </span>
    </td>
  </tr>
  <tr>
     <IF_HTML><td style="padding: 0px 0px 4px 10px; font-size: 7pt;" align="left" valign="bottom"><font color="#FFFFFF">http://<%ONLINEHELPLINK%>/index.html?<%HREF_CURRENT_PAGE%></span></td></IF_HTML>
     <IF_HTML><td class="crumbs" style="padding: 0px 11px 4px 0px; font-size: 7pt; text-decoration: none;" align="right"><a href="javascript:addToFavorites()"><img src="../_common_files/favadd.gif" border="0" alt="Click here to add this page to your favorites">Add To Favorites</a></span></td></IF_HTML>
  </tr>
  <tr><td colspan="2" height="4" style="background: url(main_top.jpg)";></td></tr>
</table>
</div>

<!-- Body -->
<IF_CHM><div id="mainbody" name="top"></IF_CHM>
<div style="margin: 0px 0px 0px 0px;"><IF_CHM><a name="top"></a></IF_CHM>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0px;">
   <tr><td style="padding: 6px 10px 1px 10px;"><%TOPIC_TEXT%></td></tr>
   <tr>
      <td style="padding: 0px 0px 0px 0px;">
         <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0px;">
            <tr><td style="padding: 5px 10px 3px 10px; font-size: 7pt;" align="right" bgcolor="#FFFFFF"><a href="#top">back to top<img src="../_common_files/arrow_px_up.gif" border="0" alt="back to top"></a></td></tr>
            <tr><td style="padding: 0px 10px 0px 10px;"><hr size="1" /></td></tr>
            <tr><td style="padding: 0px 10px 5px 10px;">
               <a onclick="doExpandComments(section999, section999_icon)" href="#dummy"><img src="plus.gif" id="section999_icon" border="0" style="text-decoration: none;" alt="Click here to display the current page information">Page Information</a>
                  <div id="section999" style="display: none;">
                     <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0px;">
                        <tr>
                           <td width="5%" style="padding: 5px 0px 0px 0px; font-size: 8pt;" align="left" bgcolor="#FFFFFF"><b>Document&nbsp;version:</b></td>
                           <td style="padding: 5px 0px 0px 0px; font-size: 8pt;" align="left" bgcolor="#FFFFFF">&nbsp;&nbsp;&nbsp;<%VERSION%></td>
                        </tr>
                        <!-- <tr>
                           <td width="5%" style="padding: 0px 0px 5px 0px; font-size: 8pt;" align="left" bgcolor="#FFFFFF"><b>Page&nbsp;last&nbsp;updated:</b></td>
                           <td style="padding: 0px 0px 3px 0px; font-size: 8pt;" align="left" bgcolor="#FFFFFF">&nbsp;&nbsp;&nbsp;<%TOPICLASTEDITED%></td>
                        </tr> -->
                     </table>
                  </div>
               </td></tr>
         </table>
      </td>
   </tr>
   <tr>
      <td height="4" style="background: url(main_bottom.jpg)";></td>
   </tr>
</table>
</div>

<!-- Footer -->
<div style="margin: 0px 0px 0px 0px;">
   <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0px; color: <%TOPIC_HEADER_BGCOLOR%>; background: url(header_bg_blue.jpg);">
  <tr>
    <td align="left" style="padding: 6px 0px 6px 10px;">
         <span style="font-size: 8pt">
         <b>
            <IF_CHM><a href="introduction.htm"></IF_CHM><IF_HTML><a href="introduction.php"></IF_HTML><font color="#FFFFFF">Home</a>
            <IF_CHM>•&nbsp;<a href="online_help.htm"><font color="#FFFFFF">Online Help</a></IF_CHM>
         </b>
         </span>
    </td>
    <td align="right" style="padding: 6px 10px 6px 0px;">
      <span style="font-size: 8pt">
      <b>
         <IF_PREVIOUS_PAGE><a href="<%HREF_PREVIOUS_PAGE%>"><font color="#FFFFFF">&laquo;&nbsp;Previous</a></IF_PREVIOUS_PAGE>
         <IFNOT_PREVIOUS_PAGE><font color="#A7A7A7">&laquo;&nbsp;Previous</IFNOT_PREVIOUS_PAGE>
         <font color="#FFFFFF">•
         <a href="<%HREF_PARENT_CHAPTER%>"><font color="#FFFFFF">Parent&nbsp;Topic</a>
         <font color="#FFFFFF">•
         <IF_NEXT_PAGE><a href="<%HREF_NEXT_PAGE%>"><font color="#FFFFFF">Next&nbsp;&raquo;</a></IF_NEXT_PAGE>
         <IFNOT_NEXT_PAGE><font color="#A7A7A7">Next&nbsp;&raquo;</IFNOT_NEXT_PAGE>
       </b>
      </span>
    </td>
  </tr>
  <tr><td colspan="2" style="height: 4px; background: url(main_top.jpg)"></td></tr>
  <tr>
    <IF_HTML><td align="left" style="padding: 5px 2px 12px 2px;" bgcolor="#FFFFFF"><span style="font-size: 7pt;">&nbsp;&nbsp;<a href="<%PDFLINK%>"><img src="../_common_files/pdf2.jpg" border="0" alt="Click here to download the print version of this help file">Download Print Version</a></span></td></IF_HTML>
    <IF_CHM><td align="left" style="padding: 5px 2px 12px 2px;" bgcolor="#FFFFFF"><span style="font-size: 7pt;">&nbsp;&nbsp;</span></td></IF_CHM>
    <td align="right" style="padding: 5px 10px 12px 2px;" bgcolor="#FFFFFF">
         <span style="font-size: 7pt; text-decoration: none">&nbsp;&nbsp;<%COPYRIGHT%>&nbsp;&nbsp;<a href="http://www.omt.net" target="_blank"><img src="../_common_files/omt_tiny.png" width="50" height="15" border="0" alt="Click here to jump to omt.net"></a></span>
    </td>
  </tr>
</table>
</div>
</body>
</html>


[Tim Green]

Hi Tek,

I've gone through the basic changes you need to make below. However, I have completely deleted your complex block of table and div code in your Body section because integrating that would have been too complex for a post like this. You must start with this new version and integrate any additional elements you need in your Body section yourself. Do it in small, slow steps so that you can see the results of each step.

1: Remove all the styles code for the old header between

Code: Select all

<IF_CHM><!-- NS header only works in HTML HELP-->

and

Code: Select all

<script type="text/javascript" language="JavaScript" src="nonscroll.js"></script>
</IF_CHM>

2: Add the following block of code directly before the closing </head> tag:

Code: Select all

   <!-- non-scrolling headers for CHM and browser-based help-->
   <style type="text/css" media="screen">
   <!--
   body {   
      margin:0;
      padding:0;
      overflow: auto;
      background: <%TOPIC_TEXT_BGCOLOR%>;
   }
   #idheader {
      width:100%;
      height:auto;
      padding: 0;
      margin: 0;
      background: <%TOPIC_HEADER_BGCOLOR%>;
   }

   /* Set the padding in the OUTER div for MSIE and CHM to prevent the
      width bug and the horizontal scrollbar bug from activating. */

  #idcontent {   
      width: 100%;
      padding: 0px !important;
      padding: 10px 15px 5px 10px;
   }

/* Set the padding in the INNER div for all other browsers. */

  #innerdiv {   
      padding: 10px 5px 5px 10px !important; 
      padding: 0px;
   }

         /* These styles are for the header, the print link
         and the navigation links. Change .topichead padding
         to 5px 5px 0px 5px if you use the Print Topic link.  */

    .topichead {
       padding: 5px;
    }
   
    .navlinks {
      font-size: 10pt;
    }
    .navlinks a {
      text-decoration: none;
      color: blue;
    }
    .navlinks a:visited {
      text-decoration: none;
      color: blue;
    }
    .navlinks a:hover {
      text-decoration: underline;
      color: blue;
    }

    /* These styles are dynamically assigned with Javascript.
    Since the media type is "screen", they do not apply for print */

   html.nonscroll {
      overflow:hidden;
   }
   body.nonscroll {   
      overflow:hidden;
      height:100%;
   }
   div.nonscroll {
      overflow:auto;
   }
   -->
   </style>

 <IFNOT_EBOOK><style TYPE="text/css" media="print">
   <!--

     /* Hide navigation links and add space between header and
      text in the printed version. DON'T change this instance for
     adding the Print Topic link, you need the instance further up! */

     #idnav { display:none;   }
     .topichead { padding: 5px 5px 20px 5px; }
   -->
   </style></IFNOT_EBOOK>

   <script type="text/javascript">
   <!--
   function doResize() {
     var clheight;
     if (self.innerHeight) // all except Explorer
      { clheight = self.innerHeight; }
     else if (document.documentElement && document.documentElement.clientHeight) // Explorer 6 Strict Mode
      { clheight = document.documentElement.clientHeight; }
     else if (document.body) // other Explorers
      { clheight = document.body.clientHeight; }
     document.getElementById('idcontent').style.height = clheight - document.getElementById('idheader').clientHeight +'px';
   }

   function nsrInit() {
     contentbody = document.getElementById('idcontent');
     if (contentbody) {
       contentbody.className = 'nonscroll';
       document.getElementsByTagName('body')[0].className = 'nonscroll';
       document.getElementsByTagName('html')[0].className = 'nonscroll';
       window.onresize = doResize;
       doResize();
      }
   }
   -->
   </script>

3: Delete this block of code in the <body> tag area:

Code: Select all

<IF_CHM><body scroll="no" style="margin: 0px 0px 0px 0px; background: <%TOPIC_TEXT_BGCOLOR%>;"></IF_CHM><IF_HTML><body onload="remove_framespacing();" style="margin: 0px 0px 0px 0px; background: <%TOPIC_TEXT_BGCOLOR%>;"></IF_HTML>
<IF_TOPIC_HEADER>
<IF_CHM><div id="nsr"></IF_CHM>

and replace it with this:

Code: Select all

<body>
<IF_TOPIC_HEADER><div id="idheader">

4: At the end of your header section, just before your <!-- Body --> comment, replace this:

Code: Select all

</table>
</div>

with this:

Code: Select all

  <!-- To add a Print Topic link uncomment this section and change the padding value of
       the .topichead style at the top of the template to "padding: 5px 5px 0px 5px;"

  <IFNOT_EBOOK>
  <tr id="idnav">
  <td colspan="2" style="padding: 0px 5px 5px 5px">
  <span class="navlinks"><a href="javascript:print()">Print this Topic</a></span>
  </td>
  </tr>
  </IFNOT_EBOOK>

  Uncomment this section to add a Print Topic link -->

  </table>

</div></IF_TOPIC_HEADER>

(The closing </IF_TOPIC_HEADER> tag was missing in your template. This will cause serious problems in topics without headers, if you have any!)


5: Delete everything in your <!-- Body --!> section up to the <!-- Footer --> comment and replace it with:

Code: Select all

<div id="idcontent"><div id="innerdiv">
<%TOPIC_TEXT%>

I realise that you want to have the complex block of table and div code in your body section for your own reasons but working it into the template would be too complex for this post. You must start with this new version and add your own code to it as required. Do it in small steps so that you can see which changes have unwanted results!

Important: Note that your footer links will have white text on white background until you do this, because deleting the old code also deletes your table background colors etc.

6: Go down to the bottom of your <!-- Footer --> section and insert the following code between your last closing </div> tag and the closing </body> tag:

Code: Select all

</div></div>
<IF_TOPIC_HEADER><script type="text/javascript">
<!--
var lastSlashPos = document.URL.lastIndexOf("/") >
document.URL.lastIndexOf("\\") ? document.URL.lastIndexOf("/") :
document.URL.lastIndexOf("\\");
if( document.URL.substring( lastSlashPos + 1, lastSlashPos + 4
).toLowerCase() != "~hh" )
{
    nsrInit();
}
-->
</script></IF_TOPIC_HEADER> 

7: Finally (only do this when you have completed all your own changes as well), go to Project Properties - Common Properties - Baggage Files and delete the entry for "nonscroll.js" to remove the file from your project.

The final result of your template with the above modifications (and with your entire Body section tables/divs removed) looks like this:

Code: Select all

<%DOCTYPE%>
<html>
<head>
<title><%TITLE%></title>
   <meta name="generator" content="Help & Manual">
   <meta name="keywords" content="<%TOPIC_KEYWORDS%>">
   <meta http-equiv="Content-Type" content="text/html; charset=<%DOCCHARSET%>">
   <link type="text/css" href="<%STYLESHEET%>" rel="stylesheet">
   <style type="text/css">
      a { color: #0000FF; text-decoration: none }
      a:visited {color: #0000FF }
      a:hover {color: #E4641C; text-decoration: underline }
      a.weblink {color: #0000FF; text-decoration: underline }
      a.weblink:visited {color: #0000FF}
      a.weblink:hover {color: #E4641C }
      a.popuplink {color: #FF0000; text-decoration: none}
      a.popuplink:visited {color: #FF0000}
      a.popuplink:hover {color: #FF0000; text-decoration: underline}
      a.filelink {color: #04BC14; text-decoration: none}
      a.filelink:visited {color: #04BC14}
      a.filelink:hover {color: #04BC14; text-decoration: underline}
      .fsmall {
         font-size: 10px;
         font-family: Verdana, Helvetica, sans-serif;
         text-align: center;
         margin: 10px 0px 0px 0px;
      }
      .crumbs {font-size: 8pt; margin-bottom: 3px; margin-top: 0px; color: #FFFFFF}
      .crumbs a {text-decoration: underline; color: #FFFFFF}
      .crumbs a:visited {text-decoration: underline; color: #FFFFFF}
      .crumbs a:hover {color: #F4BC5C}
</style>

<!-- Bookmark - JavaScript -->
<IF_HTML>
<script type="text/javascript" language="JavaScript">
   var urlAddress = "http://<%ONLINEHELPLINK%>/index.html?<%HREF_CURRENT_PAGE%>";
   var pageName = "<%TITLE%> - <%TOPIC_TITLE%>";
   function addToFavorites() {
   if (window.external) {
      window.external.AddFavorite(urlAddress,pageName) }
   else {
      alert("Sorry! Your browser doesn't support this function."); }
   }
</script>

<!-- Remove frame spacing - JavaScript -->
<script type="text/javascript">
function remove_framespacing () {
   var frameset = top.document.getElementsByTagName('frameset')[0];
   frameset.frameSpacing = '0px';
   frameset.rows = "*";
}
</script>
</IF_HTML>
<!-- Page Comments - JavaScript -->
<script language="JavaScript">
   function doExpandComments(paraNum, imageNum) {
   if (paraNum.style.display=="none")
      {paraNum.style.display=""; imageNum.src="minus.gif"}
   else
      {paraNum.style.display="none"; imageNum.src="plus.gif"}
   }
</script>
   <!-- non-scrolling headers for CHM and browser-based help-->
   <style type="text/css" media="screen">
   <!--
   body {   
      margin:0;
      padding:0;
      overflow: auto;
      background: <%TOPIC_TEXT_BGCOLOR%>;
   }
   #idheader {
      width:100%;
      height:auto;
      padding: 0;
      margin: 0;
      background: <%TOPIC_HEADER_BGCOLOR%>;
   }

   /* Set the padding in the OUTER div for MSIE and CHM to prevent the
      width bug and the horizontal scrollbar bug from activating. */

  #idcontent {   
      width: 100%;
      padding: 0px !important;
      padding: 10px 15px 5px 10px;
   }

/* Set the padding in the INNER div for all other browsers. */

  #innerdiv {   
      padding: 10px 5px 5px 10px !important; 
      padding: 0px;
   }

         /* These styles are for the header, the print link
         and the navigation links. Change .topichead padding
         to 5px 5px 0px 5px if you use the Print Topic link.  */

    .topichead {
       padding: 5px;
    }
   
    .navlinks {
      font-size: 10pt;
    }
    .navlinks a {
      text-decoration: none;
      color: blue;
    }
    .navlinks a:visited {
      text-decoration: none;
      color: blue;
    }
    .navlinks a:hover {
      text-decoration: underline;
      color: blue;
    }

    /* These styles are dynamically assigned with Javascript.
    Since the media type is "screen", they do not apply for print */

   html.nonscroll {
      overflow:hidden;
   }
   body.nonscroll {   
      overflow:hidden;
      height:100%;
   }
   div.nonscroll {
      overflow:auto;
   }
   -->
   </style>

 <IFNOT_EBOOK><style TYPE="text/css" media="print">
   <!--

     /* Hide navigation links and add space between header and
      text in the printed version. DON'T change this instance for
     adding the Print Topic link, you need the instance further up! */

     #idnav { display:none;   }
     .topichead { padding: 5px 5px 20px 5px; }
   -->
   </style></IFNOT_EBOOK>

   <script type="text/javascript">
   <!--
   function doResize() {
     var clheight;
     if (self.innerHeight) // all except Explorer
      { clheight = self.innerHeight; }
     else if (document.documentElement && document.documentElement.clientHeight) // Explorer 6 Strict Mode
      { clheight = document.documentElement.clientHeight; }
     else if (document.body) // other Explorers
      { clheight = document.body.clientHeight; }
     document.getElementById('idcontent').style.height = clheight - document.getElementById('idheader').clientHeight +'px';
   }

   function nsrInit() {
     contentbody = document.getElementById('idcontent');
     if (contentbody) {
       contentbody.className = 'nonscroll';
       document.getElementsByTagName('body')[0].className = 'nonscroll';
       document.getElementsByTagName('html')[0].className = 'nonscroll';
       window.onresize = doResize;
       doResize();
      }
   }
   -->
   </script> 
</head>

<!-- Body -->
<body>
<IF_TOPIC_HEADER><div id="idheader">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0px; color: <%TOPIC_HEADER_BGCOLOR%>; background: url(header_bg_blue.jpg);">
  <tr valign="bottom">
    <IF_CHM><td align="left" valign="bottom" style="padding: 6px 6px 6px 10px;"></IF_CHM><IF_HTML><td align="left" valign="bottom" style="padding: 6px 6px 0px 10px;"></IF_HTML><p class="crumbs"><b>Navigation:</b>&nbsp;
      <IFNOT_TOPIC_BREADCRUMBS>&raquo;No topics above this level&laquo;</IFNOT_TOPIC_BREADCRUMBS>
      <IF_TOPIC_BREADCRUMBS><%TOPIC_BREADCRUMBS%>&nbsp;&gt;</IF_TOPIC_BREADCRUMBS></p><%TOPIC_HEADER%></td>
    <td align="right" valign="middle" style="padding: 0px 10px 0px 0px;">
     <span style="font-size: 9pt">
     <IF_PREVIOUS_PAGE><a href="<%HREF_PREVIOUS_PAGE%>"
        onmouseover="document.images.prev.src='btn_prev_h.gif'"
        onmouseout="document.images.prev.src='btn_prev_n.gif'"
        ><img name=prev src="btn_prev_n.gif" border=0 alt="Previous"
        ></a></IF_PREVIOUS_PAGE><IFNOT_PREVIOUS_PAGE><img src="btn_prev_d.gif" border="0"
        ></IFNOT_PREVIOUS_PAGE><a href="<%HREF_PARENT_CHAPTER%>"
        onmouseover="document.images.main.src='btn_home_h.gif'"
        onmouseout="document.images.main.src='btn_home_n.gif'"
        ><img name=main src="btn_home_n.gif" border=0 alt="Parent Chapter"
        ></a><IF_NEXT_PAGE><a href="<%HREF_NEXT_PAGE%>"
        onmouseover="document.images.next.src='btn_next_h.gif'"
        onmouseout="document.images.next.src='btn_next_n.gif'"
        ><img name=next src="btn_next_n.gif" border=0 alt="Next"
        ></a></IF_NEXT_PAGE><IFNOT_NEXT_PAGE><img src="btn_next_d.gif" border="0"></IFNOT_NEXT_PAGE>
     </span>
    </td>
  </tr>
  <tr>
     <IF_HTML><td style="padding: 0px 0px 4px 10px; font-size: 7pt;" align="left" valign="bottom"><font color="#FFFFFF">http://<%ONLINEHELPLINK%>/index.html?<%HREF_CURRENT_PAGE%></span></td></IF_HTML>
     <IF_HTML><td class="crumbs" style="padding: 0px 11px 4px 0px; font-size: 7pt; text-decoration: none;" align="right"><a href="javascript:addToFavorites()"><img src="../_common_files/favadd.gif" border="0" alt="Click here to add this page to your favorites">Add To Favorites</a></span></td></IF_HTML>
  </tr>
  <tr><td colspan="2" height="4" style="background: url(main_top.jpg)";></td></tr>
  <!-- To add a Print Topic link uncomment this section and change the padding value of
       the .topichead style at the top of the template to "padding: 5px 5px 0px 5px;"

  <IFNOT_EBOOK>
  <tr id="idnav">
  <td colspan="2" style="padding: 0px 5px 5px 5px">
  <span class="navlinks"><a href="javascript:print()">Print this Topic</a></span>
  </td>
  </tr>
  </IFNOT_EBOOK>

  Uncomment this section to add a Print Topic link -->

  </table>

</div></IF_TOPIC_HEADER>

<!-- Body -->
<div id="idcontent"><div id="innerdiv">
<%TOPIC_TEXT%>

<!-- Footer -->
<div style="margin: 0px 0px 0px 0px;">
   <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0px; color: <%TOPIC_HEADER_BGCOLOR%>; background: url(header_bg_blue.jpg);">
  <tr>
    <td align="left" style="padding: 6px 0px 6px 10px;">
         <span style="font-size: 8pt">
         <b>
            <IF_CHM><a href="introduction.htm"></IF_CHM><IF_HTML><a href="introduction.php"></IF_HTML><font color="#FFFFFF">Home</a>
            <IF_CHM>•&nbsp;<a href="online_help.htm"><font color="#FFFFFF">Online Help</a></IF_CHM>
         </b>
         </span>
    </td>
    <td align="right" style="padding: 6px 10px 6px 0px;">
      <span style="font-size: 8pt">
      <b>
         <IF_PREVIOUS_PAGE><a href="<%HREF_PREVIOUS_PAGE%>"><font color="#FFFFFF">&laquo;&nbsp;Previous</a></IF_PREVIOUS_PAGE>
         <IFNOT_PREVIOUS_PAGE><font color="#A7A7A7">&laquo;&nbsp;Previous</IFNOT_PREVIOUS_PAGE>
         <font color="#FFFFFF">•
         <a href="<%HREF_PARENT_CHAPTER%>"><font color="#FFFFFF">Parent&nbsp;Topic</a>
         <font color="#FFFFFF">•
         <IF_NEXT_PAGE><a href="<%HREF_NEXT_PAGE%>"><font color="#FFFFFF">Next&nbsp;&raquo;</a></IF_NEXT_PAGE>
         <IFNOT_NEXT_PAGE><font color="#A7A7A7">Next&nbsp;&raquo;</IFNOT_NEXT_PAGE>
       </b>
      </span>
    </td>
  </tr>
  <tr><td colspan="2" style="height: 4px; background: url(main_top.jpg)"></td></tr>
  <tr>
    <IF_HTML><td align="left" style="padding: 5px 2px 12px 2px;" bgcolor="#FFFFFF"><span style="font-size: 7pt;">&nbsp;&nbsp;<a href="<%PDFLINK%>"><img src="../_common_files/pdf2.jpg" border="0" alt="Click here to download the print version of this help file">Download Print Version</a></span></td></IF_HTML>
    <IF_CHM><td align="left" style="padding: 5px 2px 12px 2px;" bgcolor="#FFFFFF"><span style="font-size: 7pt;">&nbsp;&nbsp;</span></td></IF_CHM>
    <td align="right" style="padding: 5px 10px 12px 2px;" bgcolor="#FFFFFF">
         <span style="font-size: 7pt; text-decoration: none">&nbsp;&nbsp;<%COPYRIGHT%>&nbsp;&nbsp;<a href="http://www.omt.net" target="_blank"><img src="../_common_files/omt_tiny.png" width="50" height="15" border="0" alt="Click here to jump to omt.net"></a></span>
    </td>
  </tr>
</table>
</div>
</div></div>
<IF_TOPIC_HEADER><script type="text/javascript">
<!--
var lastSlashPos = document.URL.lastIndexOf("/") >
document.URL.lastIndexOf("\\") ? document.URL.lastIndexOf("/") :
document.URL.lastIndexOf("\\");
if( document.URL.substring( lastSlashPos + 1, lastSlashPos + 4
).toLowerCase() != "~hh" )
{
    nsrInit();
}
-->
</script></IF_TOPIC_HEADER> 
</body>
</html>

[Tek]

Thank you very much Tim! I have not done this yet but I wanted to thank you for spending the time you did with your response. I will be sure to try this right away and see how it works out!

[Leippe]

Hi Tim,

after using the print button in HTML-Help Viewer, the right border of expanded images or text is cut.

The images is not so important for my pursposes, but the text ...

Your code works well, when no toggled text or images is expanded. I use also the javascript HMToggleExpandAll(true).

There's a solution?

Many thanks

[Tim Green]

Matthias,

Thanks for reporting this. This is not a problem with the non-scrolling header template but with the code of the toggles themselves. If you manually expand the toggles on your page and then print you will get the same effect. The EC programmers will have to investigate it.

[Tim Green]

Matthias,

Update: After further testing as far as I can see this problem only occurs if you have toggle images in tables. If the expanded toggle is wider than a certain maximum the text in the neighboring column gets squeezed so much that it can no longer be displayed properly and some of it gets cut off, both at the side and at the top and bottom. In all other situations everything seems to print OK.

I think the only solution for this is to plan your image toggles in tables so that the maximum size doesn't "burst" the table.

If you have any examples of other problems I'd be interested to see them.

[Leippe]

Hi Tim,

thanks. Now I know the size of image in the expanded toggle causes the printing problem. I've to reduce from 1000 px or 800 px to maximum of 600 px - so far as I tested.