jQuery plugin - Font Resizer

by John McGeechan

Want to change the font size of all elements on your site with a single mouse click ? Want it to be fully customizable ? ok, look no further....

nb this effect is not achieved with the use of smoke and mirrors or voodoo, just plain ol' jquery

Synopsis

Your website audience are a varied bunch, they come with a range of monitor sizes and different expectations as to what constitutes an ideal font size. Why not let them choose ?

Download

Download the source ( zip , tar). The source contains 3 files...

jquery.fontResize.js (main plugin)
jquery.cookie.js (cookie functions)
style.css (some basic styling for the font resizer widget)

Usage 

First thing to do, add the jquery.fontResize.js,jquery.cookie.js and if you like the default style.css to your site (it is assumed that jquery is already enabled on your site) ....

<head>
....
<style type="text/css" src="style.css"></style>
....
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.fontResize.js"></script>
.....
</head>

For the absolute simplest usage of this plugin, use the default options, add the following to the head section of your document
<script type="text/javascript">
$('document').ready(function() {$('#fontResize').fontResize();});
</script> 


The line above calls the fontResize function once the document is loaded and passes through the id of the target node that will receive the font resize widget, in this case '#fontresize'. Of course it is assumed that you do have an element with an id of 'fontresize' in your page, or not very much will happen ! change this to the id,class,name of any element that you wished to see the widget appear in.

Customization

The widget is fully customizable through a series of abstracted options. Also, the defaults options method is outside of the plugin closure so that the overrides method itself can be completely overriden. The available overrides are as follows....

 defaultTargetNode
 default value  - body
 description    - The node that is the target of the increase/decrease action     
 example values - body,html,yournode,yourid
 
 defaultChangePercent
 default value  - 5
 description    - How much to increase/decrease the size by , per click
 example values - 5,10,12 etc
 
 defaultSize
 default value  - 12px
 description    - What is our baseline font size for the site
 example values - 12px, 1em etc
 
 defaultLabels
 default value  -

<a href="" class="decreaseFont fontresize">A-</a>
<a href="" class="normalizeFont fontresize">A</a>
<a href="" class="increaseFont fontresize">A+</a>


 description    - Widget Html , holds the clickable links to shrink/grow the page
 example values - many and varied
 
 defaultDecreaseClass
 default value  - decreaseFont
 description    - The class of the clickable decrease element. Note this must be the class of the decrease element as held in the 'defaultLabels'' html
 example values - many and varied
 
 defaultIncreaseClass
 default value  - decreaseFont
 description    - The class of the clickable increase element. Note this must be the class of the increase element as held in the 'defaultLabels'' html
 example values - many and varied

 defaultNormalizeClass
 default value  - normalizeFont
 description    - The class of the clickable normalize element. Note this must be the class of the normalize element as held in the 'defaultLabels'' html
 example values - many and varied

defaultcookieParms
 default value  - {expires :3,path :'/'}
 description    - Determine how cookie will be stored. Cookie is used to remember required font size from page to page and from session to session. For session only cookie set expires to -1. Full range of values are { expires: n, path: '/abc', domain: 'yourdomain', secure: boolean }, in most cases 'expires' and 'path' are sufficient
example values - many and varied 

Example Usages


1 - Set growth to 10%...


<script type="text/javascript">
$('document').ready(function() {
$('.myelement').fontResize({defaultChangePercent: '10'});});
</script> 

2 - Set default font size to 15px..
<script type="text/javascript">
$('document').ready(function() {
$('.myelement').fontResize({defaultSize :"15px"});});
</script> 

3 - Change widget html to use different text and classes..
<script type="text/javascript">
$('document').ready(function() {
$('#fontResize').fontResize({
defaultLabels : '<a href="" class="myDecreaseFont fontresize">smaller</a>
<a href="" class="myNormalizeFont fontresize">regular</a>
<a href="" class="myIncreaseFont fontresize">bigger</a>',
defaultDecreaseClass: "myDecreaseFont"
,defaultIncreaseClass: "myIncreaseFont"
,defaultNormalizeClass: 'myNormalizeFont'});});
</script> 

As the last example shows, if you are going to make large changes to the defaults, it may be better to simply override the defaults method $.fn.fontResize.defaults

Trouble shooting

If the plugin works correctly all elements on a page should increase and decrease uniformly, the only time this will not happen is where the page contains hard-coded sizes for certain elements and not em's or pecentages (or defaultTargetNode is set to a very specific, lower level node). Ideally just the body tag should have a  hard-coded size eg 12px with all subordinate elements containing percentages/em's. The fontresizer therfore only has to resize this one element and as all others are expressed as relative sizes, they automatically grow or shrink uniformly.

If you do spot any bugs, feel free to post comments below, who knows if we have the time, we may even fix them  (alternatively use the contact link for this site)

Thank you!

Hi, just wanted to drop you a note to say thank you for this plugin. As I'm still a JS/Jquery novice, it's quite hard for me to amend the script. I've tried almost all the ones I found on google but not one managed to satify all that I needed. Your script works wonderfully, on all major browser.

Making it work

Hi

Looks a great script, but I cant make it work, tried many combinations of the ids, but... Here is my code, can you help? PS only testing in on the local PC, shoudl that make a difference

Rgds
David

Untitled Document

$('document').ready(function() {$('#fontResize').fontResize();});

A-
A
A+
this is some text

Found what I was doing wrong

Nice code!

Restricting number of clicks

Has anyone figured out a way to restrict the user from decreasing/increasing the font more than once?

Restricting number of clicks

Simply override using the absolute values eg if you want a max increase of say 20px and a minimum of 12px...

 

//bind increases 
$('.' + opts.defaultIncreaseClass).click( function() {
  $.fn.fontResize.reSize(true,'24px');
  return false;
});

// bind decreases
$('.' + opts.defaultDecreaseClass).click( function() {
  $.fn.fontResize.reSize(false,'12px');
  return false;
});

 

Internet Explorer and jQuery 1.3.2

Hi there,

the script is working great for FF/Chrome/Safari with jQuery 1.3.2 ... but won't work with IEs, the Text will totally increase when clicked on any of the incr/decr links ( it works with jQuery1.1 like here, on this site ).
Is there a fix for that?thanks,

jan

User reported that this now works

This now works for Jan, he doesn't say why...

Yes it work and the solution is

Simply first be sure you use the default stylesheet.I also hard coded the font size in the css file and declaredCode:html{font-size:16px;}body{font-size:12px;}which does the same thing as font-size: 100%; for html and 75% for body...http://modxcms.com/forums/index.php?topic=46725.0;wap2

IE 9 issue

Hi this plugin doesn't seem to work properly with IE 9. The increase and decrease size buttons do not work unless i press normalize first. In addition, it is not saving a cookie which means if i refresh the page the font changes disappear. This plugin however works with chrome perfectly. Any ideas how I can solve this?

resize only text

Hi there,

thanks a lot for this great script!

would it be possible to only resize the text of a page?

cheers, j

Works

Again, user reports this works...

Post new comment

Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.