(7 votes, average: 4.43 out of 5)
Loading ...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>
That should do it! Enjoy!
Tags:code , javascript , js , programming stuffPopularity: 75% [?]
[…] 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 […]