User selectable font size

This is the place to discuss Help & Manual 4 issues. Please don't post questions on any other versions here!

Moderators: Alexander Halser, Tim Green

Post Reply
Steve Weeks
Posts: 10
Joined: Sun Oct 11, 2009 2:16 am

User selectable font size

Unread post by Steve Weeks »

Hi,

Is there any way to set up a chm file so that a user can control the font size (make it larger/smaller?
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: User selectable font size

Unread post by Tim Green »

Hi Steve,

You can achieve this in CHM files by adding some JavaScript, see this website for the general instructions. To add this to a CHM file in Help & Manual you need to add the script to the header section of your HTML page template, directly before the closing </head> tag (or the same place in your skin if you are publishing with a skin). Go to Publishing Options > HTML Page Templates > Default, locate the closing </head> tag in the HTML Source Code tab and paste in the following code:

Code: Select all

<script type="text/javascript">
var min=8;
var max=18;
function increaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }   
}
</script>
Next you need to create the links for increasing and decreasing the font size. For simple text links the source looks like this:

Code: Select all

<a href="javascript:decreaseFontSize();">Smaller Text</a> 
<a href="javascript:increaseFontSize();">Larger Text</a> 
If you want to use a graphic for these links instead, you can use this code and store the graphics files in your Baggage Files section (change the filenames in the code to match your filenames if necessary, of course):

Code: Select all

<a href="javascript:decreaseFontSize();"><img src="decrease.gif" alt="Decrease Font Size" style="border:0px;" /></a> 
<a href="javascript:increaseFontSize();"><img src="increase.gif" alt="Increase Font Size" style="border:0px;" /></a> 
You can put this in the topic header, for example in the same table cell as the navigation buttons, or at the top of the topic page by inserting the code directly above the <%TOPIC_TEXT%> variable that inserts the page 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.
Steve Weeks
Posts: 10
Joined: Sun Oct 11, 2009 2:16 am

Re: User selectable font size

Unread post by Steve Weeks »

Thanks! I will give it a try.

- Steve
Steve Weeks
Posts: 10
Joined: Sun Oct 11, 2009 2:16 am

Re: User selectable font size

Unread post by Steve Weeks »

Hi Tim,

Thanks, that solution works great.

The only slight glitch is that the text inside "li" tags does not get resized. Any ideas?

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

Re: User selectable font size

Unread post by Tim Green »

Hi Steve,

That's intentional by the programmer, as it is the script only resizes text inside paragraph tags. The script would need to be rewritten to do li tags as well, because at the moment it's designed for p tags only.
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.
Steve Weeks
Posts: 10
Joined: Sun Oct 11, 2009 2:16 am

Re: User selectable font size

Unread post by Steve Weeks »

Hi Tim,

FYI: I've found that using '*' instead of 'p' as the parameter for getElementsByTagName() will resize all elements, including li tags.

Is this kind of thing any easier in H&M v5?

- Steve
User avatar
xlation
Posts: 21
Joined: Fri Jan 04, 2008 2:17 pm
Location: Minsk, Belarus

Re: User selectable font size

Unread post by xlation »

Hi Tim,
Many thanks — the script works like a charm!
Moreover, with Steve's correction from above everything on the page is correctly resized.
Usablity +100 :D
-=Think!=-
Tomek Shaft
Posts: 27
Joined: Tue Jan 17, 2012 2:04 pm
Location: Słupsk, Poland

Re: User selectable font size

Unread post by Tomek Shaft »

Hello,

Smb know how to put that:

Code: Select all

<a href="javascript:decreaseFontSize();">Smaller Text</a>
<a href="javascript:increaseFontSize();">Larger Text</a> 
in header of webhelp?

GetElementById('id') or smth using Java DOM.
Regards...
Tomek
Tomek Shaft
Posts: 27
Joined: Tue Jan 17, 2012 2:04 pm
Location: Słupsk, Poland

Re: User selectable font size

Unread post by Tomek Shaft »

sorry about double post, i could not edit it.

My question is how to save current zoom? I mean that when u enlarge font size, than You change topic which You read, font size is once again small.

Somebody have idea to fix it?

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

Re: User selectable font size

Unread post by Tim Green »

Hi Tomek,
My question is how to save current zoom? I mean that when u enlarge font size, than You change topic which You read, font size is once again small.
This is normal since the topics are loaded into frames. Opening a new topic is actually opening a new web page. You will need to save the value in a cookie and add a script that checks the cookie when the page is loaded and sets the font size if the cookie exists and contains your user's value.
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.
Tomek Shaft
Posts: 27
Joined: Tue Jan 17, 2012 2:04 pm
Location: Słupsk, Poland

Re: User selectable font size

Unread post by Tomek Shaft »

Thank You for reply Tim, so i will probably wait for new premium pack without frames :) i already saw the video, it looks very nice
Regards...
Tomek
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: User selectable font size

Unread post by Tim Green »

Hi Tomek,

The new Premium Pack still uses frames, but iFrames instead of the old deprecated frameset, so each topic is still in a separate page. This is still the best way to manage WebHelp. Dynamic Ajax pages with everything loaded into a single page are not so good for large documentation with many topics and it's not possible to provide a clean fallback for browsers with JavaScript turned off. There are also problems with CSS in single-page solutions. For example you can't have multiple templates for your topics.
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