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.
- Copy the template from the Code box below.
- Create a test project or make a copy of an existing project.
- Go to Project - Project Properties - HTML Help /or/ Browser-based Help - Topic Pages (same templates in both places).
- Select "Let me edit HTML code directly" and select the "Main" template.
- Delete the entire template and replace it with the entire contents of the template from the downloaded text file. (Just copy and paste.)
- That's it! Then just compile to HTML Help or Browser-based Help.
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)
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>
<IF_PREVIOUS_PAGE><a href="<%HREF_PREVIOUS_PAGE%>">Previous</a> </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>