Is single-page Webhelp layout with search possible?

valik · Unread post by **valik** » Mon Jan 31, 2011 10:35 am

Hello,

I need to have the webhelp output as dynamic single-page HTML with NO frames. Dynamic TOC and search functionality are also a must. The question is — is there a way to realise that using H&M?

I've been playing with the source code of the HTML template for some time with little results so far, but may be someone has attempted that before or just can tell me how it's possible or impossible. I would appreciate that greatly.

Unread post by **Tim Green** » Mon Jan 31, 2011 1:33 pm

Hi Valik,

At the moment you must use frames if you want to have the dynamic TOC and search. The two are intimately linked in the code, so they won't work without frames. If you don't like using the frameset file you can rewrite the layout page to use iFrames instead of a frameset. iFrames are functionally identical to frames and if you give them the same IDs and names as the frames used in the standard template it will work fine ("hmcontent" for the content frame and "hmnavigation" for the navigation frame). You'll need quite a bit of experience with HTML and CSS coding to set this up, however...

valik · Unread post by **valik** » Wed Feb 02, 2011 11:52 am

Hi Tim,

Thanks for the reply. Yes, that's quite what I wanted to know, and iframes were the first thing I had in mind when talking of single-page dynamic HTML. HTML coding is not much of a problem to me, but what I was also interested in when asking was to get any tips and useful info from those who possibly did the same things: whether this is generally possible at all, if there can be any likely problems, workarounds, etc, or anyone can share template code that would save time. (I'd surely share results here myself, as that would definitely be useful to and interest many people.)
Right, I will try and see now...

valik · Unread post by **valik** » Thu Jun 23, 2011 3:47 pm

It's been time now since the previous posts. I did manage to implement iframe-based Webhelp, so I think it would be not bad to share the results for anyone who can get into the same issue and come across this topic.

Particularly this can be of interest to those who have to ensure HTML5 compliance of the HTML output — where usual frames are deprecated. (Tim once mentioned that they are working on a similar new iframe-based layout for future versions, but everyone can use the solution now.)

So — here is my Webhelp layout template (it is for a two-pane layout). Copy and paste the code under Configuration > Publishing options > Webhelp > Layout. Note that you don't have to change anything else but this layout, which means that you can freely customise other things further, and you will always get a single-page no-frame help!

Code: Select all

<%DOCTYPE%>
<html>
<head>
<title><%TITLE%></title>
<style type="text/css">
  html, body {height: 100%; }
  #body {padding: 0; margin: 0; overflow: hidden; }
  #left {float: left; width: 20%; height: 100%; vertical-align: top; }
  #right {height: 100%; margin-left: 20%; vertical-align: top; }
  #nav {width: 100%; min-height: 100%; height: auto important!; height: 100%; overflow: auto important!; }
  #main {width: 100%; border-left: 1px solid black; min-height: 100%; height: auto important!; height: 100%; overflow: auto important!; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=<%DOCCHARSET%>">
<script type="text/javascript" src="<%NAVIGATION_SCRIPT%>"></script>
<script type="text/javascript">
<!--
var defaulttopic="<%HREF_DEFAULT_PAGE%>";
if (location.href.lastIndexOf("?") > 0) defaulttopic=location.href.substring(location.href.lastIndexOf("?")+1,location.href.length).replace(/:/g,"");
document.write('<body id="body">');
if (document.getElementById) {
  document.write('<div id="left"><iframe id="nav" name="hmnavigation" src="<%HREF_CONTENT_PAGE_DYN%>" title="Navigation"></iframe></div>'); }
else {
  document.write('<div id="left"><iframe id="nav" name="hmnavigation" src="<%HREF_CONTENT_PAGE_STATIC%>" title="Navigation"></iframe></div>'); }
document.write('<div id="right"><iframe id="main" name="hmcontent" src="' + defaulttopic + '" title="Content"></iframe></div>');
document.write('</body>');
//-->
</script>
</head>
<noscript>
  <body id="body">
    <td id="left"><iframe id="nav" name="hmnavigation" src="<%HREF_CONTENT_PAGE_STATIC%>" title="Navigation" /></div>
    <td id="right"><iframe id="main" name="hmcontent" src="<%HREF_DEFAULT_PAGE%>" title="Content" /></div>
    <noframes>
      This content requires support of dynamic HTML.<br>Click <a href="<%HREF_CONTENT_PAGE_STATIC%>">here</a> to view a static table of contents.
    </noframes>
</body>
</noscript>
</html>

p.s. I won't mind if someone tells me about a better place to share templates in.

Unread post by **Tim Green** » Fri Jun 24, 2011 7:07 am

Hi Valik,

Thanks for posting this!

p.s. I won't mind if someone tells me about a better place to share templates in.

You could post it in the Tips & Tricks or Templates & Utilities sections. Resources like this tend to get lost quite quickly when you post them to the main discussion forum.

valik · Unread post by **valik** » Fri Jun 24, 2011 12:18 pm

Thanks for the guidance Tim. I've posted the same code in Templates & Utilities here.

Tomek Shaft · Unread post by **Tomek Shaft** » Fri Feb 10, 2012 3:47 pm

Hello Valik,

Can You add to that layout a:

- global with full width, on top header which is attached in html file to project baggage
- global with full width, on bottom footer which is attached in html file to project baggage

If it works, that will be awesome.

valik · Unread post by **valik** » Mon Feb 13, 2012 10:51 am

Cześć, Tomek. =)
I am quite busy these days and not sure when I can find a minute to look into that. And can you explain more what do you mean by saying “attached in html file to project baggage”? If you mean linking to specific graphics/other files in the baggage, it's always enough to specify just file names without any path for any files that are in your baggage folder.

Tomek Shaft · Unread post by **Tomek Shaft** » Mon Feb 13, 2012 2:13 pm

Cześć Valik,

Are You from Poland?

I mean that when You enable option "PP 3-frame WebHelp" in publishing webhelp options, You can add to project baggage file for example header.html and it will be shown like a webhelp header.

I want do the same in Your layout. And if it is possible in the same way a footer.

By the way in Your layout the AutoToc doesn't work.

Bless

Help & Manual Forums

Is single-page Webhelp layout with search possible?

Is single-page Webhelp layout with search possible?

Re: Is single-page Webhelp layout with search possible?

Re: Is single-page Webhelp layout with search possible?

Re: Is single-page Webhelp layout with search possible?

Re: Is single-page Webhelp layout with search possible?

Re: Is single-page Webhelp layout with search possible?

Re: Is single-page Webhelp layout with search possible?

Re: Is single-page Webhelp layout with search possible?

Re: Is single-page Webhelp layout with search possible?