User selectable font size
Moderators: Alexander Halser, Tim Green
-
- Posts: 10
- Joined: Sun Oct 11, 2009 2:16 am
User selectable font size
Hi,
Is there any way to set up a chm file so that a user can control the font size (make it larger/smaller?
Is there any way to set up a chm file so that a user can control the font size (make it larger/smaller?
- Tim Green
- Site Admin
- Posts: 23189
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: User selectable font size
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:
Next you need to create the links for increasing and decreasing the font size. For simple text links the source looks like this:
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):
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.
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>
Code: Select all
<a href="javascript:decreaseFontSize();">Smaller Text</a>
<a href="javascript:increaseFontSize();">Larger Text</a>
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>
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.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 10
- Joined: Sun Oct 11, 2009 2:16 am
Re: User selectable font size
Thanks! I will give it a try.
- Steve
- Steve
-
- Posts: 10
- Joined: Sun Oct 11, 2009 2:16 am
Re: User selectable font size
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
Thanks, that solution works great.
The only slight glitch is that the text inside "li" tags does not get resized. Any ideas?
- Steve
- Tim Green
- Site Admin
- Posts: 23189
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: User selectable font size
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.
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.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 10
- Joined: Sun Oct 11, 2009 2:16 am
Re: User selectable font size
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
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
Re: User selectable font size
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
Many thanks — the script works like a charm!
Moreover, with Steve's correction from above everything on the page is correctly resized.
Usablity +100
-=Think!=-
-
- Posts: 27
- Joined: Tue Jan 17, 2012 2:04 pm
- Location: Słupsk, Poland
Re: User selectable font size
Hello,
Smb know how to put that:
in header of webhelp?
GetElementById('id') or smth using Java DOM.
Smb know how to put that:
Code: Select all
<a href="javascript:decreaseFontSize();">Smaller Text</a>
<a href="javascript:increaseFontSize();">Larger Text</a>
GetElementById('id') or smth using Java DOM.
Regards...
Tomek
Tomek
-
- Posts: 27
- Joined: Tue Jan 17, 2012 2:04 pm
- Location: Słupsk, Poland
Re: User selectable font size
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
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
Tomek
- Tim Green
- Site Admin
- Posts: 23189
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: User selectable font size
Hi Tomek,
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.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.
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.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 27
- Joined: Tue Jan 17, 2012 2:04 pm
- Location: Słupsk, Poland
Re: User selectable font size
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
Tomek
- Tim Green
- Site Admin
- Posts: 23189
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: User selectable font size
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.
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.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.