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