Template: Single-page Webhelp layout w/search (no frames!)

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

Post Reply
valik
Posts: 10
Joined: Mon Jan 17, 2011 10:54 am

Template: Single-page Webhelp layout w/search (no frames!)

Unread post by valik »

Some time ago I got interested in finding a way to implement fully functional Webhelp (with built-in search and so on) without any frames in the HTML. (The original thread is here.) There was a useful hint from Tim, and shortly I managed to build my Webhelp on iframes, and the solution has proved just great so far.

So I'd like to share the results here for anyone who can get into simillar issues. Particularly this can be of interest to those who have to ensure HTML5 compliance of the HTML output — where usual frames are deprecated.

So — here is the Webhelp layout template. To use it, just 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 in your HTML further, and you will always get a single-page no-frame help!

The template is the same standard two-pane HM5 Webhelp layout, where I replaced frames with iframes. Also, tables were replaced with DIVs. Several styles were introduced to format elements. The layout is flexible: the left pane is 20% wide and the right one is 80%. Find and modify the corresponding values if you need something a bit different.

Good luck! :D

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>
User avatar
axoft
Posts: 54
Joined: Tue Jan 23, 2007 3:56 pm

Re: Template: Single-page Webhelp layout w/search (no frames

Unread post by axoft »

Very very good!
I'm sorry, but...

The lines:

Code: Select all

        <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>
Aren't this?:

Code: Select all

        <div id="left"><iframe id="nav" name="hmnavigation" src="<%HREF_CONTENT_PAGE_STATIC%>" title="Navigation" /></div>
        <div id="right"><iframe id="main" name="hmcontent" src="<%HREF_DEFAULT_PAGE%>" title="Content" /></div>
Thanks!
User avatar
Tim Green
Site Admin
Posts: 23153
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Template: Single-page Webhelp layout w/search (no frames

Unread post by Tim Green »

Thanks for posting this!

Just a comment, however: A layout with iFrames is not actually a frameless layout. iFrames are supported in HTML5 so we can continue to use them, unlike the deprecated framesets, but they are still frames, and their functionality is almost exactly the same as the old frames in the frameset layout. That is why they can be used almost 1:1 as a drop-in replacement. The standard output of Help & Manual now also uses iFrames, and so do all the included standard skins included with the program and almost all of the skins in the Premium Pack add-on pack.

A true frameless layout for WebHelp would use AJAX calls (for example the jQuery .load() call)to dynamically inject external files into the current page. The difference is that external pages in frames continue to be separate pages, with their own separate scripts, CSS, head section etc. They are displayed in a window inside the current page, but they are never part of it. When you load an external page with an AJAX call it becomes part of the current page; its HTML is physically merged into the HTML of the current page and it all becomes one page.

The only Help & Manual skins available at the moment that use this technique are the smartphone skins in the current Premium Pack. It was necessary to do this to get around the limitations of many current smartphone browsers, which are/were unable to handle frames and scrolling regions inside frames and pages sufficiently well to make a decent WebHelp interface.

While the true frameless AJAX layout concept is quite cool and very effective for smaller pages it is not suitable for large WebHelp systems with a lot of topics. Maintaining a large table of contents in a single page and loading and unloading large pages in the same single page creates unnecessary overheads that prevent good performance. Also, having the HTML of every topic page merged into the single main page creates unnecessary layout and scripting problems, because then all the CSS and scripting must be managed from that one page. When you load the topic, TOC, search and index pages into their own frames they remain separate pages and it is then much easier to manage them with their own CSS and scripting, which does not interfere with what is going on in the main page and the other components. Finally, iFrames and frames work with JavaScript turned off. An AJAX layout without JavaScript is simply dead.

There are advantages and disadvantages to both approaches, of course. However, as things stand at the moment I don't think you can avoid using iFrames for effective presentation of large-scale WebHelp projects.
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.
Post Reply