Javascript - text resize

If you want to give your site’s visitors the possibility to see your page’s content at different text sizes, you can do it with the following javascript text resize solution.

First you should decide which part of the page will be affected by text resizing and mark it with an id - in my example id=”content”. It can be a div or a table or the entire page if you want.

Next the javascript code:

function fsize(size,unit,id){
  var vfontsize = document.getElementById(id);
  if(vfontsize){
   vfontsize.style.fontSize = size + unit;
  }
}

This function has 3 parameters: size (like 10, 80, 2), unit (like px, %, em) and id (like content).

Next add links for text resize - you can use text or images for these - for example:

<a href="javascript:fsize(10,'px','content');">Increase size</a>
<a href="javascript:fsize(14,'px','content');">Reduce size</a>

There you have a simple text size switcher!

I wanted to change the text size dynamically by 2 px at each click, so I changed the code a little bit. I used another function to calculate the new value of the text size by adding or subtracting 2 out of a js variable (textsize) which holds the current text size value.

Here is what you need to add into the javascript code:

var textsize = 10;
function changetextsize(up){
  if(up){
   textsize = parseFloat(textsize)+2;
  }else{
   textsize =parseFloat(textsize)-2;
  }
}

Now, add onclick event on those links to call the new function and also change the first parameter of fsize function with the js var (textsize) - like this:

<a href="javascript:fsize(textsize,'px','content');" onclick="changetextsize(1);">Increase size</a>
<a href="javascript:fsize(textsize,'px','content');" onclick="changetextsize(0);">Reduce size</a>

Update: to add a reset link use this code:

<a href="javascript:fsize(10,’px’,'content’);" onclick="textsize = 10">Reset font size</a>

That should do it! Enjoy!

Tags: , , ,

Popularity: 49% [?]


1 Star2 Stars3 Stars4 Stars5 Stars (24 votes, average: 4.08 out of 5)
Loading ... Loading ...

Check out this video!!

Write a Comment

Take a moment to comment and tell me what you think. Some basic HTML is allowed for formatting.

*
To prove that you're not a bot, enter this code
Anti-Spam Image

Type your comment here.

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

Reader Comments

[…] was telling you in a previous article - Javascript - text resize - how you can give your site’s visitors the possibility to see your page’s content at different […]

Surprised to still see code like this being written in 2007.

There is no such thing as a javascript: protocol to use in links. Click event handlers should be used instead. Event handlers should be added in the script itself, not hard coded into the HTML. In fact, given that this solution won’t work without javascript, the links should also be generated in script, so if someone visits the page without javascript turned on, they don’t see links that effectively do nothing for them.

Or even better, (link removed) teach people how to do it themselves.

I didn’t quite understand your reaction to my post, but I’m going to answer you mindless of it.

I don’t know your level of expertize in this matter, but I do know that javscript: can be used in href attribute of a link tag, although it’s better to use DOM events instead.

If the javascript is disabled, that piece of code / function will not be executed no matter where you put it…

Of course, I could’ve been more careful about how the result displays, but my main intention was to show you the code itself, rather than giving you an out of the box solution.

Also, this post is for programmers, so a link to a page where people can learn how to change the text size for their browser has nothing to do with this subject.

Finally, go to iGoogle and search href=”javascript: into the source code - you’ll be surprised! ;)

Hello Nickoo,

It’s an interesting idea this JS text size changer but I have to say I do not recommend it’s usage coming from an accessibility point of view.

A few things:

1. IE7 and Opera for example, have their own “page zoom” functionality and it seems to work really well. In these cases the text increase by JS makes the page look less good that these browsers would (though IE7 also has text zoom built in as well as “page zoom”). The rest have their own inbuilt text increase functionality already which is not JS dependant.

2. Most of the people who will rely on text zoom will know the browser text changer/page zoomer shortcut keys because they need to, or will have a special “zoomer viewer”.

3. Anything that relies on js and can be avoided in my opinion is better for accessibility.

Anyway I know this is not the point of this page, it is simply to share the js code for text change. Just wanted to give you some food for thought.

Thanks for posting this information in such a clear and readable manner.

Thanks Mag for your comment!

I know that there are such functionality already build into browsers, but the thing is that many people don’t know about them or how to use them… and some times it’s just easier to click on a button / link instead of searching through menus or remembering keys combinations.

Great tut, it seems as if this is the only JavaScript tutorial related to text resizing that currently works. All of the other ones posted online produce wacky results. This post is a bit outdated, but keep up the good work.

How could you program a “reset” for the font size using your script?
Something to set the font back to it’s original settings…

If your original font size was 10px for example, you could use a link like this:
<a href=”javascript:fsize(10,’px’,'content’);”>Reset font size</a>

Thank you!, that was just what I needed :)

You’re welcome! :)

Great tutorial, for sure. I was wondering if there was a working example of this script out there?

thanks for the script,, using it now :D
and working ,,

hi nicusor, can you help me? i got your text resize to work at http://www.jiezhou.com.tw/category/products/ but when i increase the text size, the main content area pushed the left sidebar to the bottom. can you explain how i can just enlarge the text within the ‘content’ and not changing the ‘content’ box size? Thanks

Great tut, it seems as if this is the only JavaScript tutorial related to text resizing that currently works. All of the other ones posted online produce wacky results. This post is a bit outdated, but keep up the good work.

Great script! The zoom function of browsers often produces horizontal scrollbars on 1024 computers. And I don’t care about people having their javascript turned off!

So, great script indeed.

Frank