Text Resizing With jQuery

RSS Feed

Feb

XHTML & CSS, jQuery

Ever wondered how to allow visitors to increase or decrease the text size (font size) on your website? I’m going to show you how - using jQuery (a great JavaScript library).

CSS Font Size

Firstly, we should consider the various methods of specifying a font size using CSS. 4 CSS attributes pertaining to font sizing come to mind:

Size in ‘pixels’
Sixe in ‘points’
Size in ‘em’
Size as a percentage - ‘%’

For the purpose of this article, treat ‘em’ and ‘%’ as the same (where 1em is equivalent to 100%). When we allow visitors to change the font size, only elements with a font size set in ‘em’ or as a percentage will be variable. Elements without this attribute fall back to the value of their immediate parent element’s font-size. This means is that if you specify the value for an element’s font size in pixels, the font size will not change.

The JavaScript

$(document).ready(function(){
  // Reset Font Size
  var originalFontSize = $('html').css('font-size');
    $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
  });
  // Increase Font Size
  $(".increaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $('html').css('font-size', newFontSize);
    return false;
  });
  // Decrease Font Size
  $(".decreaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $('html').css('font-size', newFontSize);
    return false;
  });
});

Why not take a look at this simple demonstration page.

One limitation of this short script is that the visitor’s preference is not saved. We could overcome this limitation by storing the font-size to a cookie. Jonny and Fazal have cooked up some nice code that will do just this. View the comment.

Dany
February 8, 2008
Quote

Hi,

nice tips.
Fabio Varesano
February 13, 2008
Quote

Thanks for the guide. Really useful.

Please note that your blogging software did something bad with accents.. giving errors on copy and paste.
Homar
February 14, 2008
Quote

Thanks for the comments guys! I’ll look into the accent issue.
Hariadi
March 28, 2008
Quote

great..
how can I make sure visitor’s only click 5 times (Increase/Decrease)?

Homar
March 29, 2008
Quote

Hi Hariadi! You could set a condition around:

$(’html’).css(’font-size’, newFontSize);

For example:

if (newFontSize < 20) {
$(’html’).css(’font-size’, newFontSize);
}

Cody
March 30, 2008
Quote

Hi Homar! Great Code!

Make sure visitor’s only click 5 times..Be so?

$(document).ready(function(){
  // Reset Font Size
  var originalFontSize = $('html').css('font-size');
  $(".resetFont").click(function(){
  $('html').css('font-size', originalFontSize);
  });
  // Increase Font Size
  $(".increaseFont").click(function(){
  	var currentFontSize = $('html').css('font-size');
 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
	if (newFontSize &lt; 20) {
	$('html').css('font-size', newFontSize);
	}
	return false;
  });
  // Decrease Font Size
  $(".decreaseFont").click(function(){
  	var currentFontSize = $('html').css('font-size');
 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
	if (newFontSize &lt; 20) {
	$('html').css('font-size', newFontSize);
	}
	return false;
  });
});

Homar
March 30, 2008
Quote

Hi Cody!

The code you pasted will prevent the user from increasing the font size beyond 20px:

if (newFontSize < 20) {
	$('html').css('font-size', newFontSize);
}

The number of clicks is determined by the limit defined (as above - i.e. 20px), the default font size (as defined in your CSS) and the incremental factor (which is 1.2 by default):

var newFontSize = currentFontSizeNum*1.2;

However, there seems to be a mistake in your code. In the decrease font size section, the condition should be something like:

if ( newFontSize > 8 ) {
	$('html').css('font-size', newFontSize);
}

So that the entire code could be:

(document).ready(function(){
  // Reset Font Size
  var originalFontSize = $('html').css('font-size');
  $(".resetFont").click(function(){
  $('html').css('font-size', originalFontSize);
  });
  // Increase Font Size
  $(".increaseFont").click(function(){
  	var currentFontSize = $('html').css('font-size');
 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
	if ( newFontSize < 20 ) {
	$('html').css('font-size', newFontSize);
	}
	return false;
  });
  // Decrease Font Size
  $(".decreaseFont").click(function(){
  	var currentFontSize = $('html').css('font-size');
 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
	var newFontSize = currentFontSizeNum*0.8;
	if ( newFontSize > 8 ) {
	$('html').css('font-size', newFontSize);
	}
	return false;
  });
});

Hariadi
March 31, 2008
Quote

Thanks all. It’s works!

Hariadi
March 31, 2008
Quote

I edit code above and I dunno how to do the trick ..

var originalFontSize = $('#dataEntry').css('font-size');
 
$(".fontSize").click(function(){
	var fs = this.getAttribute("rel");				
	var currentFontSize = $('#dataEntry').css('font-size');
	var currentFontSizeNum = parseFloat(currentFontSize, 10);
	var newFontSize = null;
 
	if ( fs != 0 ) {
		newFontSize = currentFontSizeNum*fs;
	} else {
		newFontSize = originalFontSize;
	}
if ( newFontSize &lt; 20 ) {
	$('#dataEntry').css('font-size', newFontSize);	
}
	return false;
});

HTML look like this

<a href="#" title="Increase font size" rel="nofollow">Increase</a> 
<a href="#" title="Reset" rel="nofollow">Reset</a>
<a href="#" title="Decrease font size" rel="nofollow">Decrease</a>

Hariadi
March 31, 2008
Quote

sorry.. typo error..

  var originalFontSize = $('#dataEntry').css('font-size');
  $(".fontSize").click(function(){
  var fs = this.getAttribute("rel");
  var currentFontSize = $('#dataEntry').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = null;
  if ( fs != 0 ) {
  newFontSize = currentFontSizeNum*fs;
  } else {
  newFontSize = originalFontSize;
  }
  if ( newFontSize &lt; 20 ) {
  $('#dataEntry').css('font-size', newFontSize);
  }
  return false;
  });

HTML look like this:

<a href="#" title="Increase font size" rel="nofollow">Increase</a>
<a href="#" title="Reset" rel="nofollow">Reset</a>
<a href="#" title="Decrease font size" rel="nofollow">Decrease</a>

Homar
April 1, 2008
Quote
Hi Hariadi!

There is no need. In the code, we execute the “Increase Font Size” action when any element with the class - “increaseFont” is selected.

So, to create a link to increase the font size:
<a href="#" class="increaseFont" alt="Increase Font" rel="nofollow">Increase Font</a>
The class to decrease the font size is - “decreaseFont”. Finally, the class to reset the font is - “resetFont”.

Using the code I posted for Cody, you will be able to limit the size that the font can be increased or decreased to. You simply need to define the class to some elements as I did in the example above with a simple text link.

Fazal Khan
April 2, 2008
Quote

Hi everyone,

Thanks for the tutorials by the way! lifesavers!

I combined this script and the helpful tutorial on cookies to come up with the following:

var myfunctions = {
	textresize : function(){
		var $cookie_name = "textsize";
		var originalFontSize = $("html").css("font-size");
		if($.cookie($cookie_name)){
			var $getSize = $.cookie($cookie_name);
			$("html").css({fontSize : $getSize + "px"});
		} else{
			$.cookie($cookie_name, originalFontSize);
		}
		$("#text-resize").bind("click",function(){
				$("html").css("font-size", originalFontSize);
				$.cookie($cookie_name, originalFontSize);
		});
		$("#text-larger").bind("click",function(){
				var currentFontSize = $("html").css("font-size");
				var currentFontSizeNum = parseFloat(currentFontSize, 10);
				var newFontSize = currentFontSizeNum*1.2;
				if (newFontSize  12) {
					$("html").css("font-size", newFontSize);
					$.cookie($cookie_name, newFontSize);
				}
				return false;
		});
	}	
}
 
$(document).ready(function(){
		myfunctions.textresize();				   
})

enjoy!

Fazal Khan
April 4, 2008
Quote
Homar,

I found a bug in your script when checking against all browsers, spcifically IE 6. You were resetting the newFontSize variables wrong.

Instead of:
$("html").css("font-size", newFontSize);
it should be passed through in curly braces like so:
$("html").css({fontSize : newFontSize});
hope that helps!
John
April 4, 2008
Quote

great work! thanks
Homar
April 5, 2008
Quote

Many thanks Fazal!

I will check the script again and update the code a.s.a.p.
Kim
June 7, 2008
Quote

I was looking for a little nifty script to do this.

Thanks a lot Homar, Feel free to download my wp plugin…

Greets

Jonny Kamaly
July 1, 2008
Quote

Hi Fazal,

I find that your code produces an error in IE7 as the text size retrieved from the cookie is applied back with an extra “px” at the end of it. FF and most other browsers aren’t as strict abotu this and it works. Here’s my fix:

	textresize : function() {
		// show text resizing links
		$(".textsize").show();
		var $cookie_name = "textsize";
		var originalFontSize = $("html").css("font-size");
 
 
		if($.cookie($cookie_name)) {
			var $getSize = $.cookie($cookie_name);
			$("html").css({fontSize : $getSize + ($getSize.indexOf("px")!=-1 ? "" : "px")});
		} else {
			$.cookie($cookie_name, originalFontSize);
		}
 
		// reset link
		$(".textsize-txt").bind("click", function() {
			$("html").css("font-size", originalFontSize);
			$.cookie($cookie_name, originalFontSize);
		});
		// text "+" link
		$(".textsize-inc").bind("click", function() {
			var currentFontSize = $("html").css("font-size");
			var currentFontSizeNum = parseFloat(currentFontSize, 10);
			var newFontSize = currentFontSizeNum*1.2;
			if (newFontSize  11) {
				$("html").css("font-size", newFontSize);
				$.cookie($cookie_name, newFontSize);
			}
			return false;
		});
	}

John Thompson
July 3, 2008
Quote

I would like to see a working example of this script with the cookie function. Anyone done it?
Homar
July 3, 2008
Quote

I would like to see a working example of this script with the cookie function. Anyone done it?

Hi John! You can try the code kindly posted by Jonny. If you can’t get that to work, I’ll put together separate tutorial.
Jonny
July 4, 2008
Quote

Here’s a working example of the jQuery text resize + cookie recall.
It uses the Cookie Plugin for jQuery.

Here’s an rar’d archive of the code

Homar, feel free to add it to your website.

Jonny
July 4, 2008
Quote

Here’s the CSS:

html {
	font-size:1em;
	font-family:Arial, Helvetica, sans-serif;
	color:#999999;
}
body {
	background-color:#111111;
}
.pixels {
	font-size:16px;
	line-height:30px;
	margin-bottom:20px;
	padding:20px;
	background-color:#222222;
}
.point {
	font-size:12pt;
	line-height:30px;
	margin-bottom:20px;
	padding:20px;
	background-color:#222222;
}
.em {
	font-size:1em;
	margin-bottom:20px;
	padding:20px;
	background-color:#222222;
}
.percentage {
	font-size:100%;
	margin-bottom:20px;
	padding:20px;
	background-color:#222222;
}
.undefined {
	margin-bottom:20px;
	padding:20px;
	background-color:#222222;
}
.FontSize {
	display: none; /* hide from non-Javascript browsers */
	position:absolute;
	top:10px;
	right:10px;
	background-color:#333333;
	padding:5px;
}
.FontSizeInc, .FontSizeDec, .FontSizeReset{
	color:#CCCCCC;
	font-size:14px;
	float:left;
	margin:10px;
}

Here’s the Javascript:

//
//     JQuery Text resize + Cookie recall
//     by Jonny Kamaly
//     based on script written by Faisal &amp; Homar
//
 
 
var sitefunctions = {
	textresize : function(){
		// show text resizing links
		$(".FontSize").show();
		var $cookie_name = "sitename-FontSize";
		var originalFontSize = $("html").css("font-size");
		// if exists load saved value, otherwise store it
		if($.cookie($cookie_name)) {
			var $getSize = $.cookie($cookie_name);
			$("html").css({fontSize : $getSize + ($getSize.indexOf("px")!=-1 ? "" : "px")}); // IE fix for double "pxpx" error
		} else {
			$.cookie($cookie_name, originalFontSize);
		}
		// reset link
		$(".FontSizeReset").bind("click", function() {
			$("html").css("font-size", originalFontSize);
			$.cookie($cookie_name, originalFontSize);
		});
		// text "+" link
		$(".FontSizeInc").bind("click", function() {
			var currentFontSize = $("html").css("font-size");
			var currentFontSizeNum = parseFloat(currentFontSize, 10);
			var newFontSize = currentFontSizeNum*1.2;
			if (newFontSize  11) {
				$("html").css("font-size", newFontSize);
				$.cookie($cookie_name, newFontSize);
			}
			return false;	
		});
	}
}
 
$(document).ready(function(){
		sitefunctions.textresize();	
})

Finally, the HTML:

<a href="#" rel="nofollow">Increase</a>
<a href="#" rel="nofollow">Decrease</a>
<a href="#" rel="nofollow">Reset</a>

Jonny
July 4, 2008
Quote

moderator can you please fix the previous comments it looks like I ****ed up a little bit
Homar
July 4, 2008
Quote

moderator can you please fix the previous comments it looks like I ****ed up a little bit

All done. Thanks Jonny!
Brandon Hansen
July 8, 2008
Quote

This is perfect. I am relatively new to jQuery, so it was nice to learn about this. This technique really speeds up the whole process.
jim g
July 9, 2008
Quote

As a newbie to this stuff, would it be possible to add comments to the code explaining each line.
I am building pages with CSS
Homar
July 9, 2008
Quote

As a newbie to this stuff, would it be possible to add comments to the code explaining each line.

I am building pages with CSS

Hi Jim!

Could I suggest that you give the beginner’s guide a read: http://www.shopdev.co.uk/blog/.....ers-guide/
Reading over this article should help you understand the code. The only thing not explained in that article is the parseFloat function. This function basically reads a string (i.e. text) and outputs a float (i.e. a numeric value which does not have to be a whole number).
Erik
July 11, 2008
Quote

Great script. Very handy. I ran into one issue though, where it doesn’t work properly in IE 6 and below if those browsers go into quirks mode. Quirks mode can be caused by many things, but in my particular case, it was triggered by the xml delcaration above the doctype. See here for more info:

http://www.w3.org/Internationa.....-char-enc/
Anonymous
July 12, 2008
Quote

As a newbie to this stuff, would it be possible to add comments to the code explaining each line.
I am building pages with CSS

Thanks for the info!
Jim G
July 17, 2008
Quote

I’m attempting to implement the original text re-size script.
If I increase too many times, my footer is over written (gets included with the main section of the page).
Any suggestions appreciated.

Thanks
Jim
Homar
July 17, 2008
Quote

Hi Jim!

My suggestion would be to restrict the font-size range. See the comments above for code that will do this.
webaddict
July 29, 2008
Quote

thanks for the info!! very helpful

Tetsuo
August 1, 2008
Quote

Jonny’s demo code (4th July 2008) is missing a few things:

if (newFontSize 11) {

Should say:

if (newFontSize, 11) {

Next, there should be a text-size decreaser. This should be like:

// text “+” link
$(”.FontSizeInc”).bind(”click”, function() {
  var currentFontSize = $(”html”).css(”font-size”);
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*1.2;
  if (newFontSize, 11) {
    $(”html”).css(”font-size”, newFontSize);
    $.cookie($cookie_name, newFontSize);
  }
  return false;
});
$(”.FontSizeDec”).bind(”click”, function() {
  var currentFontSize = $(”html”).css(”font-size”);
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*0.8;
  if (newFontSize, 11) {
    $(”html”).css(”font-size”, newFontSize);
    $.cookie($cookie_name, newFontSize);
  }
  return false;
});

Finally, the HTML anchor links need classes on them: Increase should have a “FontSizeInc” class, Decrease should have the “FontSizeDec” class and the reset one have “FontSizeReset” Hopefully that helps anyone who’s tried to get this running and it didn’t work!

Maybe someone can update the code accordingly too? If not I can re-post it with the fixes if Jonny is cool with that.

Tetsuo
August 1, 2008
Quote

Bah. Can someone sort out the formatting for me and delete the extra post?
Homar
August 1, 2008
Quote

Bah. Can someone sort out the formatting for me and delete the extra post?

Thanks Tetsuo! I have reformatted your original post.
Anonymous
August 8, 2008
Quote

Jonny’s demo code (4th July 2008) is missing a few things:

* snip *

Maybe someone can update the code accordingly too? If not I can re-post it with the fixes if Jonny is cool with that.

Hi, I did post the code complete…? Anyhow, I’ve got a plugin made which’ll be on my site in a couple of days.

Peace

Jonny
Anonymous
August 18, 2008
Quote

nice code…
Reblog « Dynamic Disruption
August 19, 2008
Quote

[…] Text Resizing With jQuery. A simple guide on allowing your visitors to increase or decrease font size on web pages. […]
Anonymous
August 27, 2008
Quote

Why does this not work?

$(”.add”).click(function(){
var currentFontSize = $(’#text p’).css(’font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum+1;
$(’text p’).css(’font-size’, newFontSize);
return false;
});
Homar
August 27, 2008
Quote
Why does this not work?

$(”.add”).click(function(){
var currentFontSize = $(’#text p’).css(’font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum+1;
$(’text p’).css(’font-size’, newFontSize);
return false;
});

Try:
$(".add").click(function(){ var currentFontSize = $('#text p').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum+1+"px"; $('text p').css('font-size', newFontSize); return false;
Notice the “px” added to the end of newFontSize.

Barry
September 11, 2008
Quote

Why doesn’t this work in IE6/7? My font-size in my css is set to percentages.

$(document).ready(function(){
  // Increase Font Size
  $(".increaseFont").click(function(){
  	var currentFontSize = $('#copy-Spec').css('font-size');
 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
	if (newFontSize  8 ) {
	$('#copy-Spec').css('font-size', newFontSize);
	}
	return false;
  });
});

Homar
September 11, 2008
Quote
Hi Barry!

In the code you posted, there is no “< " (less than) sign in this line:
if (newFontSize 8 ) {
It should be:
if (newFontSize < 8 ) {
If, after you have made this change, it doesn’t work in IE…. Please try it in FireFox then post back.
Barry
September 11, 2008
Quote

My code doesn’t seem to post correctly.
Homar
September 11, 2008
Quote

My code doesn’t seem to post correctly.

Hi Barry!

Wordpress isn’t allowing visitors to post “pre” tags for some reason. Just post the code without the tags and I’ll then add them.
Barry
September 11, 2008
Quote

$(document).ready(function(){
// Increase Font Size
$(”.increaseFont”).click(function(){
var currentFontSize = $(’#copy-Spec’).css(’font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
if (newFontSize 8 ) {
$(’#copy-Spec’).css(’font-size’, newFontSize);
}
return false;
});
});
Homar
September 11, 2008
Quote
So, do you have a < sign in the line:
if (newFontSize 8 ) {
Barry
September 11, 2008
Quote

It still isn’t posting all the code I paste.

The code that I have is taken from your response to Cody’s on March 30,2008.

“Hi Cody!

The code you pasted will prevent the user from increasing the font size beyond 20px:…”
Homar
September 11, 2008
Quote

Ok… No worries. I’ll sort out this problem later. Does it work in FireFox (or Safari, Opera etc.)? Also, please try the standard code (in the original post). If the original code does not work, I suspect that it’s something to do with your CSS.
Barry
September 11, 2008
Quote

OK. So it has to be the css, because when I use the original code and click to increase the font size in IE it make it really large. I must be missing a percentage in my CSS. Sorry for troubling you. Thanks for your help.
Barry
September 11, 2008
Quote

Homar. Might help if i had the font-size set to em’s and not percentages.
Homar
September 11, 2008
Quote

Homar. Might help if i had the font-size set to em’s and not percentages.

It shouldn’t make a difference.
Barry
September 12, 2008
Quote

Homar. I duplicated the demo page you have and added my code. I’m resizing issues after I increase the font and then decrease and then increase again. It doesn’t seem to enlarge back to the state when I click increase the first time. Test Page
Homar
September 12, 2008
Quote
Hi Barry!

I think that the problem is due to using a multiplier rather than an absolute valued increment/decrement. Using a multiplier results in an exponential change. Therefore, the actual increase/decrease in font size changes.

You can change the following line:
var newFontSize = currentFontSizeNum*1.2;
…to:
var newFontSize = currentFontSizeNum + 5;
Hence, increasing the font size by 5px. You should do the same for the decrement… Change:
var newFontSize = currentFontSizeNum*0.8;
…to:
var newFontSize = currentFontSizeNum - 5;
Hence, decreasing the font size by 5px.
Barry
September 12, 2008
Quote

Thanks! This is what was needed to resolve my issues with keeping the font sizing levels the same when you increase or decrease the font size.
Homar
September 13, 2008
Quote

Thanks! This is what was needed to resolve my issues with keeping the font sizing levels the same when you increase or decrease the font size.

You’re most welcome!

Adam
September 24, 2008
Quote

To avoid resizing issues just scale by -2 +2 and use 16(px) as the average size –>

$(document).ready(function(){
  // Reset Font Size
  var originalFontSize = $('html').css('font-size');
  $(".resetFont").click(function(){
  $('html').css('font-size', originalFontSize);
  });
  // Increase Font Size
  $(".increaseFont").click(function(){
  	var currentFontSize = $('html').css('font-size');
 	var currentFontSizeNum = parseFloat(currentFontSize, 16);
    var newFontSize = currentFontSizeNum+2;
	if (newFontSize>12){
	$('html').css('font-size', newFontSize);
	}
	return false;
  });
});

Adam
September 24, 2008
Quote

part 2:

// Decrease Font Size
  $(".decreaseFont").click(function(){
  	var currentFontSize = $('html').css('font-size');
 	var currentFontSizeNum = parseFloat(currentFontSize, 16);   
	var newFontSize = currentFontSizeNum-2;
	if (newFontSize>12){
	$('html').css('font-size', newFontSize);
	}
	return false;
  });
});

Homar
September 25, 2008
Quote

Hi Adam!

This was covered in my last message to Barry on September 12, 2008.
Ahmad
October 10, 2008
Quote

You are amazing! The code is small, fast.. and does the trick for all text elements. Actually just have two minor issues:

- Is it possible not to let the text that is responsible for resizing resize? I think if I use little images that could resolve the issue.. can I ?

- Can you please update the primary code? Cause I see more than a code snippet and to a JS n00b this is a disaster.. thanks anyway
RAGHAVENDRA MAHENDRAKAR
October 22, 2008
Quote

Hi,

Everything is fine, As per my requirement, i have to use only this DOCTYPE , “”

without changing the new DOCTYPE “” i am not able to see the font increase & decrease effect.

I am using all font-size in percentage. All my CSS and some thing gone mess…

Please help me immediately.
Giedrius
October 22, 2008
Quote

Cheers for this supply, its very helpfull!

I was just wondering if there was a way to keep the font settings the same when you click on a link and go to next page as with this script the font returns to its original size when you go through to a next page.

Answer would be appreciated. Cheers
Quan
December 1, 2008
Quote

I got a problem with IE, but not with FireFox. Executing var currentFontSize = $(’html’).css(’font-size’);
would return “x-small” value, which will then cause parseFloat to return NaN because the input is not a number.

Btw, FireFox returns “10px”, which deems acceptable by parseFloat function.

The script seems to have not accounted for font absolute-size and relative-size values.
Quan
December 1, 2008
Quote

For a workaround, I insert

if (currentFontSize == “x-small”) currentFontSize = “13px”;

before parsing.
Ron van Weverwijk
December 10, 2008
Quote

This is really cool!

I had a small issue in IE 6. The text didn’t wrap, so the text ran out of the div.

I have added the doctype:

It works fine now!
JHMorales
January 9, 2009
Quote

Hi:
I’ve sent a long comment with small changes to the code and extra stuff, but I don´t see it published here. You can see it more detailed at my blog JHMorales.es-blog, in spanish. (If you want a “funny” translation use better Yahoo babelfish. Google translator makes a ‘picasso’ like design with the code and page layout)
JHMorales
January 20, 2009
Quote

Hi again..
your code has been very usefull to me, I needed anything like this for some of my pages and this code is perfect. I’ve developed a jquery plugin with this and uploaded it as a project at fontReSizer.

Also I comment it (in spanish) in my blog fontresizerjs-nuevo-plugin-de-jquery. The file can be downloaded and is full explained and configurable.

Thanks all.
Vera Ceccon
January 22, 2009
Quote

HI FOLKS!
I’m just a middle-aged teacher struggling with some HTML and CSS (enough for me) but I’ve been willing to implement an “increase-decrease” font script for my website, since my target audience varies a lot in age spectrum. However, I cannot make the above script work on the body of my page. I copied everything at the beginning of this page, read a few comments and nothing. There might be something basic that I am missing, since I am ignorant on javascripts, but I have used a few which seem to “call for” the script “onClick” or something similar, on the link, and I don’t see it here … Sorry for the ignorance …And thanks if you can help!
shinokada
January 24, 2009
Quote

Hi,
I wonder why you don’t add font-unit after
‘font-size’, newFontSize

Can anyone tell me?
Josh Comley
January 26, 2009
Quote

Hi folks,

For the font increase/decrease problem:

x * 1.2 = y
y * 0.8 != x

If you don’t want to stop using a multiple, then just do the following:

Increase:
x * 1.2

Decrease:
x / 1.2

Gabriele
January 30, 2009
Quote

on my site I want to do such a thing! are some problems. How can carry cookies with this script?

my code is:

$(document).ready(function(){
  // Reset Font Size
  var originalFontSize = $('div').css('font-size');
  $(".resetFont").click(function(){
  $('div').css('font-size', originalFontSize);
  });
  // Incrementa Font Size
  $(".increaseFont").click(function(){
  	var currentFontSize = $('div').css('font-size');
 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
	$('div').css('font-size', newFontSize);
	return false;
  });
  // Decrementa Font Size
  $(".decreaseFont").click(function(){
  	var currentFontSize = $('div').css('font-size');
 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
	$('div').css('font-size', newFontSize);
	return false;
  });
});

Aaron
February 2, 2009
Quote

This seems great but when i resize the fonts they get huge.

I have my fonts set to px in the css. Any way to have this resize px sized fonts?

I have tried using

$('.footer').append('<a href=";" rel="nofollow">Larger</a>');	
  $(".large").click(function(){
  var currentFontSize = $('.Content p').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 1);
  var newFontSize = currentFontSizeNum+1+"px";
  $('.Content p').css('font-size', newFontSize);
});

Shizu Redsora
February 15, 2009
Quote

Cool! But I think there is a cooler way… when you click on the Increase or Decrease, the fontSize is animated
yavuz
February 20, 2009
Quote

This is really cool, thank you

a questions,
i have default line-height
p{
line-height:17px;
}

how can i turn to line-height to normal
when i click to increase.

thanks a lot
Will
March 3, 2009
Quote

Great script. I just had one question: when I resize it only resizes the div that it is in. Is it possible to specify others divs that I want resized as well? Thanks.
8 awesome JQuery tips and tricks
March 12, 2009
Quote

[…] Source: Text Resizing With jQuery […]
James Bavington
March 25, 2009
Quote

Great blog, I’ve been building web-sites for years, using nothing but ‘px’ to define my text sizes. I kept reading blogs about using ems instead, for usability etc issues and I never really got the point. The demo that you link to is THE EXAMPLE! A good trick that I do is to set my CSS Body font size to 62.5%. Then for other tages, 1.1em becomes the equivalent of 11px, 1.4em is 14px etc. Great way to switch over.
To-do jQuery
March 27, 2009
Quote

[…] ShopDev - Redimensionar un campo de texto en base a […]
Web Design Quote
April 15, 2009
Quote

Great script, I tried it out and it works well. I’ll try doing some modifications though.

I would ask the same question as “Will” asked, “when I resize it only resizes the div that it is in. Is it possible to specify others divs that I want resized as well?”

Regards.
Freelance Flash Cloning
April 23, 2009
Quote

Great resource,Sounds interesting,thx for the useful Blog[….]
Wing
April 23, 2009
Quote

The script doesn’t work if the following line is in the style block/css file:

* { font-size:11px; }
…
Ali
May 22, 2009
Quote

thank you for sharing this information.
Nathan
June 13, 2009
Quote

Hi, how do I make it so users can only click to increase or decrease the size once?
Web design tutorials
June 25, 2009
Quote

Great script - thanks for sharing.
Les
June 26, 2009
Quote

@Nathan,

To only increase it by one, I simply removed the calculation of the current font site, and replaced the newFontSize variable with an integer:

$(”.FontSizeInc”).bind(”click”, function() {
var newFontSize = 19;
if (newFontSize, 11) {
$(”html”).css(”font-size”, newFontSize);
$.cookie($cookie_name, newFontSize);
}
return false;
});
TutsKing
July 6, 2009
Quote

This Shazamatastic! article has been added to the list of High Quality tutorials at TutsKing.com
Cosas de Agapornis
July 9, 2009
Quote

Great script.
Thanks for sharing.
Seth
July 24, 2009
Quote

Any chance we can get the final versions in their entire working order in one complete post? I’m not good at putting pieces together.

Thanks a million.
Oskar
August 3, 2009
Quote

I would also really appreciate a complete version of this. Too many changes and additions in this thread

Maybe someone with a little experience can put it all together in a jQuery plugin and maintain it over at plugins.jquery.com?

Cheers
Geert Dekkers
September 18, 2009
Quote

I noticed that IE goes haywire if you have html{font-size: 100%}. Do html{font-size:1em} instead.
Maria Cruz
November 24, 2009
Quote

Hi, I’m still new to web design, and I can’t quite get my head around JavaScript yet. So I have 2 questions:

First, is JQuery’s script free/open-source material? I’m assuming it is, but I wanted to make sure I don’t pirate someone else’s stuff.

Second, what about using font size attributes like “small, x-small, large, x-large, etc? Do they work with this script, or just the “em” and the percentage attributes?

Thanks, and take care.
Kalz
December 9, 2009
Quote

Hi Your code awesome. But, When i tried using it .. it is changing just the master page fonts but not the actual page font.I want to place it on the master page and I want all the pages and partial views to change it font. Please help. I am using asp.net mvc (c#).
Kalz
December 23, 2009
Quote

My Bad..Its working
Kalz
January 4, 2010
Quote

My version of code. It works on all the Browsers ( Especially on IE6)
We can Increase and Decrease the font size up to 3 levels. And we can also reset to its original font.

Jquery Code:

$(document).ready(function(){

var increaseclicks = 0;
var decreaseclicks = 0;
var originalFontSize = $(’html’).css(’font-size’);

// Reset Font-Size.
$(”.resetFont”).click(function(){
$(’html’).css(’font-size’, originalFontSize);
increaseclicks = 0;
decreaseclicks = 0;
});

// Increase Font Size
$(”.increaseFont”).click(function(){
var currentFontSize = $(’html’).css(’font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);

// use styles for tags. {IE6 fix} (because tag font size do not change on IE6)

var newFontSize = currentFontSizeNum + 1;
if (increaseclicks < 3) {
$(’html’).css({’font-size’: newFontSize});
increaseclicks++;
decreaseclicks–;
}
return true;
});

// Decrease Font Size
$(”.decreaseFont”).click(function(){
var currentFontSize = $(’html’).css(’font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum - 1;
if (decreaseclicks <3) {
// $(’html’).css(’font-size’, newFontSize); braces is an IE6 fix.
$(’html’).css({’font-size’: newFontSize});

decreaseclicks++;
increaseclicks–;
}
return false;
});

});

Just copy and paste the above code and see how it works..
Kalz
January 4, 2010
Quote

line 18 is about H tag { H1, H2, so on}. Please do not confuse.
Kalz
January 4, 2010
Quote

Link for PX to EM conversion.
http://pxtoem.com/
Media Street
February 7, 2010
Quote

Nice script. Thanks for sharing.
George
March 17, 2010
Quote

Is this possible to put into a function where it can be resized dynamically when the user resizes the browser window.

So Basically when the browser size reaches 1px by 1px the font is tiny and when the browser reaches a size of 800 x 600 is is larger in size but in proportion with everything else (that resizes as well).

Almost like flash resizing but for html.

Cheers,
George
ds
May 14, 2010
Quote

your comment…
Wiyono
July 20, 2010
Quote

Hallo,
nice job, i try to make that, but only work for one site, the other site i try to put, wich i copy all like a same, but the other don’t work?

Can you help me?

Regard
Wiyono
Dream Media Design
July 21, 2010
Quote

thanx some great info

<blockquote>quote</blockquote>

<em>some emphasized text</em>

To add code to your comments, simply wrap the code inside <pre> tags. Syntax highlighting will be added if you define the language. Example:
<pre lang="php">some code</pre>

Supported "lang" attribute values: html4strict, css, php, javascript, xml & mysql