Universal non-scrolling headers

This is the place to share H&M templates and utilities with other users. Topic templates can be posted as text attachments (*.txt) or in the posting itself between

Code: Select all

 and 
tags. Print manual templates (*.mnl) are digital and can only be posted as attachments. Utilities and multiple files can be posted in ZIP archives. Please include plenty of comments so that users understand what you're doing! Registration is required to access this forum.

Moderators: Alexander Halser, Tim Green

User avatar
Tim Green
Site Admin
Posts: 21746
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Universal non-scrolling headers

Unread post by Tim Green » Tue Jul 04, 2006 6:01 pm

Update notes:

This thread now contains exactly the same version of the template as in the final version available as a file in this thread:

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

The October 30 2006 update eliminates 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.

The July 17 2006 update corrects a bug in multi-topic printing in CHMs, which made the HTML Help viewer display script error messages for all topics you wanted to print before printing started.

The July 12 2006 update corrects a problem that could cause bulleted and numbered lists to have the wrong spacing in some situations. See this posting for details.

The July 8 2006 update corrects the width bug and the horizontal scrollbar bug in MSIE and CHM. See this posting for details.

To avoid confusion with multiple versions in the same thread the updates all overwrite the original version in this posting with the new version. To update just recopy the current version from this posting and paste it over your current version.


=============================================================

Alex and I have been playing around with CSS recently and he has now come up with a brand-new non-scrolling header template that works both in HTML Help and in Browser-based Help. In addition to this it also supports printing -- so you can now print topics with non-scrolling headers both in HTML Help and Browser-based Help.

The template is very simple to use and very robust. If a browser doesn't support JavaScript or if JavaScript is turned off you just get a normal static header and everything still works normally. The same thing happens in eBooks -- there the template is simply ignored and you just get a static header. It contains everything it needs and the JavaScript code is so compact that you no longer need to juggle with an external JS file.

Important Notes:
  • This template is currently only for Help & Manual 4!
  • This template is still beta! Please try it out and post feedback but don't use it in help distributed to customers or clients just yet.
Instructions for use:
  1. Copy the template from the Code box below.
  2. Create a test project or make a copy of an existing project.
  3. Go to Project - Project Properties - HTML Help /or/ Browser-based Help - Topic Pages (same templates in both places).
  4. Select "Let me edit HTML code directly" and select the "Main" template.
  5. Delete the entire template and replace it with the entire contents of the template from the downloaded text file. (Just copy and paste.)
  6. That's it! Then just compile to HTML Help or Browser-based Help. 8)
Supported browsers:

So far we have tested the template quite thoroughly and found it to work without problems under all the following browsers:
  • Firefox 1.5.x on Windows XP, W2000, W98 and Mac OSX
  • Firefox 1.0.4 on Windows XP
  • Mozilla on Windows XP and W2000
  • Opera 8 on Windows XP, 2000 and Mac OSX
  • Opera 7 on Windows XP and 2000
  • Safari on Mac OSX
  • MSIE 6 on XP, W2000 and W98
  • MSIE 5 on W98
  • Firefox on Linux
  • Opera 8 on Linux
  • Konqueror on Linux (older versions may display an additional right scrollbar)
  • Netscape 4.7x on W98 (no non-scrolling header but help is fully navigable)
Possible Opera 9 problems:

Our results under Opera 9 so far have been mixed. I have had serious problems with Opera 9 under Windows XP with all current updates. Alex found that the template worked fine under Opera 9 under Windows 2000. We'd be grateful for any feedback on this from users!

Update: The main source of problems in Opera 9 appears to be the "Fit to width" setting in Preferences - Web Pages. This setting and the Page Zoom setting in the same section seem to break a large number of web pages using CSS and/or frame layout. If they are turned off everything is OK.

The Template:

Code: Select all

<%DOCTYPE%> 
<html> 
<head> 
   <title><%TOPIC_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"> 

   <!-- 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, headheight;
     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; } 
     headheight = document.getElementById('idheader').clientHeight;
     if (clheight < headheight ) {clheight = headheight + 1;}
     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> 
<IF_TOPIC_HEADER><div id="idheader"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  <tr valign="middle"> 
    <td align="left" class="topichead"> 
      <%TOPIC_HEADER%> 
    </td>
    <td align="right" class="topichead" id="idnav"> 
     <span class="navlinks"> 
     <a href="<%HREF_DEFAULT_PAGE%>">Top</a>&nbsp; 
     <IF_PREVIOUS_PAGE><a href="<%HREF_PREVIOUS_PAGE%>">Previous</a>&nbsp;</IF_PREVIOUS_PAGE> 
     <IF_NEXT_PAGE><a href="<%HREF_NEXT_PAGE%>">Next</a></IF_NEXT_PAGE> 
     </span> 
    </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> 

<div id="idcontent"><div id="innerdiv"> 
<%TOPIC_TEXT%> 
</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>
Last edited by Tim Green on Mon Oct 30, 2006 8:29 pm, edited 9 times in total.

User avatar
Dean Whitlock
Posts: 577
Joined: Thu Sep 01, 2005 5:59 pm
Location: Thetford Center, Vermont USA
Contact:

Unread post by Dean Whitlock » Wed Jul 05, 2006 8:48 pm

Tim, Alex,
This is great! Does it also deal with the horizontal scrollbar bug in CHM help?

Many thanks,
Dean

Never mind - I tried it out and it works just fine in Browser-Based help - if the page has a graphic wider than the window, the text wraps just fine within the window. However, it didn't work perfectly for CHM help. The text in the narrow window was just a couple of characters wider than the window, so the ends of long lines were hidden behind the vertical scrollbar. This was on a page that had a graphic that was wider than the window. I am using IE6 on XP, service pack 2.

I plan to use this new template anyway, because I am distributing almost 100% browser-based help these days, but hopefully there's a fix of some sort. Perhaps all it needs is a wider right margin to the topic content div? I notice that there is a note in the Style section regarding the padding for the inner content-div - should match header-table cellspacing. However, what it actually matches is the header-table cellpadding. Could this be the problem, or is it just a typo in the note?

Good luck with it,
Dean

User avatar
Tim Green
Site Admin
Posts: 21746
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Unread post by Tim Green » Thu Jul 06, 2006 9:22 am

Dean,

Thanks for the feedback, we're looking into the width problem in CHM. Don't implement the template just yet, however -- it still has a printing problem. We had the printing down pat right at the start and then started making changes to get the cross-browser compatibility solved, and stopped testing the printing. The current version only prints what is visible on the screen, and that needs to be fixed. :roll:

By the way: I've been testing it on Linux browsers and it seems to be fine there as well. The only problem may be on earlier versions of Konqueror, which sometimes doesn't turn off the main vertical scrollbar for the viewer window, with the result that you get two vertical scrollbars side by side, one for the content DIV and one for the main window. This is OK on current versions of Konqueror, however. Opera and Firefox on Linux are both fine, including Opera 9 (provided you don't use the Fit to Width function).
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.

User avatar
Tim Green
Site Admin
Posts: 21746
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Unread post by Tim Green » Thu Jul 06, 2006 10:11 am

Dean,

The template is now updated. It now prints properly and the text overflow problem in CHM has been corrected. The right margin solution is a bit of a hack on my part -- Alex may come up with a better solution later. 8)
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.

User avatar
Dean Whitlock
Posts: 577
Joined: Thu Sep 01, 2005 5:59 pm
Location: Thetford Center, Vermont USA
Contact:

Unread post by Dean Whitlock » Thu Jul 06, 2006 1:37 pm

Tim,
Thanks for the quick fix! I should be able to give it a test run later today (my time, that is).

Having a Print command in the header will be a nice feature. I like to steer people to the PDF, but it's my feeling that most folks would rather just print the section they're dealing with at the time and don't want to search through another source to find it.

Thanks again,
Dean

User avatar
Dean Whitlock
Posts: 577
Joined: Thu Sep 01, 2005 5:59 pm
Location: Thetford Center, Vermont USA
Contact:

Unread post by Dean Whitlock » Thu Jul 06, 2006 4:08 pm

Tim,
The horizontal scrolling problem is fixed in CHM (although the right-most word butts touches the edge of the vertical scrollbar). Unfortunately, the problem now appears in browser-based help in a certain situation. If the IE 6 browser window first opens in a width that is wider than the graphic on the page, there is no problem, even if I manually resize the window to be narrower than the graphic, causing the horizontal scrollbar to appear.

There is no problem if the browser window opens in maximized mode, even if I then switch to the adjustable window and manually resize it to be smaller than the graphic.

However, if the browser window first opens in a reduced width that is narrower than a graphic on the page, the text does not wrap soon enough. A few characters at the right end of the longest lines are hidden beneath the vertical scrollbar. What's odd is that the horizontal scrollbar doesn't go away when I manually resize the window to be wider than the wide graphic, and the right edge of the text still extends a few characters under the vertical scrollbar.

My monitor resolution is 1024 X 768 - don't know if that would be an issue. I'm going to see if making the right margin wider makes any difference. That's about the limit of my HTML proficiency. :?

The print function works great, by the way. I moved it to appear below the Prev/Next links, but I can't believe that would affect the text wrap issue...would it?

Dean

User avatar
Dean Whitlock
Posts: 577
Joined: Thu Sep 01, 2005 5:59 pm
Location: Thetford Center, Vermont USA
Contact:

Unread post by Dean Whitlock » Thu Jul 06, 2006 4:37 pm

Tim,
I increased the padding in the #idcontent div style to be 15, and that provided enough space to move all the letters out from under the vertical scrollbar. So I set the padding back to 5 and deleted the IF_CHM tags around the margin-right statement. Now all the letters are visible, though the right-most ones butt against the edge of the vertical scrollbar. Maybe a right margin of 11 would be better.

I don't know if these changes will upset the CHM output or the layout in a different browser. I'm stuck with IE 6 here, though I may be getting Firefox soon. If you think these changes are OK, I'll stick with them.

Thanks,
Dean

User avatar
Tim Green
Site Admin
Posts: 21746
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Unread post by Tim Green » Thu Jul 06, 2006 5:31 pm

Dean,

The width thing is clearly an MSIE problem -- it has to do with IE's non-standard box model, which interprets widths differently from all other browsers on earth. Sigh... :? This means that it needs to be fixed specifically for IE in the Browser code as well as for HTML Help, so my quick hack won't hack it. I've asked Alex to look into it.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.

User avatar
Alexander Halser
EC-Software Support
Posts: 3994
Joined: Mon Jun 24, 2002 7:24 pm
Location: Salzburg, Austria
Contact:

Unread post by Alexander Halser » Thu Jul 06, 2006 6:16 pm

How about this patch:

Code: Select all

	#idcontent div {	
		margin: 5px !important;
		margin: 5px 15px 5px 5px; /* MSIE only */
	}
I haven't tested it with all browsers but it seems to work fine in MSIE. MSIE 4-6 don't understand multiple properties on one line of the CSS declaration. So, the first line is for all browsers except MSIE (which ignores it). The second line is used by MSIE only because for other browsers, the "!important" declaration overrules the second one.
Alexander Halser
Senior Software Architect, EC Software GmbH

User avatar
Dean Whitlock
Posts: 577
Joined: Thu Sep 01, 2005 5:59 pm
Location: Thetford Center, Vermont USA
Contact:

Unread post by Dean Whitlock » Thu Jul 06, 2006 8:14 pm

Hi Alex,
Good grief - the things we have to go through to make MS products work with the rest of the world! :evil:

Thanks for the fix. I will install it right off.

I'll let you know if I spot anything else,
Dean

User avatar
Tim Green
Site Admin
Posts: 21746
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Unread post by Tim Green » Fri Jul 07, 2006 2:21 pm

Dean,

This also doesn't quite hit the spot, but there is a solution, and at the moment it looks like it will eleminate both this width problem and the horizontal scrollbar bug in one fell swoop -- the two things are clearly related.

What it is going to involve is setting padding settings for MSIE and CHM only in the outer DIV around the topic text and settings for all other browsers in the inner DIV only. We're fiddling around to find the most elegant way to do this at the moment, it may take until after the weekend before we post something.

If this really does fix the horizontal scrollbar bug then it will also be possible to eliminate the table around the topic text in the standard template and use a DIV instead -- this is already possible now, but at the moment it means that you can't use tables with percentage widths or fit-to-page.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.

Mark Goldberg
Posts: 1
Joined: Fri Jul 07, 2006 5:32 pm

Unread post by Mark Goldberg » Fri Jul 07, 2006 5:56 pm

Hello Everyone,

I'm an H&M newbie, but I've been playing around with the template and conversing with Tim Green via eMail. He suggested that I post my revised template here so that more advanced users could use it if they like.

I'm especially happy with the feature to hide the navigation controls at print time.
=====================================
Updated: July 6th 2006
Tim Green - copied in new posting from Tim Green's thread on the froum
Mark Goldberg -
Merged in the Navigation Template - from templates\HMSTYLE_for_new_Projects.hmx

Added Custom Build variables around numerous features
- PRINT_THIS_PAGE
- NAV_TEXT
- NAV_GRAPHIC
- NAV_CRUMBS
- HIDE_NAV_WHEN_PRINT

added CSS for MEDIA="print"
used to hide some parts when printing
added class="idnav" to navigation area
=====================================
You do not have the required permissions to view the files attached to this post.

User avatar
John Waller
Posts: 827
Joined: Thu Apr 20, 2006 9:34 pm
Location: Adelaide, South Australia

Unread post by John Waller » Sat Jul 08, 2006 3:48 am

Are there any links to working demos of this template so we can see a real world working version of what this template looks like in practice?

I don't know about anyone else but I would find a demo very helpful.
Regards

John Waller
v.6.2.2 Build 2636

User avatar
Tim Green
Site Admin
Posts: 21746
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Width and horizontal scrollbar bugs fixed

Unread post by Tim Green » Sat Jul 08, 2006 4:35 pm

John,

This is still beta so nothing is online yet. Eventually the online version of the H&M help will be updated with this but at the moment I suggest that you just create a dummy project and experiment a little -- that's what it's for! :D

Dean et al,

The template has now been updated to correct the width and horizontal scrollbar bugs. This means that even though there is no table around the topic text you can now use tables with fit-to-page or 100% widths in your topics and they won't trigger the scrollbar bug.

If you want to correct your current version of the template just replace this code:

Code: Select all

   #idcontent {    
      width: 100%; 
      margin: 0; 
      padding: 0; 
   } 
        /* padding for inner content-div, can't be set in "idcontent" directly, 
           would move the inner scrollbar outside the window in Firefox/Opera */ 
        #idcontent div {    
      padding: 5px;  /* should match header-table cellspacing below */  
      /* The following line fixes the right margin problem in HTML Help when pages 
      contain images that extend beyond the page border. */ 
      <IF_CHM>margin-right: 10px;</IF_CHM> 
   }
with this:

Code: Select all

	/* 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: 15px;
   } 
        /* Set the padding in the INNER div for all other browsers. */ 

  #idcontent div {    
      padding: 15px !important;  
      padding: 0px;
   }
Why and how this works:

MSIE interprets widths and nested divs differently from other browsers, so we need to provide the value in one place for MSIE and CHM (which renders HTML with MSIE) and in another place for all other browsers. We achieve this by using the so-called !important hack.

!important is a valid CSS switch that MSIE doesn't understand in this context, because it looks as though there are two values for one attribute. When MSIE encounters it, it simply ignores it and takes the padding value in the repeated attribute on the next line. All other browsers understand !important, which also tells them that this is the value to use, even though the next line contains a repeat setting of the same attribute. So MSIE uses the version without !important and all other browsers use the version with !important. Simple, but useful... 8)

Rossco
Posts: 185
Joined: Tue May 02, 2006 6:43 am
Location: Wellington, New Zealand

Unread post by Rossco » Mon Jul 10, 2006 2:02 am

Tim,
this template is brilliant, works a treat for me :) thank you very much!!

Within that template, is there a way I can change the top/next/prev font and color?

I found it OK in the standard template, but am lost with this one ;) (mind you, I am having one of those days!)

Cheers
Rossco

Post Reply