HM3 topic template package with advanced collapsing sections

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
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

HM3 topic template package with advanced collapsing sections

Unread post by Tim Green »

Template version with advanced expandable/collapsable sections script

H&M3 Template Only:
This is an H&M3.x template -- it won't work in H&M4. The alternative expanding sections are also not needed in H&M4 -- the standard versions that you can find in the DHTML tutorial in the \Samples folder in your program directory now works fine in H&M4's Browser-based Help output.

This version of the template package includes a different script for expandable/collapsable sections that is compatible with more browsers. The old version based on Microsoft's DHTML code is fine if you are only outputting to HTML Help, as it is fully compatible with the Internet Explorer subset that is used in the HTML Help viewer. However, if you are outputting to browser-based HTML this version will provide better results across more browsers.

Source credit:
The original script the expandable sections feature is based on is by M.C. Matti (mimatt@sas.com / http://matti.net) and can be found here:

http://www.webreference.com/programming/css_content/


For more details see the Better Expandable Sections tutorial in the Tutorials & Guides section.

------------------------------------------------------------------------------

This little package includes a fully-commented topic template that provides the following features:
  • Non-scrolling headers for HTML Help
  • Navigation icons with mouseover effect in the topic headers
  • Two versions of support for expandable/collapsable sections in topics -- the standard Microsoft DHTML version included in the original template package (see here) and a more advanced version that is compatible with more browsers
  • Link styles with underlines only displayed on mouseover (hover attribute) and different colors for topic links (green), popup links (red) and web links (blue)
  • No white border around the topic header
How to use the template package:
  1. Download the files.zip package (link below at the end of the tutorial).
  2. Unpack all the files except topic_template.txt to your project folder (same folder where your .hm3 project file is). (You can actually store topic_template.txt anywhere you want, you are just going to use it as a source for your template text.)
  3. Open your project (make a backup first!!) and go to Project > Project Properties > HTML Export Layout > Topic Pages.
  4. Select "Edit HTML template directly" in the Design Mode: field, then select the "Main" window type in the HTML Template for Window Type: field. (You must repeat the procedure for any other window types where you want to use these features.)
  5. Delete the entire contents of the editing window, i.e. the entire current template (you have made a backup, haven't you?)
  6. Open topic_template.txt in a text editor and copy and paste the entire contents into the template editing window for Topic Pages > Main in Help & Manual.
  7. Click on Apply.
  8. Now go to Project > Project Properties > HTML Help Export > Extended .HHP settings and copy the following text into the Additional settings for the HHP file: window to include all the additonal files we are using in the .CHM output file:

    Code: Select all

    [FILES]
    ..\nonscroll.js
    ..\dropdown.js
    ..\button_main.gif
    ..\button_main_h.gif
    ..\button_prev.gif
    ..\button_prev_h.gif
    ..\button_prev_d.gif
    ..\button_next_h.gif
    ..\button_next.gif
    ..\button_next_d.gif
    ..\minus.gif
    ..\plus.gif
    
    Note: Leave out the [FILES] line if you already have one!
If you are using the package for browser-based HTML output you must also manually copy all the files on the list above to your HTML output directory -- H&M will not do this for you automatically.

That is then basically it for the non-scrolling headers, link styles and navigation buttons. You can replace the buttons with your own versions of course, but then you also have to edit the template with the new button names.

Using the expandable/collapsable sections feature:

This template package includes both the standard Microsoft code for expandable sections, which is fine if you are only generating HTML Help, and a new, more advanced version that is compatible with more browsers.

To use the standard version see the tutorial included in the ..\samples\DHTML-Examples\ folder in the Help & Manual program directory. The information you need is in the chapter on "Expanding and Collapsing Sections". The only difference is that you don't need to include the basic JavaScript with the expanding and collapsing functions in every topic because that is handled by the template in this package, which references dropdown.js for every topic page automatically.

For instructions on using the advanced version see the next message in this thread and the Better Expandable Sections tutorial in the Tutorials & Guides section.

More information:

Non-scrolling headers:
See the DHTML Examples tutorial included with H&M in the ..\samples\DHTML-Examples\ folder in the Help & Manual program directory.

Icons and mouseover buttons in headers:
http://helpman.it-authoring.com/viewtopic.php?t=12

Span tags for defining link styles:
http://helpman.it-authoring.com/viewtopic.php?t=7

Advanced text decoration for links:
http://helpman.it-authoring.com/viewtopic.php?t=918

Getting rid of whitespace around headers:
http://helpman.it-authoring.com/viewtopic.php?t=739

Non-scrolling sections within pages:
http://helpman.it-authoring.com/viewtopic.php?t=930
You do not have the required permissions to view the files attached to this post.
Last edited by Tim Green on Wed Sep 14, 2005 7:31 pm, edited 2 times in total.
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: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Using the advanced expandable sections feature

Unread post by Tim Green »

Using the advanced expandable sections feature in your topics

To use this feature you need to put some "activation code" around the text you want to make expandable in your topics. A big advantage of this method over Microsoft's simple expandable sections code is that you don't need to add multiple IDs to each block of code for each section -- even if you use multiple sections on one page the code is always identical, the only thing you need to change is the text for the title of the expandable section.

Code before the expandable section:

In the H&M editing window place the cursor directly before the beginning of the block of text that you want to expand and collapse. Select Insert > Plain HTML Code... and enter the following block of code:

Code: Select all

<div><a href="javascript:void(0)" class="dsphead"
   onclick="dsp(this)" title="Click to expand section">
   <span class="dspchar">+</span> Your Heading Text Goes Here</a></div>
   <div class="dspcont">
Then just delete Your Heading Text Goes Here and add your own heading text. Check Apply to Browser Based Help and/or Apply to HTML Help at the bottom of the editing window as relevant for your project. Be careful not to delete the space before the beginning of the heading text, it is important!!

Note:
In the example I've used a <div> tag around the link because it makes the line spacing easier. You can actually use any block tag that you like -- for example <p>, <h1>, <h2> and so on. If you use these tags you can also edit the styles block in your template to format them. The possibilities are endless... DON'T change the <div class="dspcont"> tag at the end, however, that is essential for proper functioning!

Code after the expandable section:

Finally, move the cursor to the end of the section you want to make expandable and add the following code with Insert > Plain HTML Code...

Code: Select all

</div>
Tips and Tricks:

Line spacing between multiple expandable sections:

If you create multiple expanding sections directly after one another you will have a full empty line between the headings because of the carriage returns between the blocks of code in the H&M editor. You can solve this problem by not entering the closing </div> tag of the first section separately. Instead, enter it as the first element in the opening block of code for the next section, like this:

Code: Select all

</div><div><a href="javascript:void(0)" class="dsphead"
   onclick="dsp(this)" title="Click to expand section">
   <span class="dspchar">+</span> heading</a></div>
   <div class="dspcont">
Here the opening </div> closes the preceding section to prevent an empty line between the headings of the two sections.

Changing the line spacing between section headings:

One of the advantages of using <div> tags for the blocks here is that you can also "abuse" them to enter additional style information. For example, after eliminating the line spacing with the trick above you can then increase it slightly by adding style information to the <div> tag. This code adds a small space after each heading:

Code: Select all

</div><div style="margin-bottom: 5px"><a href="javascript:void(0)" class="dsphead"
   onclick="dsp(this)" title="Click to expand/collapse section">
   <span class="dspchar">+</span> Don't apply effects to your original screenshots:</a></div>
   <div class="dspcont">
Problems with formatting in the H&M topic:

Another thing to note is that because of the tags inserted by H&M, formatting applied directly after the opening blocks of code can interfere with the functioning of the expandable sections. If you want to change the font of texts in your expanding sections it's thus best to either select the entire section, including the blocks of Plain HTML Code, so that the tags are inserted before and after the code, or include <font> tags in the blocks of code itself.

The most important thing to avoid is tags that start in one section and end in another. This would happen, for example, if you make a selection that starts inside one section and ends inside another and then apply formatting. If you do this the expandable sections will almost certainly not work.

Changing the font of individual words and phrases or even entire paragraphs inside the expanding sections shouldn't be a problem, however, as long as the formatting does not come directly after the starting code block.

That's basically it. The system is quite flexible and you can edit the style information in your template as you like to achieve different formatting effects. I've set it up for very basic formatting but what you make of it is up to you. See the original script at the address below for more information and ideas. :D

Source credit:
The original script I based this example on is by M.C. Matti (mimatt@sas.com / http://matti.net) and can be found here:

http://www.webreference.com/programming/css_content/
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.
rholloway
Posts: 5
Joined: Fri Dec 03, 2004 11:30 pm
Location: Baton Rouge, LA
Contact:

Problem with Navigation Icons (in header)

Unread post by rholloway »

I'm not sure if this is a bug or not. I downloaded this packet and used it for my help files (it works great by the way). I noticed however that the "return to introduction" navigation icon in the header was not linking to my default topic. It seemed to link to nothing.

To figure out what was going on, I reviewed your topic about setting up these icons (http://helpman.it-authoring.com/viewtopic.php?t=12) and noticed the following code:

Code: Select all

<IF_PREVIOUS_PAGE><a href="<%HREF_PREVIOUS_PAGE%>">Previous</a>&</IF_PREVIOUS_PAGE> 
     <a href="<%HREF_DEFAULT_PAGE%>">Top</a>& 
     <IF_NEXT_PAGE><a href="<%HREF_NEXT_PAGE%>">Next</a></IF_NEXT_PAGE>
I checked my project, and I had the same code except the link was referencing the "current" topic instead of the "default" topic:

Code: Select all

<IF_PREVIOUS_PAGE><a href="<%HREF_PREVIOUS_PAGE%>">Previous</a>&</IF_PREVIOUS_PAGE> 
     <a href="<%HREF_CURRENT_PAGE%>"
I changed "current" to "default" and the icon linked to my default topic. I'm not sure if you intended to include this code or not, but I thought I'd share this information in case others had the same question.
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Unread post by Tim Green »

I changed "current" to "default" and the icon linked to my default topic. I'm not sure if you intended to include this code or not, but I thought I'd share this information in case others had the same question.
You are absolutely right, thank you very much for pointing this out! I have no idea how this happened as I remember simply copying this part of the code from the older template. Gremlins... :?

Anyway, I've corrected it in the download archive so this should now work properly. Thanks again... 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.
Elvira
Posts: 3
Joined: Thu Nov 25, 2004 5:44 pm

Section should be EXPANDED by default

Unread post by Elvira »

I tried a lot, but didn´t get the trick to let an section be expanded by default...

Can you post an example / code snippet how to define an expanded section
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Unread post by Tim Green »

Elvira,

As it is the script is only designed to display sections collapsed by default. I'm afraid I can't change it myself but you might be able to get some help if you contact the original author, whose links are listed in the source credits above.
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.
ericspiel
Posts: 28
Joined: Tue Aug 30, 2005 3:14 pm
Location: Oxfordshire, England

Unread post by ericspiel »

Hi Tim,

Apologies if this is a real freshman type of question; I've just started out with Help Authoring.

I have downloaded the 'Topic Template package with advanced collapsing sections' from the Templates & Utilities section of the Forum. I followed all the instructions for inserting the HTML code directly into the HTML Help > Topic Pages edit window, and the text that goes into the Extended .HHP Settings window.

(I have not yet actioned the steps required for using the expandable/collapsable sections feature)

However, when I compile HTML Help, I get one error and three warnings:

Error: Topic template Main does not contain a CSS reference

Warnings: 1) Topic template Main does not contain a doctype declaration
2) Topic template Main does not contain a character set declaration

(two instances of the latter warning)

Any hints you could provide on what I've done wrong would be most appreciated.

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

Unread post by Tim Green »

Eric,

This is a Help & Manual 3 template, which has a different structure so it won't work in H&M4. I haven't yet produced an H&M4 version -- it may be a little while before I get around to it.

However, as a consolation you can find and use the entire template used for the H&M4 help in the \Templates directory in your H&M program directory -- it's called HMSTYLE_for_new_Projects.hmx. To use it just create a new project and then select this file as the template in the second page of the Create New Help Project wizard.

This template doesn't include expanding sections but you can find a tutorial for adding this functionality that works in H&M4 in the \Samples directory in your H&M program directory -- it's in the \DHTML Examples folder. The alternative expanding sections used in the H&M3 template are also no longer necessary in H&M4, because the standard version now also works fine in the H&M4 Browser-based Help output.
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.
ericspiel
Posts: 28
Joined: Tue Aug 30, 2005 3:14 pm
Location: Oxfordshire, England

Unread post by ericspiel »

Hi Tim,

Thanks for the fast response and the suggestions. I will try out both of them.

All the best,

Eric
Post Reply